Redefining

a

bank

experience

View Project
Let's
Connect
The login screen for the RBC One portal

01 // Overview

Reimagining the RBC One Platform

During my time as a product designer at Royal Bank of Canada (RBC) I was given a hypothetical question of what the Investor Services platform, RBC One, would look like with a blue sky approach. This provided me with an interesting challenge as I had full creative control over improving an entire portal’s experience used by thousands of high net-worth clients.

Within 1 month I independently interviewed subject matter experts for the platform, performed a competitor analysis, conducted an internal audit, designed low-fidelity concepts, high-fidelity mockups, and created an animation concept. Half a year later, I spent another month building out other high-fidelity mockups for new sections of the portal.

02 // Background

Tools

Figma
After Effects

Role

UX/UI Designer

Timeline

Phase 1  //  1 month (August 2022)
Phase 2  //  Ongoing (February 2023 - Present)

Team

3 Directors

03 // Problem

How might we enhance the user experience and aesthetics of RBC One to better support its high net-worth clients?

In the summer of 2022, RBC Investor Services (RBC IS) was facing drastic changes having lost one of its biggest Canadian clients and selling off its overseas counterparts to focus on strengthening its Canadian market. As part of this shift in focus, I was asked to reimagine what the experience would be like for the clients interacting with the tool by enhancing the user experience and aesthetics. The goal was to pitch these concepts to C-Suite executives to get funding for an updated platform.

RBC One is a platform servicing thousands of high net-worth clients that provides information regarding portfolios, trade settlements, financial and operational information, as well as other tools supporting their business needs. Despite the weight that this platform has in supporting its high net-worth clients, it has not seen any significant changes to its design in a decade, and such has fallen in standards from an aesthetic perspective. As well, the platform is plagued with usability and accessibility issues from features that were not fully developed or were overlooked.

04 // User Research

What are a user’s goals when using RBC One?

Before diving into the redesign I needed to understand what the goals and challenges were for the users interacting with RBC One. Unfortunately, I wasn’t able to reach out to clients directly, so I did the next best thing and connected with subject matter experts and client representatives through informal interviews to understand what the goals are of the users for the homepage and the platform as a whole.

An icon of a finger making a touching action

Goal // 01

Minimal touchpoints

RBC One needs to reliably and quickly provide access to information to support a user’s day-to-day operations.

An icon of a magnifying glass examining a line graph

Goal // 02

Information needs to be tailored

RBC One offers diverse services and therefore must cater to different personas using it by providing relevant key performance indicators.

05 // Existing Platform Audit

What are the shortcomings in RBC One’s current state?

After the informal interviews and getting an understanding of how users interact with RBC One, I took a closer look at the platform and organized my findings in terms of UX and UI issues.

The existing login screen and home page of RBC One
An icon of a bug

Issue // 01

Outdated UI and Visual Bugs

These issues undermine the credibility of the platform and could easily turn off new potential clients when given a demo of the portal.

An icon of diverting paths

Issue // 02

Navigation Issues

Due to the limited capacity in the horizontal navigation, any new links are placed in a “More” tab, making it difficult for visibility.

An icon of a gear with a warning

Issue // 03

Lack of Personalization

Despite the platform being used by a variety of different users with different goals, the experience being provided is the same.

Type

Issue

Description

UI
General outdated aesthetic
Some components have not been updated since AngularJS launched, which was 12 years ago
UI
Content bleeds out of cards
This primarily occurs with tables, where the number of records is too large, so they exit the card and cover data located on other cards
UI
Double scroll bar
Depending on where the user’s cursor is, if they scroll in the wrong segment, the content will not scroll
UI
Spacing and margins are inconsistent between cards
Due to the way the “dynamic” homepage is set up, some components lack consistent spacing and margins
UI
Inconsistent iconography, typography, and colours
As different sections of the portal were built at different times, the overall experience is disjointed and inconsistent
UX
Accessibility Issues
The component library used didn’t meet Accessibility for Ontarians with Disabilities Act standards as this platform was built prior to 2021 when accessibility was not mandatory
UX
Long login timing and lack of visual feedback
Performance time for logging into RBC One takes around 1 minute. There are no indications of any loading occurring, leaving the user guessing as to what is happening
UX
Crowded Navigation Bar
Due to the amount of options available, new items in the information architecture are being placed into a “More” category reducing visibility
UX
Homepage lacks purpose
Incredibly small widget library which only covers a few core key performance indicators and forces a user to navigate through different pages to gather required information as not all relevant metrics are accessible. Does not provide a view the user actually cares about and is instead just an intermediate page a user needs to travel from, rather than being a page that adds value
UX
“Customizable” homepage lacks the ability to be customized
No flexibility in rearranging widgets to suit a user’s needs as widgets live in a rail system. Each widget has a predefined location making for awkward arrangements
UX
Different homepages for different users
For some clients, they are given a completely different home page, making the overall experience disjointed
UX
Poorly executed widget library
No descriptions are provided for what widgets are or their purpose in the library tab. A limited widget library also means the same experience is being provided to all users despite how different the needs are for all the personas interacting with the platform

06 // Competitor Analysis

How does RBC One compare against the competition?

Another key activity I undertook was connecting with people who had access to competitor custodian portals and assessing the strengths and weaknesses of each of them based on a standardized grading system. This would allow me to determine what gaps our portal faced from a UX/UI perspective. The best elements would later be used to drive the initial concepts.

A matrix showing how competitors compare to RBC One

07 // Gaps & Opportunities

What are the opportunities for making RBC One better for our users?

Based on all the information gathered from the subject matter experts, the portal audit, and competitor analysis, I determined what gaps the RBC One portal faced, and what opportunities there were to remedy these pain points.

An icon of an "X"

GAP // A

Inadequate widgets

Incredibly small widget library with lack of visualizations to allow for informed decisions by the users.

An icon of squares with a plus

Opportunity // A

Comprehensive widgets

Provide all critical pages users need information for and create widgets for those pages, with an emphasis on visualizations for ease of use. For niche cases, let users create custom widgets.

An icon of the number "1"

GAP // B

One-size-fits-all approach

The current dashboard provides the same experience for all users, and lacks the ability to be customized to a user’s needs as widgets cannot be rearranged.

An icon of selection sliders

Opportunity // B

Provide a tailored experience

Conduct UX research for all personas and determine what information is relevant for their experience. Allow for a user to modify the position and size of each widget.

An icon of a person's head with a question mark

GAP // C

Too much customizability leads to cognitive overload

Providing users unrestricted control over customization can create an overwhelming and a less inclusive experience, particularly for non-tech-savvy individuals or those who are uncertain about what information is relevant to them.

An icon of a person with a gear

Opportunity // C

Focus on personalization over customization

Focus on personalization over customization. Provide an onboarding experience to allow for the user to select a persona relevant to them and provide them a prebuilt dashboard that fits their needs.

08 // Medium Fidelity Wireframes

Getting the ideas flowing

I periodically met with the directors to show my progress and get their input to ensure we were heading into the right direction. The mockups below are some of the early iterations and are not reflective of the final result, as the designs are not public.

Concept of vertical navigation

Navigation

One of the big changes that needed to be made was transforming the horizontal navigation bar into a vertical one. The platform’s information architecture contained many links and this would allow for every page to be visible as opposed to the current state with new links being nested in a “More” tab, especially since new tools and features are being added to clients frequently.

Login screen

For this experience, I decided to keep it faithful to the current version, but provided a general facelift. The only major change I wanted to integrate was allowing for marketing materials or updates to be present to the user prior to logging into the page as well as the addition of a loading animation when the user logs in to eliminate any ambiguity.

A concept of the login screen
A concept of various widget styles

Data visualizations

One thing which was lacking in the current home screen dashboard was actionable key performance indicators that provide information in a meaningful and digestible format. I needed to showcase layout concepts that took dashboarding best practices into consideration such as the importance of information hierarchy.

Onboarding

Providing an onboarding experience when a user first logs into the platform would circumvent the identified gaps, as pre-built dashboards could be built out for each persona. In case a user accidentally makes an incorrect selection or wants to change their persona later, there would be the option to do so when creating a new dashboard.

A concept of an onboarding experience
A concept of widget selection

Modify widgets

Allowing users to reposition widgets was necessary for users who wanted a custom view. As well, having a widget library with descriptions provides context for the widget’s purpose. For more advanced users that need a specific view or metric, having the ability to customize a widget is made available to the user. Giving them a step-by-step guide through this process provides the flexibility of control, while also reducing the cognitive load.

09 // Final Experience

RBC One, reimagined

Putting all the previous work together, I worked through the mockups and iterated on the designs with feedback from the business team to create a reimagined RBC One portal home screen, onboarding experience, as well as an animation concept.

As these screens aren't public facing I can't show the final work that was done, except the login screen.

The redesigned login screen for RBC One

10 // Phase 2

Reimagining the experience for the rest of the portal

Months following the positive reception of the initial concepts with C-Suite executives, the business team had developed a sitemap for the new portal as well as the specific features that would be required for a user on these pages. I was asked to perform the same task on other critical screens. This portion of the project focused less on UX research and more on “marketing,” as the primary goal was to spark conversations with the various product owners for the different segments within the RBC One platform on what the future could look like.

Eventually this led to the development of several features, utilizing my new design language. As these screens aren't public facing I can't show the final work that was done except for the phase 1 of the login page that is now live! The rollout for phase 2 will update the components to the latest version of Angular.

11 // Reflection

Outcome & lessons learned

Due to the weight of the project, my redesign was exposed to many different people including RBC IS’ CEO. The redesign was given the green light to begin development at the start of 2023 and is currently underway.

An icon of a magnifying glass

Lesson // 01

Great designs are backed by research

As I was given no requirements, what could have been an overwhelming task was simplified by understanding the users and the problem space from interviews with subject matter experts, internal users, and assessing competitor portals.

An icon of a movie clapboard

Lesson // 02

The power of animations

“If a picture is worth a thousand words, a video is worth a million.” It was easier for people to envision what the future of the portal would look like through an animation.

An icon of a microphone

Lesson // 03

Value of pitching

Communication was key when selling the redesign to C-Suite executives as I needed to explain how user experience and aesthetics create business value.