DESIGN SYSTEM          UX         INTERACTION

Rolls-Royce powering their digital communications

The project aimed to create a scalable and consistency digital language, during their brand refresh and tone of voice updates

The project aimed to create a scalable and consistency digital language, during their brand refresh and tone of voice updates

003-MacBook-Space-Gray

Project overview

What the expectations to accomplish.

Rolls-Royce is an FTSE100 company had a brand refresh were they added a new tone of voice, new brand colours and new imagery, adding value to their digital presence.

Rolls-Royce pioneers cutting-edge technologies that deliver the cleanest, safest and most competitive solutions to meet our planet’s vital power needs. Throughout their history, they have set out to achieve extraordinary goals. This quest has taken them from founding expertise in internal combustion engines to provide the world’s most powerful and efficient aero-engines.

Goals

What I was expecting to accomplish.

Digital brand refresh

In partnership with Pentagram, an upgrade was made on their brand guidelines, affecting their digital status. My task was to test and validate the brand refresh.

Design system

Since I joined the account, all files were in separate PSDs, witch was confusing and hard to build new pages. My task: rebuild this module library in Sketch based in Atomic Design System. 

Consistency

Using Sketch I have designed a file management structure where we had a Master file holding all modules and brand guidelines, and template linked files to create new pages.

The problem

And why it's relevant.

And why it's relevant.

Their current file structure was in large PSDs and based in templates instead of modules. The brand refresh had accessibilities problems in their digital usage.

All of this combined with Rolls-Royce history and heritage live website pages, containing 3 different designs created in different stages. 

04

The solution

It's time to get real.

Several workshops testing the brand refresh in the digital state, modules redesign to create a cleaner and consistent language.

Research is where all started, seeking competitors' digital designs and looking internally as well, what was working and what was not working on their actual website. The ideation phase took place with colours testing and pages designs refresh.  Prototypes validated with users and stakeholders. The design system structure started to take place in Sketch with the largest file I ever did. We have then achieved a new look and feel using hints of pink and shades of blue, approaching a bold use of their brand, showing how Rolls-Royce pioneer the digital environment.

The-Sceens—Mobile-Perspective-Mockup-3—by-Tranmautritam

Design system

Scalability and consistency.

68

modules

modules

108

text styles

252+

symbols

Text Styles – Left aligned
v

What I've learned?

Reflecting back on the project.

It's hard to achieve consistency and scalability with these massive brands, but it's possible if the correct documentation and file structure is designed.

Stakeholders can trust you as a designer if you really know how to rationale your ideas and validate with users. Something I could do differently nowadays probably is the use of Abstract as a versioning tool. And something I learned so much from, documentation of design and interaction, this can help not just new designers joining the account but the development team.

Other projects

© Copyright 2018. Apparicio Junior - UX/UI Designer
© Copyright 2018. All Rights Reserved.