Bank of the West’s digital transformation initiative sought to create a mobile-first, user-centered banking platform. As part of this effort, a scalable and consistent UI design system was critical to addressing outdated, inconsistent visuals and improving efficiency across teams. The design system streamlined collaboration, ensured ADA compliance, and enabled faster iteration for future projects.
Client
Bank of the West
A leading financial institution in the US, primarily serving the Midwest and Western United States. Acquired by BMO in 2023.
Timeline
October 2020 – May 2022 | 4 Phases
Team Composition
A multi-disciplinary team with a project lead, 2 UXUI designers, a visual designer, copywriters, developers, marketing experts, and financial product specialists.
My Role
I played a central role in modernizing the online banking experience, progressing from component design to managing design handoffs and leading workshops and presentations. My impact grew as I advanced from a junior to mid-level UXUI designer, shaping a more user-centered, accessible platform.
Phase 1-2
User journey mapping
Workshop hosting
Wireframes
Component creation
Phase 3-4
Design-Dev handoffs
Quality control
Client presentations
Team management
Goal
Redesign Bank of the West’s digital platform to create a high-performing and mobile-first website that enhances customer experience, brand consistency, and sustainability.
The project unfolded in four progressive phases, each focusing on specific outcomes and iterations.
Phase 1
UXUI Audit & Design System Foundation
Gathered insights from stakeholder and user interviews; established baseline assessments and foundational design elements, including typography, color schemes, and spacing standards.
Phase 2
Information Architecture & Key Pages
Built a consistent structure, aligned business unit content, and optimized the sitemap for seamless navigation. Designed the main pages to ensure cohesive visual and functional standards.
Phase 3
UX/UI Refinement, Accessibility Testing & Handoff
Delivered a refined, accessible design and scalable system for rapid updates. Conducted design-to-development handoff with quality control for high implementation accuracy.
Enhanced wealth management user flows and coordinated pages to ensure continuity. Adapted designs to align with evolving project priorities.
methods
Research and Benchmarking
UXUI Audit
Reviewed the existing website to identify inconsistencies, redundant components, and usability pain points.
Competitor Analysis
Benchmarked design systems from leading banks and financial institutions to understand industry best practices.
Stakeholder Collaboration
Partnered with the marketing team to align use cases and content priorities with brand identity.
Defined principles
Consistency
Ensure uniform visuals and interactions across the platform.
Accessibility
Prioritize ADA compliance to create an inclusive user experience.
Scalability
Design a system that supports rapid updates and evolving business needs.
Efficiency
Reduce redundancy and free up resources for solving complex design problems.
Solution
Design Decisions & Rationale
Mobile-First Approach
Responsive layouts with adaptive scaling to ensure seamless transitions between mobile and desktop for consistent usability.
Enlarged tap targets and added generous spacing around interactive elements to reduce errors and improve touch accuracy on mobiles.
Positioned quick-action buttons at the bottom of the screen for one-handed ease and immediate accessibility.
Systematic Component Design
Adapted brand guidelines into a digital-first framework, including optimized colors, typography, spacing, grids, and icons for consistent screen usability.
Defined clear component names, documented default states and transitions, and included contextual annotations with breakpoints for seamless design-development alignment.
Enabled dynamic adjustments with on/off state toggling and adaptable components for diverse project requirements.
Modular, Scalable Design System
Built in Storybook, this design system enhances collaboration and efficiency for developers, designers and marketing, serving as a single source of truth for consistent UI components. Designers could now focus on problem-solving rather than recreating components.
Easily adapt components to meet branding standards while allowing for quick design updates.
Interactive Development
Experiment with component states in real time to test and refine UI elements effectively.
Pre-Coded Efficiency
Streamlined updates across all instances reduce version discrepancies and speed up development process.
Comprehensive Guidelines
Provided clear explanations of each component, including when and how to use them, supported by examples, dos and don’ts, and detailed contextual notes for clarity.
Annotated Visuals
Incorporated picture examples and annotated layouts to enhance understanding of component functionality and usage in various scenarios.
Variant Specifications
Documented state changes, naming conventions, and customizable options, ensuring components are easy to adapt and implement accurately.
Breakpoints and Responsiveness
Outlined size indications, breakpoints, and responsive behaviors for seamless cross-device performance and developer alignment.
ADA Compliance & Accessibility
Used high-contrast colors and clear fonts to enhance readability for users with visual impairments.
Structured content with accessible headings and labels for easy screen reader navigation.
Added alt text, keyboard navigation, and focus indicators to ensure inclusive interactions.
Improved Product Discoverability
Clear navigation with collapsible menus or a tab bar allows quick access to essential sections.
Reduced cognitive load by consolidating services under fewer categories, making complex financial content more accessible.
Streamlined structure improves engagement and conversion in key flows, such as account opening.
Sustainable and Inclusive Brand Messaging
Integrated eco-conscious icons and visuals to highlight environmental commitment.
Featured diverse imagery to reflect a broad user base and foster inclusivity.
Emphasized sustainability in concise and approachable language, aligning with brand values.
Incredible work! You persevered and didn’t stop until you got to great.
Ben Stuart
Chief Marketing Officer at Bank of the West
Impact
Significant Success in Driving User Engagement and Conversion
The modular framework of the design system facilitated efficient scalability and growth, ensuring that the platform could adapt to evolving user needs and market demands. Bank of the West's design system has been honored by the iF Design Awards and the Indigo Design Awards.
200%
Increase in product page visits from the homepage
2-3x
Increase in user navigation to account opening pages
Reflections & Learnings
Working on a scalable design system for a financial institution highlighted the importance of adaptability and clear communication in design handoffs. Collaborating with multi-disciplinary teams to align with evolving client priorities sharpened my leadership skills and technical expertise, while reinforcing the value of user-centered design as a catalyst for digital transformation.
This experience deepened my understanding of creating scalable systems that align with both design and technical goals, emphasizing that the success of any design system lies in its ability to evolve with business needs and maintain clarity for all stakeholders.
.png)
