Travel / Hospitality

RCI

Design System

Delivered a documented, adoption-ready design system that unified UI across markets and accelerated component delivery for global teams.

Design Systems Lead • 2018–2020

Measurable Impact & Results

"The true measure of success is the tangible, measurable outcome. Our goal was not just to build a website, but to solve this core business problem."

The Challenge

RCI's global platform spanned multiple markets and languages with no unified design foundation, leading to inconsistent UI, duplicated effort, and slow front-end delivery.

The Solution

Built a scalable design system using Bootstrap 4 as a foundation, extended with custom SCSS tokens, component documentation, and a governance model for multi-team adoption across English, Japanese, and other locales.

Service Scope

Design Systems
Front-End Architecture / Development
SCSS Token Architecture
Internationalization (i18n)

Section 01

In the Beginning

Chapter one

“I joined the RCI UX/UI Team in order to build a Design System for them as part of a larger digital transformation project. It was initially intended to be a design tool and style guide, but I proposed taking it further. Fortunately for me, my leadership provided incredible support and opportunity for me to craft and bring my vision into reality.”
Designer

Surveying the Construction Site

I first began by analyzing the Design Team's tools, project types, and workflows. I then connected with the Club Project's architects and front-end developers to learn about the tech stack they would be using to build what we designed. After surveying the preferences of the dev team and researching many incredible design systems, I opted to use Bootstrap 4 as the base of my new Design System. It was familiar to most developers and gave me a great foundation to work from.

Section 02

The Two Sides of the Gap

Chapter two

“If I have seen further it is by standing on the shoulders of Giants.”
Isaac Newton

Project Scope

Once I had a firm grasp on what tools everyone would be using, I worked with the business to strategize how and where the Design System would be used. We wanted the system to be reusable across multiple digital products and allow for unique branding. So, I established a framework and universal naming convention.

Design System Design Structure

I used the principles of Atomic Design to create the Core components within Sketch. I then created the workflow process to leverage Sketch Libraries at the different levels.

Section 03

Going Beyond the Bridge

Chapter three

“While creating the Design System, I was able to provide a framework for best practices that all teams were able to leverage in the Project lifecycle. I encouraged everyone to contribute to the maturation of the Design System with their needs and expertise.”
Designer

Stakeholder Buy-In

In addition to Design and Development teams adopting and using the Design System, I had to convince and educate Senior Leadership, Product Owners, and Project Managers on the merits of including the Design System as part of their standard workflow. I showed them how much more efficient, consistent, and cost-saving it was.

AEM Enterprise Expansion

As the organization changed, the RCI Design System grew to become the new Travel + Leisure Design System. It will now power the digital products of many global brands on a new Adobe Experience Manager (AEM) platform.

RCI