Royal Bank of Canada
Reimagine UX: showcase RBC mobile app in ads.
Overview
RBC wanted to build a new simplified digital design system that could demonstrate the digital banking experience in advertisements.
Before, they were using screenshots from phones and desktops and placed them directly on TV spots, print ads, and digital banners. This was not effective due to illegibility and long interaction time.
Role
User Interface Design, User Experience Design
One system, thousands of usage.
The RBC design system is being utilized across all advertising media, including TV, prints, in-store display screens, and digital banners.
![Transit 0666 - Montreal Road - 109663 - I (1)[39].jpeg](https://images.squarespace-cdn.com/content/v1/6165b4f36f357c71769b544c/da8c4136-1ef8-45c7-87ed-c3c88f26dd4b/Transit+0666+-+Montreal+Road+-+109663+-+I+%281%29%5B39%5D.jpeg)
Brief
Redesigning 27 different features under 1 system.
I was tasked with redesigning and consolidating 27 different RBC features across the RBC mobile app and website. The redesign involved simplifying components and interactions so they were more suitable for advertisements.
Challenge & Approach
Redesigning an entire digital UI/UX and creating a working file system for print, digital, and motion designers was not an easy task. Below are the significant challenges and the design solutions I provided.
Challenge 1
Animation in under 3 seconds.
The shortest video ad is 6 seconds. Each feature interaction had to be animated in under 3 seconds so there was still time to tell the ad narrative.
Challenge 2
Usable across TV, Print, and Digital.
Each feature had to work in both static and animated formats as they would be used across video, digital banners, and prints. The working files had to cater to creatives in different sectors including motion designers, video editors, and print producers.
Approach 1
Show what it does, not how it works.
I placed more focus on showing the core of the feature, rather than accurately reflecting how it functions. For example, I removed all the unnecessary elements that were extraneous to the core of the feature, such as the search bar, logo, and description. Those elements are important in actual usage, but not in a print ad.
Existing mobile experience (Before)
Redesigned for ads
Approach 2
Systemize components with simple instructions.
For video editors and print producers, it’s vital to understand the instruction quickly as the turnarounds for ad production tend to be very limited. We developed templates so they could be used right away without having to read the long brand guideline.
Tendril
Animation Studio
Ellen Miller
Account Manager
Ramona Gornik-Lee
Executive Producer, Tendril
Liz Crofton
Executive Director, Production
David Greisman
Director, Business
Gabriel Rocha
Motion Designer, Tendril