In the last couple of years, the banking industry has gone through revolutionary changes in the digital space with online banking and mobile apps, making personal banking more convenient for clients everywhere.‚Äč I saw an opportunity to redesign the CIBC mobile banking app as a case study with the goal to improve its usability.

My Role:

UX Designer

Discovery

Working as a digital and retail banking representative at CIBC at the time, I began to realize the importance of user centred design as usability issues and frustrations arose when clients were encouraged to bank via mobile and digital channels. Although the app was functional in serving basic client needs, I was inspired to redesign it, as there was an opportunity to tailor features to certain client profiles to enhance a more seamless and enjoyable experience.

Understanding Customer Needs

I started by gathering information from clients by questions about their experiences of CIBC mobile banking, what features they used most, what they liked, what confused them and how mobile banking met or did not meet the needs. This was easy to do, as I was already in the front lines every day helping customers with their retail banking issues. By looking at patterns and commonalities in their feedback, I was able to generate two archetypes of the types of people who were coming into the branch with mobile banking issues.

The Business Owner

  • stay in control of cash flow on the go

  • perform critical payment approvals and transfers

  • be notified right away of pending transfers

  • view account balance and transactions easily

  • find a branch or atm quickly

The Tech Savvy Student

  • wants to efficiently personalize banking

  • transfer money to friends and family

  • navigate quickly and easily through in app

  • take advantage of remote services without going into a branch

An important factor that customers valued was getting important information quickly. I wanted to know what tasks users were most often performing and what they wanted to achieve, so I conducted an inventory of all the features and labels located in the hamburger menu.

Usage Patterns

I quickly noticed that the hamburger menu displayed a list of over 10 options to the customer at the time, yet they only used a few of these options in their day to day banking which were My Accounts, Bill Payments, Interac e-Transfers, Transfer Funds and eDeposit.

Viewing & Searching for Transactions

On the My Accounts screen, it was important to customers to be able to find the transactions conducted. Some believed that they could do this by pressing the magnifying glass icon located above the transaction list, however, this is actually not a button. The search function was actually located under the more button at the top right corner of the screen.

Transferring Funds

For Interac e-Transfers and Transfer Funds, some customers made comments about not fully understanding the difference between the two options, only realizing after that one allowed you to transfer money between accounts, and the other between third parties. 

Low Fidelity Wireframes

 

I wanted to help foster quicker design making with clear navigation and visually supportive content. I started by creating low fidelity wireframes.

Mid Fidelity Wireframes

 

High Fidelity Mockups

Toolbar

I created a toolbar to support easier and quicker navigation for the most high used functions.

Search & View Transactions

I used representative imagery and changed the more icon at the top right of the screen to a search icon. I also redesigned the transaction list so customers can now swipe to view transaction by month as opposed to being taken do a different screen to view more transactions.

Single Transfer Screen

I reduced transfers to a single screen, and mapped out the new user flow for both personal and third party transfers.

© 2019 Jackie Huang