BMO Alto
BMO Alto
Designing BMO’s first online-only banking platform
Responsibilities
Information Architecture
UX Design
Visual Design
Coordinating with the Content Strategist and Product Owner
Performing designs reviews on the page post-development
Team:
Product Designer (me), Product Owner, Content Strategist, QAs and Developers
Business & marketing stakeholders, legal & compliance
Brand Governance
Timeline
11 months (original timeline 5 months)
Problem statement
“How might we educate rate-seekers about BMO Alto’s online-only, high-rate deposit accounts and convince them to sign-up?”
As Alto was a completely new site and the main BMO brand had low brand recognition among American customers, the content strategist and I wanted to keep things simple and focus on educating customers about BMO Alto and the features of its 2 deposit accounts.
I developed a sitemap to visualize the scope and help me identify any gaps in my understanding of the project, such as;
Should each CD term be treated like a separate product?
Should there be a standalone FAQ page in-addition to the page-level FAQs?
(Click to enlarge) Early site-map for BMO Alto.
Discovery
To identify the best design patterns to reuse and serve our target audience, I performed a competitor analysis of 10 US banks
(Click to enlarge) Homepage wireframes. In the first-round I included a help me choose (HMC) module to help customers choose. In the next version, I moved the HMC lower down and included the 2 product side by side to immediately show customers our product offering. Ultimately, I removed the HMC completely as there only 2 product options to choose from
Some of the top patterns I identified and later used in the wireframes were:
Using calculators to help customers understand product benefits and increase the stickiness of the product pages. This was also confirmed by past research done by our past testing as well
Comparison to competitors as well as the national average for rates
Product rates are shown above the fold
Using sticky navigation so the primary CTA is always within view for users
CONSTRAINTS
Met with the brand governance team to align on a visual design that would appeal to tech-savvy prospects while addressing stakeholder feedback.
I was restricted to using the Alto branding developed by a vendor before my involvement with the project. This branding was developed to communicate that Alto was a discount brand, offering leaner high-rate products with reduced services compared to the main BMO brand. It uses light blue as the primary accent colour, a contrast to the parent brand's traditional, trustworthy deep blue to further highlight its status as a sub-brand using a simple colour palette.
For my first round of designs, I followed the brand guidelines but received less than stellar feedback from stakeholders. Their main critique was that the pale blue made the page didn’t feel ‘edgy’ enough for the target demo. I decided to use a dark blue gradient, normally reserved for premium products and pages on the main brand. I wanted to give a sleeker feeling to the Alto site to distinguish it from the parent brand, making it more appealing to tech-savvy prospects and satisfying stakeholder feedback.
I met with the brand team to understand how far we could deviate from the lighter branding in the Alto brand guidelines. Unfortunately, because the leadership had already approved the guidelines, the brand governance team was firm about adhering to them.
(Click to enlarge) Based on feedback from business stakeholders, I experimented with a darker background gradient to elevate the design and make it feel more modern.
Facilitation
Facilitated smaller, remote meetings with stakeholders to gain alignment on project goals and move forward with the visual design.
After realizing there was a disconnect between the two stakeholders groups from Product and Marketing, I decided to have smaller meetings to understand their goals and combine their feedback to pinpoint the common ground between them. This strategy helped me have more in-depth conversations with partners and control the direction of the design.
(Click to enlarge) Designs for the Savings and CD pages
Visual Design
Playing around with content hierarchy, components and brand colours
From my smaller meetings with stakeholders, I realized it would be better to highlight rate and main product features in the hero section above the fold to draw prospects in. For the product cards I decided on horizontal cards in the end, as partners wanted to discourage direct comparison between products and instead encourage users to potentially sign up for both products.
Due to constraints with the application of the secure experience, we were unable to offer one primary CTA button for customers to open either account in the same journey. Instead I added the CTAs to the individual product cards on the design. Additionally, as there was no longer a primary CTA the sticky nav no longer made sense. I also removed the steps to open from the homepage since it was slightly different from each product and I replaced it instead with a section to highlight some of Alto’s digital capabilities.
(Click to enlarge) From left to right, some of my experimentations with the visual design of the Alto homepage
Outcome
Launched in April 2023, within 3 months Alto had $1 billion in deposits from customers all over the US, with the majority being in California. Similar product pages on BMO.com take about 18 months to reach that amount
(Click to enlarge) Final full page designs for the Alto homepage, as well as the Certificate of Deposit (CD) and Savings Account product pages.
Thank-you for reading!
Wanna learn more about this project? Let’s chat
You can reach me at: kerleajoseph@gmail.com