Apparicio

Head of product design

Apparicio

2017

2019

Design Systems Lead @ Rolls-Royce

A design system to scale one of the world's most precise brands.

Building the source of truth that let Rolls-Royce design consistently, inside and out, alongside a full Pentagram rebrand.

My role

Design Systems Lead

Timeline

2017 → 2019

Team Composition

Agency team at Investis Digital, working with Pentagram and the Rolls-Royce digital team.

LINK

rolls-royce.com

One of the world's largest manufacturers of aero engines and power systems, with customers across more than 100 countries. Its digital estate speaks to airlines, navies, governments and energy operators at the same time, each with different technical needs and a different relationship to the brand.

If you only read one part

The brief was a design system. 1,152 components to take Rolls-Royce from eight years of heritage files to a single standard, built so that people who weren't designers could keep using it. That part worked, and the live site still runs on it years later.

But the decision that mattered most wasn't in the brief. Using pink as the interaction colour and rethinking the imagery tripled applications from women to STEM roles.

The problem

New brand guidelines were coming and the digital products had nowhere stable to put them. The existing design was scattered and fragile:

Files spread across Google folders, with no source of truth.

Heritage components going back eight years or more.

Accessibility issues across the existing pages.

A launch deadline, with a migration to Sketch happening at the same time.

Every page of the website in its own Photoshop file.

Three distinct, inconsistent usages of the brand.

A brand refresh that wasn't finished yet.

The real challenge wasn't drawing screens. It was bringing order to a large organisation with many points of contact, while the brand itself was still moving underneath us.

The goal

Three things, agreed with the business and with Pentagram before a single component was drawn.

01.

One library, two audiences

Design a system that both internal teams and external partners could build from.

02.

Land the Pentagram rebrand

Implement the refresh across the digital products while the brand work was still in progress.

03.

Move the design language forward

Use hints of pink to position Rolls-Royce as a pioneer, not just a heritage name.

What I did

Built the library in Sketch, designed to be used by non-designers.

Internal Rolls-Royce employees would be creating new pages after launch, so the system had to be genuinely easy to pick up, not just technically correct. I built it atomically: reusable symbols, text styles that held up across every platform, and components designed for flexibility as needs changed. Easy to use was a design requirement, not an afterthought.

Designed micro-interactions to make the brand feel forward-thinking.

The rebrand positioned Rolls-Royce as pioneering, so the digital experience needed to feel that way too. I designed micro-interactions grounded in Steve Krug's design attributes, adding the memorable and delightful qualities that signal a company looking forward, not back.

Documented it so it could hold without me.

Documentation lived as a shared document plus snippets inside Sketch, so anyone could see how to apply the system consistently and where the boundaries were.

Co-created a UX bootcamp to help the organisation value design.

Working with the design leads, content designers and researchers, I co-created a 50-minute UX bootcamp for new joiners. It did more than onboard people. It helped other parts of the business understand what design was for, and why it was worth the investment.

The system, at scale

1,152 components. A library build in Photoshop first then moved to Sketch. Each component done 4 times for breakpoints.

The outcome

3x

increase in women applying to STEM roles at Rolls-Royce, after a deliberate design decision.

67%

increase in user interaction after launch

The work shifted who saw themselves at Rolls-Royce. The engineering department had long been read as masculine, and one of my design decisions pushed against that directly: using pink as the interaction colour and rethinking the imagery across the experience. After launch, applications from women to STEM roles went up threefold.

The system also lasted. Years after I left, the live website still runs on the design I built, which tells you two things: it held up, and the company kept it as their standard rather than replacing it. Longevity at that scale is its own result.

Underneath both, Rolls-Royce came out of it with a single source of truth. One documented system that internal teams and external partners could all build from without breaking the brand.

In retrospect

Consistency and scale are hard with a brand this size, because there are so many points of contact, internal and external. It's possible, but only if the documentation and file structure are deliberately designed for it.

The bigger lesson was about articulation. Large organisations need more design communication to make things happen, and I learned that daily with Rolls-Royce's stakeholders. If I did it again I'd change the tools, Figma instead of Sketch so non-designers could pick it up faster, and a more shareable, readable home for the documentation.

NEXT CASE