Cases
NBC
Project Overview
As the Lead UX Designer at the National Bank of Canada, my main responsibility was to create a consistent and intuitive user experience across multiple digital platforms, for different business verticals. This involved developing a long-term design vision, unifying the user experience, and establishing a design system that third-party agencies could use to maintain consistency in new digital products.
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
Upon joining, I conducted a comprehensive audit of the existing digital platforms. The bank's web presence included several sections on different sites, each with its harcdoded CSS, and in some cases, inline styles within the HTML.
Key Initiatives:
Holistic Navigation Concept: Developed a unified navigation bar to integrate multiple domains under a single user-friendly interface.
CMS Integration: Designed the first components and styles for the new Content Management System (CQ5, now AEM), which involved reinterpreting old content and adapting it to new components and styles.
Bank Account Comparison Tool: Designed a user experience for navigating and comparing bank accounts, which was translated into UI documents for developers working in parallel.
We started by questioning existing design conventions and implementing changes based on modern UX principles:
Typography: Switched from print-optimized fonts to screen-optimized fonts for better readability on small devices.
Legal Content: Organized legal content in a non-intrusive manner using drawers and lightboxes.
Consistent Terminology and Formats: Standardized technical jargon, terminology and formats across platforms.
Simplified Transactions: Reduced transaction steps to a maximum of four, ensuring a clear and efficient user flow.
Direct Language: Eliminated unnecessary politeness for clearer communication.
Design Decisions
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.
User-Centered Design Process
We adopted Design Thinking and Design Sprint methodologies to ensure our designs were user-centered and validated through testing.
Workshops and Collaboration:
Workshops: Conducted workshops to align the team, gather ideas, and create empathy for users among developers and decision-makers.
User Testing: Performed extensive user testing across various sectors to validate designs and identify pain points.
Prototyping: Used quick turnarounds and prototypes to fine-tune designs based on user feedback.
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.
Tablet and Mobile App Design: Collaborated with the UX team from Havas to design and develop building blocks for evolving mobile design patterns for iOS and Android apps.
ATM Interface Design: In partnership with NCR, we improved the ATM design system by:
Choosing a cleaner font and palette.
Increasing accessibility with better contrast colors.
Optimizing font sizes and contrast for different use cases.
Designing new user habits for the envelope-free deposit process.
Among other solutions for insurances, investments, sales, & the branch of the future.
Key Projects
The components adapt seamlessly to different machines and branch-specific offerings, maintaining a unified interface.
Challenges & Solutions
Complex Stakeholder Environment: Navigated differing opinions and priorities among stakeholders by fostering open communication and emphasizing the value of a unified design approach.
Legacy Systems: Worked within the constraints of legacy systems by thoroughly documenting new designs and ensuring seamless integration with existing technologies.
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 the UX team at the National Bank of Canada was a complex yet rewarding experience. It required a deep understanding of design principles, stakeholder management, and user needs. The success of this project was driven by:
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. From the business initiative, dev team strengths to the tech stack.
Collaborative Team Environment: Fostered a positive and productive atmosphere within in-house and outsourced teams.
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.