.png){kind=small}
Rebranding Banamex – BancaNet
OVERVIEW
This project involved leading the end-to-end redesign and implementation of Banamex's new brand identity across its flagship web platform, BancaNet, and four secondary applications. We faced the challenges of outdated systems and minimal documentation.
I established the design strategy to rebuild the design system from the ground up and managed the project to a successful launch, modernizing the experience for over 20 million users.
- Year
- July 2024 – March 2025 Launched: March 2025
- Role
- Lead Product Designer Design System Interaction Designer Project Manager
- Research tools
- Web Resposive (mobile, tablet and desktop)
- Design tools
- Figma
CONTEXT
PROBLEMS
A "Forgotten" Product
Years of focus on mobile had left BancaNet with outdated UI patterns, no single source of truth for components, and significant usability debt.
Technical Constraints
A fragmented tech stack limited what was possible, requiring creative and pragmatic design solutions.
No functionality changes
The mandate was a visual rebrand only, meaning we had to significantly improve perception and modernity without altering any user flows.
CHALLENGE
How can we deliver a cohesive, high-quality brand experience within tight technical and scope constraints, while ensuring our design process remains adaptable for the future?
GOALS
Unified experience
Deployed the new Roseta design system across 5 web applications (BancaNet, Virtual Assistant, Infosis, Afore Banamex, AcciTrade) and over 50 user flows.
A foundation for the future
The new component library is now the standard for all future web development, dramatically improving scalability and reducing design and development debt.
Enhanced perception
Qualitative feedback from users and internal stakeholders highlighted a "modern," "fresh”, and “new” digital experience, successfully distancing the brand from its old Citi identity.
Solutions
One-time payments
Designed and built a new, scalable component library with auto-layout, responsive variants, and tokens. This directly helps reduce design time for new screens by 40% and ensures pixel-perfect consistency across all digital channels.
PARTNERSHIP WITH ARCUS
We engaged in an extensive design iteration process that led to secured approval from senior leadership with minimal revision cycles.
The primary focus was on finding the most effective way to incorporate the new brand styles that were both beautiful and feasible to build within the old technological system.
At last, we ensured a smooth hand-off and delivered 100% of the designed UI to production.
SEARCH FUNCTIONALITY
SAVED SERVICES
METRICS & EVOLUTION
Strategy & Scoping: Defined the project roadmap, prioritization framework, and success metrics in collaboration with product and engineering leads.
Design System Architecture: Audited the existing 5 applications and spearheaded the creation of "Roseta for Web" a comprehensive Figma library with robust components with responsive behaviors.
Cross-Functional Leadership: Acted as the bridge between design, engineering, product teams, and the mobile design team to ensure channel homologation.
Project Management: Managed the design backlog, led a team of two designers, assigned tasks, and ran weekly syncs to keep the project on track for its hard launch date.
OVERVIEW
This project involved leading the end-to-end redesign and implementation of Banamex's new brand identity across its flagship web platform, BancaNet, and four secondary applications. We faced the challenges of outdated systems and minimal documentation.
I established the design strategy to rebuild the design system from the ground up and managed the project to a successful launch, modernizing the experience for over 20 million users.
- Year
- July 2024 – March 2025 Launched: March 2025
- Role
- Lead Product Designer Design System Interaction Designer Project Manager
- Devices
- Web Resposive (mobile, tablet and desktop)
- Design tools
- Figma
CONTEXT
Banamex, one of Mexico's largest banks with over 140 years of history and more than 20 million users, embarked on a new era following its separation from Citi. This transition presented a unique opportunity for a comprehensive business and audience brand renewal, including a full visual redesign.
The brand redesign was led by the agency Interbrand, with collaboration on motion elements from Plenty.
PROBLEMS
Following its separation from Citibank, Banamex needed to visually signal a new era of innovation and growth. While Interbrand developed a beautiful new brand identity, the web ecosystem presented significant hurdles:
A "Forgotten" Product
Years of focus on mobile had left BancaNet with outdated UI patterns, no single source of truth for components, and significant usability debt.
Technical Constraints
A fragmented tech stack limited what was possible, requiring creative and pragmatic design solutions.
No functionality changes
The mandate was a visual rebrand only, meaning we had to significantly improve perception and modernity without altering any user flows.
Take a look to BancaNet's experience before rebranding:
CHALLENGE
How can we deliver a cohesive, high-quality brand experience within tight technical and scope constraints, while ensuring our design process remains adaptable for the future?
Solutions
DOCUMENTATION
Conducted a full UX audit; mapped and documented all BancaNet’s user flows from scratch in Excel and a Figma project. With this, a single source of truth was created, which helped align product, design, and engineering teams, preventing future drift.
Component library for web applications
Designed and built a new, scalable component library with auto-layout, responsive variants, and tokens. This directly helps reduce design time for new screens by 40% and ensures pixel-perfect consistency across all digital channels.
Final Designs
We engaged in an extensive design iteration process that led to secured approval from senior leadership with minimal revision cycles.
The primary focus was on finding the most effective way to incorporate the new brand styles that were both beautiful and feasible to build within the old technological system.
At last, we ensured a smooth hand-off and delivered 100% of the designed UI to production.
Outcome + Impact
We successfully launched the new Banamex brand on schedule, achieving our goals:
Unified experience
Deployed the new Roseta design system across 5 web applications (BancaNet, Virtual Assistant, Infosis, Afore Banamex, AcciTrade) and over 50 user flows.
A foundation for the future
The new component library is now the standard for all future web development, dramatically improving scalability and reducing design and development debt.
Enhanced perception
Qualitative feedback from users and internal stakeholders highlighted a "modern," "fresh”, and “new” digital experience, successfully distancing the brand from its old Citi identity.
my Role
Strategy & Scoping: Defined the project roadmap, prioritization framework, and success metrics in collaboration with product and engineering leads.
Design System Architecture: Audited the existing 5 applications and spearheaded the creation of "Roseta for Web" a comprehensive Figma library with robust components with responsive behaviors.
Cross-Functional Leadership: Acted as the bridge between design, engineering, product teams, and the mobile design team to ensure channel homologation.
Project Management: Managed the design backlog, led a team of two designers, assigned tasks, and ran weekly syncs to keep the project on track for its hard launch date.
OVERVIEW
- Year
- July 2024 – March 2025 Launched: March 2025
- Role
- Lead Product Designer Design System Interaction Designer Project Manager
- Research tools
- Web Resposive (mobile, tablet and desktop)
- Design tools
- Figma
