RCI Design System

Building a Bridge between Design and Development.

Results:

Increased Productivity and Quality of Design and Front-end Development.
Introduced an improved cross-functional team workflow that significantly increased productivity.
Supported the creation of multiple digital platforms.

Chapter one

In the Beginning

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 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. For some UI elements, the design team referenced Google’s Material Design System and IBM’s Carbon Design System."

Chapter two

The Two Sides of the Gap

When I first began presenting the Design System to stakeholders, most assumed it was just going to be a fancy digital style guide they would reference on InVision. They were pleasantly surprised to learn that it was a robust, production-ready code library.

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.

I structured the Design System into two parts, a global Core and Branding Branches. This allowed both designers and developers to jump from one digital product to another without having to re-learn how it works. Additionally, this supported the modular \"component\" strategy used in building React applications.

This strategy allowed for infinite branches, but kept all of them consistent.

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.

Design Libraries

These are examples of the different Design Libraries made within Sketch and version controlled on Abstract. The UX/UI and Brand teams used my template to create these brand styled libraries for each digital product. I trained the incredible team members on the UX/UI team, and they had a very active role in helping me create these Libraries and documentation.

Design System Code Structure

I organized the SCSS code structure at a very granular level. This allowed me to clearly define what was global and what should be local to a branch. Separating out the appropriate pieces made it easier to extend and override those parts and keep track of the changes.

This is a top-level overview of my plans. Each block has been expanded on further.

Code Libraries

The Developer side of the Design System consisted of Code Libraries. One for the SCSS files that would match the Design Libraries and a Component Library. I created a simple React App and called it the "Guide Site". I used this site as both a reference and a way to validate the style code. Each Branch would have its own Guide Site.

You may have noticed the loud neon colors I used on the Framework for both the Design and Code Libraries. This made it much easier to identify when a variable was not set. Pretty soon everyone became aware and jokingly dubbed #FF00FF as my favorite color.

Support Systems

I created tools within the Design System to streamline and standardize our UI. I created a scss mixin that uses the WCAG color contrast formula to generate the additional states of an element automatically. I also created this Accessibility Checker page so we could see how the branding holds up at a bird's-eye view for all of our elements. Since the Design System was so modular, it was easy to extend support for multiple languages as well.

Branching Example

Here you can see how both sides of the Design System work. We updated the tokens that would cascade down into the elements and components and even into our icons. As it is in the Design Library, so it is in the Code Library - and vice versa.

Real-time Test, Rebrand!

As I was building the Design System and working on other design projects to create the new site, we were challenged by a complete re-branding in the middle of the project! Fortunately, the Design System was in place, and it was a breeze to change the look and feel.

This was the best proof-of-concept for the System and everyone became certain of its scalability and value to our workflows.

Chapter three

Going Beyond the Bridge

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. While I had complete ownership of it, I want to acknowledge the incredible collaborative contributions all my colleagues provided. The Design System was a success because everyone understood, agreed, and used it as intended, and I am extremely grateful.

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. I provided an enhanced Design System Architecture and plans for creating and managing teams to maintain it.