Projects / RBC Mobile App

UX / UI · Product Design

RBC Mobile
Case Study

A usability-driven redesign of the RBC Mobile app's Running Balance feature

My Role

UX/UI Product Designer (Academic Case Study)

Tools

Figma, Figjam, Notion, Google Workspace

Deliverables

Heuristic Evaluation, Design Analysis, Low-Fidelity Wireframes, High-Fidelity Prototype, Usability Test Plan & Report

RBC Mobile App redesign overview

Overview

Project Overview

This project is a university case study completed as part of my academic work.

RBC Mobile is one of Canada's most widely used banking apps.

Users rely on the Transactions page to understand how their balance changes, but the original design presents only one static balance at the top.

01 — Empathize

Understanding the Users

For this case study, I focused on everyday mobile banking users between the ages of 18 and 60.

Most of these users rely on the Transactions page to confirm purchases.

Key Pain Points

01

No visibility into balance changes

02

High cognitive effort

03

Difficulty verifying account activity

04

Misalignment with real-world expectations

05

Higher risk of errors

Heuristic Evaluation

  • Visibility of system status
  • Recognition over recall
  • Error prevention
  • Match between system and real world
  • Flexibility and efficiency of use

Persona — The Everyday Spender

G

Gabriel, 29

Everyday Spender

Gabriel is a young professional who uses mobile banking several times a week.

Task Flow — Before Redesign

Task flow before redesign

Research Insights

Across user research, heuristic evaluation, and analysis of the original task flow, a clear pattern emerged.

02 — Define

Defining the User Needs

Problem Statement restated with focus on solution.

03 — Ideate

Designing the Solution

Task Flow — After Redesign

Task flow after redesign

Low-Fidelity Concepts

RBC low fidelity wireframes

First High-Fidelity Prototype

RBC high fidelity prototype V1
View in Figma →
Transaction list used half the screen height Typography too small Excessive scrolling required Running balance area felt cramped

04 — Test

Usability Testing

High-Fidelity Prototype V2 — Final

RBC high fidelity prototype V2 final
View in Figma →
Increased transaction list height Enlarged typography Red/green colour coding Dark blue daily balance Maintained RBC's minimal style

Method & Participants

The study followed a formative, moderated testing method.

Sessions were run in a quiet space over Zoom.

Each test lasted around 15–20 minutes.

Tasks

  1. Navigate from home to Chequing account
  2. Turn Running Balance toggle on
  3. Scroll through transactions
  4. Turn toggle off and compare
  5. Identify running balance after specific transaction

Key Findings

Users easily found the Running Balance toggle

The taller transaction list and larger typography improved readability

The color coding helped users quickly interpret financial changes

Participants liked having the option to switch between simple and detailed views

The V2 design was consistently preferred

Overall, V2 felt clearer, more logical, and more similar to real banking app behavior

Design Tweaks After Testing

Increased spacing under section headers
Enhanced contrast for running balance numbers
Added slightly more padding in transaction rows
Improved alignment for a cleaner, more consistent RBC-style layout

Conclusion

Outcome

This project focused on improving the clarity and usability of the Running Balance feature. The final design reduces cognitive load, improves readability.

All Projects Next: StageUP Mobile App