RBC App

Project Overview

Recently I found myself discussing personal finance and investing with a friend. To illustrate something she was explaining, my friend pulled out her phone and showed me some information displayed on her RBC Direct Investing app. I was astonished at how outdated and poorly designed the app was. The design appeared to be about 10 years old, with poor usage of colours and fonts, and my friend also reported that the user experience was cumbersome and frustrating. This was a great opportunity to reimagine the app from both a UI and UX perspective.

Role

UI Designer

UX Designer

Tools

Adobe XD

The Problem

  • The current app has an outdated design that is not appealing to the eye. The colour palette is dull and evokes feelings of boredom. There are also design inconsistencies within the app.
  • The buttons and icons look and feel ‘last gen’ and are reminiscent of the early versions of iOS.
  • Key information is not being displayed prominently – equal prominence is given to a variety of actions that are not of equal importance to the user.
  • On the ‘My Portfolio’ section – an important section of the app – information is difficult to read and make sense of due to poor layout and colours.
  • It is difficult to navigate the app to complete fundamental tasks such as balance checking, stock lookup, and stock purchase

The Goal

  • Redesign the app with a modern look and feel with updated colours, fonts, icons, and layout.
  • Improve the user experience so the user is able to easily complete the most common tasks – checking account balances, searching for stock prices, and purchasing and trading stocks.

Current Design

Below are a few screens of the current RBC Direct Investing app to illustrate the problems laid out above. Dollar amounts and account information have been hidden or altered for privacy purposes.

Login and Initial Screen

These screenshots show the inconsistency between the sign in screen and the rest of the app. This abrupt shift in design from one screen to the next is off-putting to the user.

Portfolio and Trade

The information displayed on ‘My Portfolios’ is overwhelming and confusing to the eye due to the layout and poor use of font sizes. Further, the ‘Trade’ screen again appears to have a design that is inconsistent with the rest of the app and the process of trading a stock is confusing due to the poor layout and user flow

Holdings and Quote Search

These screens again demonstrate improper use of fonts and layout. The stock listing page is particularly overwhelming with action buttons like ‘Trade’ and the stock chart being much too small. Much of the text also gets lost on the screen due to the gray background colour.

New Design

Below are screens of the refreshed and updated design, complete with a new colour palette, fonts, icons, and screen layouts.

Login and Initial Screen

The design aesthetic is now seamless from sign in screen to the app itself. Upon signing into the app the user is presented with a prominent overview of their account balance and investment holdings. Holdings are also displayed in an easy to read pie chart. Holdings and account balances are now integrated on the main screen and can be toggled between using the tab functionality. 

Holdings and Quote Search

A user’s stock holding details are now displayed with a vibrant graph showing the stock’s trend for the day. Searching for a stock displays a similar screen with relevant, easily discernible details. Both feature a bold ‘Trade’ button for buying/selling.

Trade and Order Summary

Purchasing a stock can be a significant investment and therefore purchase details need to be made absolutely clear to the buyer. These refreshed screens layout the details of a stock purchase with minimal distraction and clear use of fonts and space.

Activity and Navigation

Past account activity is presented clearly with optimal use of space. The original app lacked simple navigation functionality, the new nav menu improves the user experience with easy access to the most important parts of the app.

UI Design

Typeface and Colours

The typeface chosen for the refreshed RBC app is ‘Roboto’ with font sizes ranging from 12pt to 36pt. Roboto works well for displaying data as well as body copy due to it’s clear legibility.

 

The blues chosen maintain a clear brand identity but sharper reds and greens indicate gains and losses and allow such information to be picked up on at a glance. Soft gradients are also used for graphs on stock details pages.

Conclusion

This was a fun and challenging design exercise that outlines the importance of maintaining brand identity when redesigning an app. It also emphasizes the importance of not creating too radical of a design change when updating an app that has a very large user base. This exercise was a great opportunity to learn more about font hierarchies, displaying data effectively, and simplifying mobile layouts.