RBC iOS Redesign

A new standard for mobile banking

forbeslaura-rbc-app-headerforbeslaura-rbc-app-header

Deliverables
User Interface Design, iOS Design System

Role
Lead Designer • Playground Inc.

Year
2016

RBC Digital Solutions Group approached Playground Inc. in the summer of 2015 to redesign the user interface of the RBC iOS Banking App, and establish an internal iOS design language. The objective of the redesign was to modernize the RBC mobile brand and build an application that would meet the standards and expectations of iOS users, while also building a deep personal connection with customers. Over the course of three months we worked closely with their UX and engineering  teams to collaborate  on a new product design that reinvented the mobile banking experience for all RBC customers.

[unex_ce_button id="content_fpbsgwmcz,column_content_sq1bzakwe" button_text_color="#3366ff" button_font="light" button_font_size="15px" button_width="auto" button_alignment="left" button_text_spacing="1px" button_bg_color="" button_padding="10px 25px 10px 25px" button_border_width="1px" button_border_color="#3366ff" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#3366ff" button_border_hover_color="#3366ff" button_link="https://itunes.apple.com/ca/app/rbc-mobile/id407597290?mt=8" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]App Store[/ce_button]
rbc-app-mock-3rbc-app-mock-3

A mobile brand refresh

The simplified colour system used throughout the app carefully borrows and extends from the current RBC brand palette ensuring a recognizable touchstone for RBC users. New blue tones were derived from original RBC hues, adding a vibrant refresh to staple elements. With spot colors and identifiable treatments, we created a cohesive and legible hierarchy of actions. With the release of iOS 9 approaching, we decided to make San Francisco the app’s official font, it was also chosen for its onscreen legibility and increased characters per line in comparison to Helvetica or other RBC specified fonts. To reflect the clean typography and design, we created custom RBC iconography with modern line style icons on a grid system that would allow for consistency in appearance and placement.

Creating a unified system

The RBC team provided us with the user experience and core wireframes of the redesign. It was our job not only to design a modern and familiar user interface for the app, but create an internal iOS design system that was holistic, scalable, and had a comprehensive set of guidelines. The mobile design system carefully describes in detail grids, padding, sizing, colour, and typography of the apps core elements, patterns, interactions, styles, and screens. As we began designing elements and laying out screens we worked in collaboration with the RBC team to approve and define elements so their team could start referencing and building out the application.

More than a transactional experience

RBC is more than just a place to bank, it's a nurturing community helping customer's reach their financial goals. A main priority in this redesign was conveying more personality to the mobile banking experience. To achieve this we incorporated imagery on the login screen, home screen, and within account details to reinforce banking success and personality. The use of imagery additionally adds colour and warmth to the predominately cool toned app. Another way we added a sense of connection and humanization to the app was by incorporating small delightful interactions. The task completion checkmark is found throughout the app after a user pays a bill or completes a transfer. We wanted to make the experience of paying off a bill or completing a transfer feels rewarding and delightful in user's financial journey, by reflecting the experience people have when checking off a to do list.

Making 'Some Day' happen

Throughout the app a strong use of hierarchy, structure, and brand are reinforced helping achieve our goal of modernizing RBC banking on iOS and creating an experience that felt familiar, organized, and empowering.

semplice-rbc-testimonialssemplice-rbc-testimonials

Expect more from your banking app

January 7th, 2016 the iOS redesign of the RBC app launched in the app store. After months of hard work between Playground Inc. and the RBC DSG team, the beaming reviews started to pour in. It was such a pleasure and learning experience working with one of Canada's largest banks to make mobile banking feel clean, modern, and empowering.

semplice-rbc-testimonials-1semplice-rbc-testimonials-1

next project