.png){kind=small}
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
- Desktop Web Tablet Web Mobile Web
- Design tools
- Figma
CONTEXT
In March 2023, Citibanamex (now Banamex) was undergoing a visual identity update within its app to deliver a fresher, more modern experience for users. This change was implemented in phases and would eventually impact all of the app's functionalities.
When the time came for the Bill Payments section, we seized the opportunity to enhance the experience working closely with research, interaction design, business, development teams and strategic partners to create a truly user-centered payment journey.
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 UX 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
Launched a unified experience
Deployed the new Roseta design system across 5 web applications (BancaNet, Virtual Assistant, Infosis, Afore Banamex, AcciTrade) and over 50 user flows.
Established 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.
MVP
Conducted a full UX audit; mapped and documented all BancaNet’s user flows from scratch in Excel and a Fijma project. With this, a single source of truth was created, which helped align product, design, and engineering teams, preventing future drift.
INTERACTION COST
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
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
- Desktop Web Tablet Web Mobile Web
- 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 Citi, 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 UX 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?
DOCUMENTATION
Conducted a full UX audit; mapped and documented all BancaNet’s user flows from scratch in Excel and a Fijma 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:
Launched a unified experience
Deployed the new Roseta design system across 5 web applications (BancaNet, Virtual Assistant, Infosis, Afore Banamex, AcciTrade) and over 50 user flows.
Established 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
I owned the strategy and execution for the web rebrand, moving beyond just design into product leadership.
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 that .
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.
