My Role
I worked in a team of 3 designers to completely revamp the RBC Wallet from the ground up.
The RBC Wallet is RBC's secondary mobile banking app with around 300,000 users. It was first created in 2013 to make NFC Payments in iOS devices. However, this capability was shut down in 2014 and the Wallet's main purpose became obsolete.
The core strategy of Wallet shifted to being an innovation platform for new banking features that would then be incorporated into the main RBC Mobile Banking app.
Along with product managers, we prioritized features to include in the first release before creating the app's navigation structure and finally building a new design system.
Feature Prioritization
We worked with product managers to create an initial feature roadmap for Wallet (called Maestro at the time).
The process involved putting together a customer value proposition canvas in terms of gaps and opportunities, then creating and prioritizing solutions by value against effort required to implement.
We used data from RBC Mobile Banking to develop personas and identify their core needs. We then brainstormed on potential user journeys and features before prioritizing them.
The MVP roadmap was finally put together and included the features with the least effort and most value for the initial release.
Mapping the App
After deciding on the initial set of features, the next step was to map out these features from a navigational hierarchy perspective.
For this, we white-boarded to create groups of similar features and ran a few online user tests to get impressions from users on how they viewed relationships between features.
We arrived at having three primary sections of the app -
-
A dashboard for a quick view of the user's finances and activity.
-
An accounts section where the user could deep dive into their cards and transactions.
-
A payment module where the user could send or receive money.
User Flows & Wireframing
We used both software and whiteboards to concept out different ways of working through each user journey.
As we iterated, we tested little pieces on UserTesting.com to understand the usability level and breakdowns in the flow.
Design System
As this was an effort to completely revitalize the RBC app, we chose to refresh the branding and distance it from the RBC Mobile Banking ecosystem.
This decision was made with stakeholders in order to draw a more tech-savvy crowd that would accept a faster pace of innovation and change.
The design system was built up atomically across iOS and Android.
To create components from scratch, we first identified the common styles and interaction patterns used.
We then used these styles to create the basic building blocks of the app as Symbols in Sketch, and proceeded to develop patterns by nesting these symbols.
We settled on a fun, playful theme with a lot of vector images and bright colors. For the primary app palette color, we choose a gradient going from blue to yellow (RBC's main branding themes).
High Fidelity Mockups
Dashboard
The dashboard is the user's gateway into the app.
HERO SECTION
The hero section maintains the primary RBC colors to assure the user they are still within the RBC ecosystem, even if things look a little different.
The first thing the user sees is their overall balance summary as well as the amount they spent in the current month.
ACTIVITIES
The activities section maintains a list of notifications and messages since the MVP did not have push notification capabilities. These notifications also serve to inform the user about new features.
CARDS
The cards section maintains a list of the user's cards as well as their current balance on each for a quick summary of their current state.
SPEND TRACKER
The spend tracker (renamed from Budgeting to avoid conflicts with a different product) summarizes the user's monthly spend by category.
The dashboard shows the top 3 categories by spend, as these are the ones the user most likely cares about. Tapping on the Spend Tracker takes you to a more detailed view with all categories listed and the ability to change your budget amounts.
Bottom Navigation Bar
We used as bottom navigation bar as we had only a few top level sections, and it is more convenient to operate than a hamburger menu.
Accounts
The accounts section gives the user an overview of their cards and transaction history. On Android, it also allowed the user to make NFC payments from within the app.
The transaction list below the card is an infinite scroll. As we discovered that the sections above took up a lot of space when scrolling, we introduced an interaction to collapse and hide those elements as the user scrolls.
Transaction Details
Tapping on a transaction in the list gave the user a detailed breakdown of their transaction. This helped reduce cases of users not recognizing transactions due to merchant names being hard to recognize on a statement.
Apart from presenting details, the app also categorized every transaction to help the user classify their expenses.
At the end of the page was a section that informed the user how much they spent at a merchant on that given week or month.
Aside from presenting details, the app also categorized every transaction to help users classify and filter their expenses.
Transfer Money
This section allows the user to make peer to peer payments and groups.
The inspiration for this screen ranged from SquareCash to Splitwise to create an integrated peer payment and balances section.
The send and receive money flows were quite straightforward with only a few taps for the user to achieve their goal.
The groups feature allowed users to add a few of their friends to a common pool to collect money for a special occasion or event.
The user always has a record of their past transactions and groups to check through.
Send / Request Money
This was a heavily prioritized feature in Canada as P2P payments are usually funneled through a payment rails system called Interac, which many users complained was often a little difficult to use.
The user could also request money, at which point the recipient would receive an in-app notification as well as an email in case they did not have the app installed.
Groups
Payment groups were a fairly novel concept at the time in Canada. As a lot of Canadians at the time used pen and paper or simple to track group expenses, we wanted to phase in a feature that resembled a group payment tracker.
The first phase involved the user creating a group, adding some of their friends and an amount to it. Each contact in the group would get a request for their allotted share and could pay it back directly on the app or a webpage.
Spend Tracker
The spend tracker was developed as an early prototype of more advanced budgeting features being built at the time.
Users could view their spending across category and time.
For each category, the user could assign a fixed budget. Once they went over the allocated budget, the app would warn them in-app that they are over budget.
Onboarding
Last but not least, the app had been freshly redesigned with multiple new features so we created a simple onboarding flow for existing users to get familiar with the app.
I worked on the graphics for the onboarding as well as ensuring the vector art across the app was cohesive, followed the same palette and had the same visual style.
Conclusion
It was an incredible experience having the opportunity to design an app ground-up for one of the largest banks in Canada. The team and I grew a lot from our efforts in putting together the journeys and design system.
The app was received well on launch, with increased ratings and activity during my time at RBC.
Using these flows as a launching pad, the team continues to innovate on new and improved features for the RBC Wallet every day.