Cases
NBC
Role
Head of UX / UI Design
Team
3+ designers in-house and agency teams
Duration
2013–2014 (2 years)
Scope
Mobile app, tablet app, website (CMS migration), touchscreen ATM
Project Overview
The situation I walked into
When I joined the National Bank of Canada as Head of Digital Design, the bank's digital experience was fragmented. Multiple agencies were producing work with different interpretations of the brand. Business verticals operated in silos, each with their own visual language. The website was a patchwork of hardcoded CSS and inline styles spread across disconnected domains. And leadership hadn't yet recognized design as a strategic functionm, it was treated as a service layer, not a driver of customer trust.
The result: customers moving between the mobile app, the website, and the ATM felt like they were using products from several different companies, answering the same questions, asked in different manners.
Rounds of prototyping, user testing and iterating. User testing was key to quickly fail or validate our designs. Users were constantly teaching us where we were wrong and pointing at us the main pain points. We preferred Quick turn-arounds with the hardware (the ATM) to fine-tune our UI. Considering accessibility, ergonomy and ambience
Context
The National Bank of Canada faced challenges with inconsistent design and user experience across its platforms. Different agencies and VPs had varying interpretations of the bank's design and branding guidelines, leading to a fragmented user experience.
My goal was to create a cohesive design language and system that would standardize the user experience across all digital touchpoints.
Initial Steps
Understanding the problem before solving it
I didn't start by redesigning screens. I started by listening.
The first months were spent mapping the ecosystem — tracing the flagship customer journeys end to end, interviewing stakeholders across business verticals, and auditing every digital touchpoint. I wanted to understand two things: what constraints came from real regulatory requirements, and what constraints were simply inherited habits, things done because "that's what other banks do", that had never been challenged.
That distinction turned out to be the key. A lot of what felt immovable was actually just convention no one had questioned.
With a clear picture of the landscape, my team and I built four things that would hold the entire transformation together:
1. A product vision
We defined what the bank's digital experience should feel like, not just look like. The north star: a customer should be able to move between any device, any touchpoint, and feel like they're in the same place. Changing devices should feel agnostic and seamless, no need to re learn the UI.
2. An operating model
We restructured how design work happened. With three major agency partners — McKinsey on the web migration, Havas on mobile and tablet, and NCR on the ATM — plus internal teams, coordination was critical. Instead of each vertical and agency doing their own thing, we created a shared process with clear ownership, review points, and quality standards. My team became the connective tissue: we set the direction, maintained the system, and ensured every partner was building from the same foundation.
3. A design system
We built a unified design language, reusable components, consistent patterns, and documented decisions, that worked across web, mobile, tablet, and ATM. This became the single source of truth for every team, in-house and external..
Design Decisions
Building the foundation
4. A decision framework
The decision framework was arguably the most important piece. It gave every team a shared set of principles to make design decisions without bottlenecking through me. The framework included:
The Design Thinking and Design Sprint processes are iterative methods that combines empathizing with users, defining problems, ideating solutions, prototyping, and testing to rapidly develop and refine innovative products.
Earning buy-in, not demanding it
One of the earliest challenges was getting the different business verticals aligned. Each VP had their own priorities, their own agency relationships, and their own interpretation of what "good design" meant.
We didn't mandate change from the top. We started by explaining — to each vertical — why good design was a shared investment that would pay back. We showed how inconsistency was costing them: in customer confusion, in redundant development work, in brand dilution. We turned the lights on, and let the business case do the convincing.
Over time, the VPs went from skeptical to aligned. Design moved from being a cost center to a strategic capability.
We embedded Design Thinking and Design Sprint methodologies into everything we did:
Workshops to align teams, build empathy for users among developers and decision-makers, and generate ideas collaboratively.
Extensive user testing across every vertical — from concept validation to high-fidelity flows. Users consistently taught us where we were wrong and pointed us toward the real pain points.
Rapid prototyping with quick turnarounds, especially for the ATM hardware, where we needed hands-on validation that screen mockups couldn't provide.
Comprehensive research to understand the technology, user needs, bank services, and products — so we could simplify and unify the customer journeys with confidence.
The design process
What worked
Touchscreen ATM. We designed a fully functional ATM interface using consistent, reusable components, focusing on details like clear call-to-action labels and strategic positioning. Still available to clients.
My team and I tackled the full digital surface area simultaneously:
Mobile and tablet apps (with Havas)
We partnered with the agency Havas to design and build the mobile and iPad apps for iOS and Android. My team owned the design direction and system consistency; Havas brought execution capacity. Together we shaped the evolving mobile patterns — always grounded in the shared design system so the apps felt like a natural extension of every other touchpoint.
Website — CMS migration (with McKinsey)
The bank's web presence was scattered across multiple domains, each with its own hardcoded styles. Working alongside McKinsey on the platform migration, we designed every web component needed to move from the legacy handmade site to the CQ5 platform (now Adobe Experience Manager). This included a holistic navigation concept that unified several sites under a single navigation bar — giving customers, for the first time, a complete view of the bank's services in one place.
We also designed modular components that adapted seamlessly to new product offerings — accounts, credit cards, comparison tools — ensuring cohesion as the site grew.
Interactive touchscreen ATM (with NCR)
In partnership with NCR, we redesigned the ATM interface from the ground up. This meant:
Switching to a cleaner, screen-optimized font and color palette
Increasing accessibility with better contrast and optimized font sizes
Designing new interaction patterns for the envelope-free deposit process
Building a component system that adapted to different ATM hardware and branch-specific service offerings
We ran rounds of prototyping, user testing, and iterating — quick turnarounds with the actual hardware to fine-tune the UI. We considered accessibility, ergonomics, and the ambient environment of the branch itself.
Bank account comparison tool
We designed the experience for navigating and comparing bank accounts, then translated it into UI specification documents that developers could work from in parallel — keeping delivery moving while design stayed ahead.
Key Projects
What we shipped
The components adapt seamlessly to different machines and branch-specific offerings, maintaining a unified interface.
Challenges & Solutions
Design became strategic
Leadership went from treating design as decoration to recognizing it as a competitive advantage. We had direct access to decision-makers, which meant design considerations shaped business decisions — not the other way around.
The experience became cohesive
Customers could move between mobile, web, and ATM and feel like they were using the same bank. The fragmented, multi-agency chaos was replaced by a unified design language and consistent interaction patterns.
The system scaled
The design system and decision framework meant new features and new teams could build without breaking consistency. Third-party agencies had clear standards to follow. The work sustained itself beyond my tenure.
The industry noticed
Several of our design decisions — particularly on mobile and ATM — were adopted by other Canadian banks in the years that followed. The ATM interface we designed remains in use by clients to this day, over a decade later.
Internal alignment held
The operating model and shared principles we established meant the VPs stayed aligned. Design quality didn't depend on one person policing it — it was embedded in how the organization worked.
The holistic navigation concept was created in order to unify several sites (domains) under one single navigation bar. This would help users to grasp a holistic view of the bank’s services. The concept is currently implemented.
Leading design at the National Bank of Canada was a masterclass in organizational design as much as product design. The hardest problems weren't on-screen — they were in the room. Aligning stakeholders, challenging inherited assumptions, and building a culture that valued consistency over individual preference.
Three things made it work:
Access to decision-makers. Without executive alignment, none of the systemic changes would have stuck.
Depth across levels. I operated at the strategic level — product vision, operating model, stakeholder alignment — while staying close enough to the details to know the tech stack, the developer constraints, and the component-level decisions.
A collaborative team environment. The transformation was a shared effort across in-house and outsourced teams. I focused on building a positive, productive atmosphere where good work could happen.
This role shaped how I think about design leadership: it's not about making things pretty. It's about building the systems, frameworks, and culture that let an organization deliver consistently great experiences — at scale, across every touchpoint.
Reflection
We designed modular components that effortlessly adapted to the new web design and product offerings, including accounts and credit cards. These components ensured a seamless integration, providing a cohesive and intuitive user experience across all platforms.
Cohesive journeys: we did extensive research to understand our technology, user needs, bank services and products to simplify and bring a unified view of the different user journeys.
Impact
The initiatives I led resulted in a more consistent and intuitive user experience across the bank's digital platforms, improved efficiency for development teams, and enhanced customer satisfaction. This project laid the foundation for future digital transformations at the National Bank of Canada.
Success Factors:
Access to Decision Makers: Ensured alignment and support for design initiatives.
High-Level and Detailed Understanding: Balanced strategic vision with detailed documentation and technical knowledge.
Collaborative Team Environment: Fostered a positive and productive atmosphere within in-house and outsourced teams.