OVERVIEW

It’s time for a change

CIBC embarked on a major platform modernization initiative to elevate the bank’s digital experiences. One of the project deliverables was to create a fully responsive online banking platform to fulfill the demand for future banking.

My contribution was delivering a complete redesign of the home page that aligned with the native app’s new visual design. The multi-disciplinary delivery teams were comprised of accessibility consultants, strategists, product owners, project managers, researchers, UX and visual designers, writers, developers, and QA analysts.​

We worked in 2 week sprints, delivering detailed user interaction documents (UIDs) and visual design documents (VDs) to build simple, intuitive, and seamless experiences for our wide range of user groups.

PAIN POINTS

Why were things being changed?

As Canadians engage more with digital experiences as part of their everyday lives, our applications are now evaluated against the most recent digital touchpoint the client experienced before engaging with us.

Platform modernization is touching upon several pain points that were discovered via 3rd party audits of the digital experience. For the purposes of this focused case study, here are the pain points that are relevant to the online banking experience:

• The overall design is outdated

• There is an overabundance of links with a lack of hierarchy and organization

• Inconsistency in design between pages

• Lack of personalization

PROJECT NEEDS AND GOALS

What’s the end goal?

The overarching aim of this initiative is to reduce navigational complexity and fulfill the bank’s business requirements of modernizing the clients’ digital experiences. Currently, the bank manages 8 different platforms that’s resulting in high operating costs. The development goal is to meet industry leading client expectations of having a consolidated and holistic experience across all platforms. Our goal as product designers was to ensure we are delivering consistent high-fidelity screens that are aligned with the bank’s vision of a modernized client experience.

PERSONAS

Who were we designing for?

Considering that CIBC is one of the top 5 big banks in Canada, the user base is a subset of almost the entire population. Users can be considered to fall under one of these 4 major categories that are differentiated by their basic needs.

• The affluent

• Students

• High potential starters

• Newcomers to Canada

To further understand our users we also wanted to look up their current behaviours. Data provided by the data analytics team suggests that 75% of clients hold 3 or fewer products. The 3 products tend to be chequing, credit, and a savings account.

DEFINE

Getting answers to our questions

One of the most important moments of this stage was gathering the analytics that helped drive our design decisions, specifically determining the overall hierarchy and priority of tasks on the home page. Since one of the pain points was an overabundance of links and lack of organization, we wanted to figure out how we can best organize the interface. We got answers to, “what tasks do users perform the most?” and used that to decide on the prominence of some call to action items. We called them the high valued tasks.
We reached out to the analytics team. The high valued tasks according to the data are as follows:

1. Bill Payments (Pay card)

2. Interac e-transfer (Send Money)

3. Transfer funds

These high valued tasks were accessed through the left navigation, which was also being reorganized and “cleaned up” in parallel to the home page redesign due to the low performance rating in the UX audit report.

UX EXPLORATIONS

What were we allowed to move around?

Before getting our hands dirty we needed to study the heavily populated site map first in order to get an idea of where can things actually go. Since the high value tasks are located in the left navigation, we knew we also wanted to surface them contextually in the account cards to make it easier for users to do “what they came here to do”.

Beyond that, there were numerous links that were exposed and duplicated on the homepage that needed restructuring. Basing our decisions off of the analytics helped us determine where some things can go and where some tasks can be hidden.

Since there were many links with a lack of hierarchy, the best way to go about this issue was to organize similar tasks into groups and remove the redundancy associated with having “quick links” thrown around on the screen.

Essentially, we were removing access to links that can be found elsewhere and which users did not click.

This step helped us determine the must have requirements for the home-page.

TESTING

What did users think of our explorations?

We decided to test out variations of our layouts to determine which one best fits our users’ preferences. Three designs were shortlisted after several feedback sessions with stakeholders. We turned those layouts into into high-fidelity prototypes by utilizing the draft designs for the native app as well as our brand guidelines and colours.

We categorized our screens into 3 categories which are as follows:
1. Side by side vertical account cards
2. Side by side horizontal account cards
3. Single row accounts.

We performed moderated testing internally with 15 CIBC clients in which we targeted the following questions to gather thoughts, feelings, and insights on how users interact with the interface:

• First impression, what stand outs?

• What information is important for them?

• What stands out the most in the product/account cards?

• What actions does the user think they can perform on the account cards?

• How do they identify the different account types

DESIGN REFINEMENT

We went back and refined the designs

After validating design decisions based off of the research we conducted, we went back in to refine the designs for delivery. We focused on the main constituents of the home page: account cards, right rail, and the left navigation. Other elements such as the Braze cards were also being designed in parallel by other members on the team. Our process involved a deep dive into defining typography styles, spacing rules, and hover states for the components.

For account cards, we chose the most favourable layout the users liked the most, the single row account layout, and refined that further following regular design and technical feedback sessions with the team.

The layout involved top to bottom card reading, minimized card art, exposed high value tasks, less scrolling, and a reorganization of the content. The contextual high value tasks are included in the account cards, along with a 3 dot menu to house further card-related actions that users often clicked on through the homepage.

Primary accounts are debit, credit and savings accounts. Secondary accounts are lending and investment accounts. To differentiate between the two, we treated the designs differently for visual hierarchy purposes.

Account cards and ghost accounts make up the primary section of the home page, taking up the greatest number of column space on the grid. The old design included lots of “extra” links and action items that ranked highly in the analytics report for user interactions. We decided the best way to go about including those items is to have a dynamic right rail that house those call to actions.

BUSINESS IMPACT

How did design impact business?

Post launch, analytics reported impressive findings based on our design decisions to improve the overall user experience. These results reflect the native experience since the website experience results are still TBD. Here are some major findings that are transferrable to the mobile view at minimum:

1. The “send money” button in the account cards has had an increase in engagement in each of the first 3 months after launching.

2. There were notable increases in card management tasks that are included in the 3-dot menu of the account cards. About 2M clicks on the 3 dot menu were recorded.

3. Left navigation interactions have significantly increased.

4. Ghost account cards for marketing have resulted in a digital sales increase of about 15% in the first 2 months after launching.

CHALLENGES AND LESSONS LEARNED

What did I learn in this process?

Due to the immense nature of this project, we were bound to run into some challenges that impacted our work.

Working within a large interdisciplinary team meant that our timelines are fixed and nonnegotiable. Asking for research to be conducted by another team or requesting the analytics team for data meant that we had to be patient before taking action.

In addition to time constraints, we ran into situations in which external events impacted our scope and technical landscape.
Economic conditions put a limit on how much this project was allocated resources. This meant we had to compromise our designs to suit a smaller resource scope for the time being. This led to thinking about “interim” solutions, such as the left navigation design.

On the brighter side, lessons were definitely learned on this large project. Nothing is ever perfect, and this initiative highlighted how significant it is to possess resiliency and the right attitude required to get valuable work done given the ever changing requirements. I was also reminded that no matter what, the definition of done is never final. There will always be that feeling of wanting to go back to “done” and refining it even further.