Project
RCI Design System
Role
Design System Lead
Period
2020–2021
Building a bridge between design and development — a production-ready, reusable design system powering multiple digital products.
Productivity & Quality
Increased across design and front-end
Cross-functional Workflow
Improved team collaboration and handoffs
Platform Support
Enabled multiple digital products and branches
Gallery
01
In the Beginning
How the RCI Design System started
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.
Surveying the Construction Site
I began by analyzing the Design Team’s tools, project types, and workflows. I connected with the Club Project's architects and front-end developers to learn about the tech stack they would be using. After surveying preferences and researching other design systems, I chose Bootstrap 4 as the foundation while drawing inspiration from Material and Carbon.
02
The Two Sides of the Gap
Design + Development alignment
When I first began presenting the Design System to stakeholders, most assumed it was just a fancy digital style guide. They were pleasantly surprised to learn it was a robust, production-ready code library that would scale across brands and platforms.
Project Scope
We structured the system into a global Core and separate Branding Branches so teams could reuse components across products while keeping brand-specific tokens and assets isolated. This supported a modular component strategy for React apps and an efficient Sketch library workflow for designers.
Design System Structure
Using Atomic Design principles, I created core components in Sketch and organized SCSS at a granular level to clearly separate global tokens from branch-specific overrides. That made it easier to extend, rebrand, and track changes.
Code Libraries & Guide Sites
The developer-facing side included SCSS token libraries and a React component library. I built a small "Guide Site" to validate styles and demonstrate how branches plugged into the core system.
03
Going Beyond the Bridge
Adoption, accessibility, and scale
I created tooling and documentation to streamline adoption: a WCAG-based color mixin, an accessibility checker, and clear guidelines for token management so the system could scale to multiple languages and brands.
Branching Example
Brand branches could swap tokens in real time to rebrand products without changing component code. This proved invaluable when the organization underwent a full rebrand mid-project.
Stakeholder Buy-In
I educated senior leadership, product owners, and project managers on the system's ROI — efficiency, consistency, and long-term cost-savings. Adoption across teams confirmed its value.
Enterprise Expansion
The RCI Design System expanded into the Travel + Leisure Design System and was adapted to power multiple brands on Adobe Experience Manager (AEM). I provided architecture and governance plans for ongoing maintenance and team structure.