Reimagine UX — Ninet Moon

Royal Bank of Canada

Showcase RBC digital UX in ads

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.

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

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