BMO Harris Digital Banking

BMO Harris Bank, one of the largest US banks in the Midwest, wanted to update their digital banking experience from the ground up. The scope includes designing flows and states for enrollment, account summary, account details, transfers, statements, preferences, notifications as well as creating the design system and supporting developers during the build. BMO Harris digital banking is currently live and is available for customers on both desktop and mobile (iOS and Android).

Split Screen Design

When thinking about the ideal digital banking experience for BMO Harris, we wanted the experience to be great for both mobile while taking advantage of the extra space that desktop provides. The majority of BMO Harris’s user base were older (between 35-55 years of age), and primarily used their desktop computers to complete their daily banking tasks (based on results from user interviews). These users would typically only use mobile for light tasks such as checking their account balance. 

After some sketching and prototyping, we landed on a split screen approach for the desktop breakpoint. The left side will initially inform the user where they are within the product, and will change states after the user navigates further into a flow (ie. clicking into an account to view account details). This split screen design allows us to give elements more space, enhancing the user’s ability to scan and find the information they care about most. The left and right sections of the screen will stack vertically for mobile, behaving as it typically would in a responsive web product.

Split-Screen-Diagram

Design System

As this was the first digital redesign of Harris Bank since BMO acquired them, it was very important that the design system stayed true to the BMO brand. We took a mobile first approach to each component and made sure all elements were compliant with WCAG 2.0 AA standards. The BMO design system allowed us to quickly build out flows and iterate on them while ensuring that the whole product looks and feels like one entity. 

001_SSA-_-Guidelines-_-Colour-Palette
002_SSA-_-Guidelines-_-Spacing
003_SSA-_-Guidelines-_-Buttons
004_SSA-_-Guidelines-_-Selectors
005_SSA-_-Guidelines-_-Tabs
006_SSA-_-Guidelines-_-Menu-Bar
007_SSA-_-Guidelines-_-Input-Fields-Dropdown
008_SSA-_-Guidelines-_-Cards
009_SSA-_-Guidelines-_-Modal-Popup
010_SSA-_-Guidelines-_-Table

Final Designs

The final result is a product that shares the same identity was BMO and provides BMO Harris clients with the most up to date features so they have access to all their banking needs online.

Enrollment-001
Enrollment-002
Enrollment-003
Enrollment-004
Enrollment-005
Enrollment-006
Enrollment-007
Enrollment-008
Enrollment-009
Enrollment-010
Enrollment-011
Enrollment-012
Enrollment-013
Account-Summary-001
Account-Summary-002
Account-Summary-003
Account-Details-001
Account-Details-002
Account-Details-003
Account-Details-004
Account-Details-005
Account-Details-006
Account-Details-007
Transfers-001
Transfers-002
Transfers-003
Transfers-004
Transfers-005
Transfers-006
Statements-001
Statements-002
Statements-003
Preferences-001
Preferences-002
Preferences-004
Preferences-003
Preferences-005
Preferences-006
Preferences-007
Prev
Sensibill
Next
Giftopia

Interested in working together? Get in touch!

Email: richardli@richardlidesign.com
LinkedIn: linkedin.com/in/richardlidesign
Resume: view/download

© Richard Li 2020