Role
Lead Designer
Royal Caribbean
Case Study
Royal Design System
Timeline
4 months
I led this project which aimed to move the Design System out of design libraries and into a browseable and accessible website. Our aim was to create a robust internal resource to support over 50 designers and hundreds of developers and product teams.
The Importance of Systems
Royal Caribbean is the largest cruise line in the world. With about 6 million cruisers annually, and almost 80K employees and crew members, the products that support and enhance those people's experiences are really important. Design systems are a key piece in making sure design consistency can be maintained at scale.
While working at Royal Caribbean, I worked on the Design Systems team, which is an internal team. Our goals were to set and maintain design standards and consistency across multiple products. We did this though creating and maintaining design libraries in Sketch, publishing component documentation, tracking and auditing new patterns, and performing extensive Design QA. Our work helped support the 50 or so designers on the team, who were consistently designing and shipping new features.
The problem
One of the pain points we noticed from both designers and developers was that there was no easy way to reference some of the basic components and elements of the Design System, like colors and typography.
I took the lead on designing this website which aimed to be an internal resource for anyone who needed access to our elements and basic components. This project was meaningful because it was really the beginning of the process or creating a custom design systems website.
UX Audit
I began this project by auditing other design systems. I spent hours studying how other companies were designing their systems websites to make them clear and easy to use. As a next step, I created an Information Architecture map to document how we would lay out the site. This helped us organize the different pages and see how everything would be easily browseable.
White boarding
My team and I did a white boarding and brainstorming session to finalize the scope of the MVP of the systems website.
We decided it would initially focus on the basic elements such as typography, colors, iconography, and spacing. We also wanted to include our basic components such as buttons, form fields, notifications and many more.
Testing UI Styles
To kick off the high fidelity designs, I started with a design exploration. I ended up designing out the two different ideas I had. The first option was so design our website in line with our actual system. It used oversize typography, ocean imagery and was bright and colorful. The second option was inspired by some other internal tools and was an attempt to brand our systems website as a tool unique to the design team. It utilized a dark UI and brought in pops of color. While they both shared the same navigation and layout, the styles were completely opposite.
Stakeholder Presentations
I created a prototype of each UI option, and presented it with our stakeholders. Although the dark UI was a fun and edgy option, leadership opted for us to move forward with the bright colored one.
"Since this documents our Visual Language, the UI should be as true to our existing brand as possible." — Byron Gronseth, Royal's Director of Product Design
Once we had the approval for a UI direction, I continued with designing out the rest of the product.
Feature Highlight: Brand Selector
To solve for the tri-brand requirements, I designed this handy selector. Since this was an internal tool, we knew our target users were familiar with the different logos of the brands, and would understand how to toggle between the different brands to see the different components and elements.
Feature Highlight: Typography
Some people think designing for systems can be boring, but I think systems can have an element of delight if you look for places to add that in. While designing our typography scale, I noticed an opportunity to create something more personal to our brand, rather than another boring type scale. To personalize our type scale, I brought in phrases and headlines from our live app to show examples of how text should be used. I did this by doing a quick audit of our app and jotting down some headlines. These phrases were familiar to anyone who was working on the product and helped make the Systems site feel more relevant and - dare I say it - even fun.
Results
As an internal product, the success was measured by how this product was received by the design and development teams, since they were our primary users.
- Design teams reported feeling less confused about how to use the design libraries and more sure of their design choices
- Engineering teams gave feedback letting us know they were consistently using the site in their workflow
- Site was used as a source of truth to reflect all new design decisions and share updates with multiple product teams
