CIBC (Canadian International Bank of Commerce)

UX Analyst

2016 - 2017, Toronto

I worked at CIBC for 14 months as a UX analyst, where I designed internal programs and semi-client facing programs for thousands of employees across Canada. The aim was always to increase employee satisfied and efficiency, thereby making both the user experience and client experience better. After all, the quicker and easier the interaction between financial adviser and client, the more comfortable the client feels, and the higher conversion rates for the financial adviser.

Working at CIBC meant working on very large budgeted projects (upwards of $10 million), with very long timelines (upwards of 7 years), among very large project teams (upwards of 50 people).

One such project I was involved in related to software used by financial advisers to open financial products for clients (credit cards, loans, etc.). Given that the project timeline spanned multiple years and tens of project teams with little overlap, the software was typically upgraded piecemeal without proper communication between development teams. As one would expect, this resulted in quite a few gaps in the user experience.

Looking at the screenshot above, it’s not immediately apparent which elements are navigational (spoiler: it’s the stuff that’s not blurred). It’s relatively easy to identify what step of the flow you’re currently on, but to identify where you are in the whole flow is difficult. You might expect the financial adviser to be familiar enough with the flow for this to be a small issue, but the reality is that the flow changes depending on many factors, ranging from client properties to type of product being originated. This is compounded by the fact that high turnover for financial advisers means that users have a high on-ramp time and typically lack complete knowledge of the software.

The navigational elements are split into 3. Above, they are labelled in order of hierarchy. The macro view [1], the micro view [2], and the "Navigator" [3]. Which elements are clickable?

This is not necessarily reflected in the left-navigation pane, where steps will often be skipped automatically, or the financial adviser will be forced to go backwards before proceeding. Users surveyed during user testing were often unable to predict the behavior of the software (e.g. not knowing where the software would take them next, not knowing when they would have to go backwards). They had trouble identifying how much freedom they had, often not knowing which elements could be clicked on. They also didn’t know what the mysterious “Navigator” button was for. The name might imply that its purpose is to aid the user in navigation, but in reality, the purpose it serves is to act as a “drawer” for steps that don’t fit into the traditional flow.

In my design concept, I leveraged a common metaphor most people can understand: a subway stop map. Under the new design, all steps in all stages of the flow can be seen freely. The status of the steps is also clearly shown, providing users with at-a-glance indication of whether a step is complete, needs action before proceeding to next stage, or will be skipped over. By using a common design metaphor, I also aimed to reduce on-ramp time for new employees by creating an intuitive interface.