Modernizing for convenience, control, and confidence
Redesigning CIBC's mobile app homepage (Part 1)
Redesigning CIBC's mobile app homepage (Part 1)
Small updates. Big Impact.
In 2022, I was involved in redesigning the CIBC mobile app home page. The mission was to fully support CIBC’s new brand guidelines and reduce complexity in the client experience. The refreshed experience saw a positive NPS score and increase of up 217% on digital sales channels, 2-weeks after launch.
How it started...
I joined CIBC Strategy's team at the start of 2022, closing a 4 year role with CIBC's digital dot-com team. I was quickly involved in a multi-year project called Platform Modernization aimed at consolidating and improving the secured digital platforms (web and mobile app). Taking on a Product Design Lead role, I worked with a small team of designers, responsible for leading the design process and providing UX and visual design expertise.
How might we enhance our client experiences and strengthen their relationship with our bank?
Platform Modernization is a multi-year initiative focused on modernizing and consolidating our digital platforms. CIBC was managing 8 different digital properties that were fragmented and inconsistent, resulting in significant build and operational costs.
Phase 1 of Platform Modernization was to refresh the native app homepage.
We kicked off a collaborative partnership with a human centred design firm, Solvers, to help the team re-imagine the app. This process drove and laid the ground work for the redesign of CIBC’s mobile app homepage.
Elevate the design to meet CIBC brand standards and perform against leading industry client experiences.
Clean up redundancies and improve UX and UI design gaps
Make adjustments to scale our experiences and prepare for the future of digital banking
The partnership with Solvers immediately led us to start building a more tighter and cohesive look. We produced multiple iterations of UI elements and components to help stress test and stretch out our solutions to cover edge cases.
Throughout this process, thoughtful consideration to scalability and accessibility were also key drivers that informed our decision making.
We leveraged previous user research findings, audit insights, and analytics to identify inconsistencies and define opportunities for improvement around the user interface. We magnified and inspected every small detail, while managing key expectations:
• Being responsible to brand
• Promoting convenience, control,
and confidence
• Addressing business needs and concerns
The app was previously using the native fonts—Roboto on Android and SF Pro on iOS. The homepage has now absorbed the Whitney font family bringing the brand personality to the platform. We also placed more attention and detail to the typographical treatments— introducing bolder font weights for higher contrast and increased font sizes for stronger visibility.
The previous header did not do its best at living up to CIBC’s brand and leaving a lasting impression. We used this space as an opportunity to: (1) greet clients for a meaningful and personalized experience, (2) descope low traffic elements such as the sign out button, and (3) offer contrast and depth in the quick links for defined interactive affordances.
The account summary table was quite heavy and blocky. It was important to surface the accounts and strengthen its visibility without cognitive overload. To define clearer hierarchy and structure, we detached the category title (1) and promo (2) to allow for the accounts to live as a family. In-line promos were treated as individual banners, positioned below the accounts.
To hone in the overall look and feel, we placed special attention to the finer UI elements. Here, we (1) flatten the UI for a cleaner and sharper style and layout. (2) We tweaked the existing margins and spacing for better breathability. And, (3) incorporated intentional design artifacts such as the chevron, which we drew from the CIBC logo.
The refreshed designs were implemented across CIBC’s client sectors, transforming across Retail, Imperial Service, and Private Wealth customers.
One month after our home page launch, we implemented braze cards to consolidate what was previously a heavy and disruptive messaging system. These new cards help keep targeted and dynamic content in one place without creating significant interference and taking up major real estate.
What we learned...
Using Figma as a collaboration tool between design and engineering teams was well received and became a learning opportunity on project handoffs.
We learned about the conditions and requirements on how information is displayed from a backend system and accessibility perspective.
Our NPS and app ratings remained positive and high after the change.
There was a significant lift in sales engagement post launch; up to 217% increase within the first 2 weeks.
We didn't go unnoticed ❤️
Request for a full case study: guinasao@gmail.com