.png){kind=small}
Rebranding an Online Bank for 20 Million Users
OVERVIEW
When Banamex separated from Citibank, it triggered a full brand renewal across all digital channels. I led the rebranding implementation for BancaNet — the online banking platform — building the Roseta Design System for web from scratch and guiding a team of 7 designers to ship a modernised experience for over 20 million users, on schedule.
- 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
📂
No documentation
A Sketch-to-Figma migration and years of prioritzsing mobile had left BancaNet with almost no surviving feature documentation. There was no single source of truth.
🏚️
A forgotten product
Outdated UI patterns, no component library, and significant usability debt accumulated while the mobile app took all the investment and attention.
⚙️
Technical constraints
BancaNet runs on legacy systems that limit what can be shipped. Innovation had to happen within real engineering constraints, requiring constant collaboration with the dev team throughout.
CHALLENGE
Established a design strategy to rebrand over 40 features, build a design system from the ground up and lead the project to a successful launch, modernising the visual experience for over 20 million users.
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
Strategic screens went through an intensive iteration process before the team began recreating screens at scale. Approval required sign-off from design management, the design head, the tech lead, and marketing — a process that added time but aligned the whole organisation behind the new direction.
PARTNERSHIP WITH ARCUS
Once approved, a team of 7 designers joined to recreate 200+ screens across 40+ features — implementing components and templates built during the system phase. A key discovery mid-process: web design is responsive, which added a significant layer of work absorbed without extending the timeline.
SEARCH FUNCTIONALITY
Rather than handing off complete flows, the team handed off strategic screens in batches to meet timelines. This created ambiguity for developers and QA, so designers joined follow-up sessions to answer questions directly — sessions that also uncovered additional undocumented features.
SAVED SERVICES
Stakeholders reviewed pre-shipment and pre-production environments for design fidelity and functionality. On ship day, the full design team walked through the live product together — logging an inconsistencies file with evidence to prioritise fixes immediately after launch.
METRICS & EVOLUTION
OVERVIEW
When Banamex separated from Citibank, it triggered a full brand renewal across all digital channels. I led the rebranding implementation for BancaNet — the online banking platform — building the Roseta Design System for web from scratch and guiding a team of 7 designers to ship a modernised experience for over 20 million users, on schedule.
- 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:
📂
No documentation
A Sketch-to-Figma migration and years of prioritzsing mobile had left BancaNet with almost no surviving feature documentation. There was no single source of truth.
🏚️
A forgotten product
Outdated UI patterns, no component library, and significant usability debt accumulated while the mobile app took all the investment and attention.
⚙️
Technical constraints
BancaNet runs on legacy systems that limit what can be shipped. Innovation had to happen within real engineering constraints, requiring constant collaboration with the dev team throughout.
Take a look to BancaNet's experience before rebranding:
CHALLENGE
Established a design strategy to rebrand over 40 features, build a design system from the ground up and lead the project to a successful launch, modernising the visual experience for over 20 million users.
Solutions
DOCUMENTATION
Once approved, a team of 7 designers joined to recreate 200+ screens across 40+ features — implementing components and templates built during the system phase. A key discovery mid-process: web design is responsive, which added a significant layer of work absorbed without extending the timeline.
Component library for web applications
Strategic screens went through an intensive iteration process before the team began recreating screens at scale. Approval required sign-off from design management, the design head, the tech lead, and marketing — a process that added time but aligned the whole organisation behind the new direction.
Final Designs
Once approved, a team of 7 designers joined to recreate 200+ screens across 40+ features — implementing components and templates built during the system phase. A key discovery mid-process: web design is responsive, which added a significant layer of work absorbed without extending the timeline.
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
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
