Hello explorers!

This is a case study from Dribbble Scaling Design Systems course by Dan Mall.

Briefing

You’re the Head of Digital for the newly launched IPTS: the Interplanetary Travel Syndicate, a bustling transportation network that shuttles people from world to world within our galaxy.

Your leadership has decided to launch with 3 unique offerings:

1. ipts.org, an informational website where you can find the latest news and happenings with the IPTS

2. IPTS Travel, a website where you can browse and book travel to and from multiple destinations within our galaxy.

3. IPTS Rail, a real-time updated web app where you can view lines, routes, and times for all the different commuter lines for interplanetary travel.

A lot of companies out there when thinking about starting a design system; think they need to start from zero, when in reality it can be started extracting from products that already exist under their umbrella. So the idea here is to simulate that scenario.

My process

I started looking at the references from the Briefing to gasp ideas on how I could create a simple and yet efficient experience throughout the 3 products.

With that I sketched some ideas and jumped to wireframing. I decided to go for a medium fidelity look, to help me identify the components and also adjust for better flow.

After I was happy with the wireframes, was time to dive into the UI...

Style Guide

I put together a moodboard to guide me through what I wanted to achieve for this brand.

In the era of digitisation and focus on real-world experience;  a short, concise page describing current news and expeditions across the galaxy  and eye-catching imagery, invites travellers to call on and experience the interplanetary trips.

Then I started to create a style guide to serve as a base, also thinking about how these colors were going to scale in the future. I have done some local styles on Figma, not only for colours but also for typography. However, I decided to explore the new variables feature. I created all the core/primitive colours and started separating them into groups. (brand, neutral, semantic, routes).

With the core colors and spacing defined was time to look at my interface and to think about how am I going to reference using alias tokens.

Referencing  Tokens

I’ve set my foundations for colors and spacing within the variables and created a separate theme with 2 modes (default and dark), because I wanted to test how these could be scalable for multiple brands within the company.

Color aliases follow a pattern from Lightest to Darkest.

Creating the components

The mid fidelity prototype gave a good base around the content, spacing and components, so it made my life easier when creating. For example, I need a larger type than H1 to user in a big hero, so I created a Display style to use on that.

Each component was created using the local styles and variables from the style guide, referencing those alias tokens. 

With the components and styles ready, I published as an UI KIT to use as an Library.

Applying the UI

Rebranding briefing

Your leadership at the IPTS—the Interplanetary Travel Syndicate—just hired the prestigious branding firm MegaBrand to do a rebrand of the entire organization, and there are a few things that’ll affect the three products you’ve been working on.

MegaBrand discovered through focus groups that the IPTS name and logo felt very ominous, like it was cold, faceless corporation that was always watching. (“The eyeball-shaped logo doesn’t help,” said one candid participant.) In addition, the IPTS wants to appeal to a younger demographic.

After weeks of research and exploration, they’ve settled on the new name “Shuddle,” which feels more like a cool, new startup.

The color palette is fresh and vibrant, and the identity relies much more heavily on photography of younger people to feel more welcoming and inviting.

The 3 main products have also been renamed to feel more like a family of products instead of independent offerings:

1. “ipts.org” is now “shuddle.world.“

2. “IPTS Travel” is now “Shuddle Visit”

3. “IPTS Rail“ is now “Shuddle Ride“

Updates

As I've used a combination of global tokens and alias tokens for IPTS, helped centralise a source of truth for common design properties, and provided more descriptive or contextual names for specific use cases. So for these updates it was very useful.

I've also taken the opportunity to refine some components to be more aligned with the new branding.

Reference website documentation

While your design system is mainly used by designers and developers, it's important to think of it as an infrastructure for your whole team. The best design system won't matter if no one uses it enough to make a difference without adoption from everyone.

To make sure people use the design system, teams need a simple, easy tool to document, edit, and maintain it.

Using zeroheight tool for this exercise was quite simple and easy to export your tokens, styles and components. The tool offers integration with many design and code sources, and also you are able to collaborate with members of your team to write and approve documentation decisions.

I was able to add the new design system theme with no issue.

Key Takeways 

• You don't need to start your design system journey from zero. Starting auditing what you already have, identifying common patterns, flows and components. Not everything needs to be a component.

• Design systems prove their value most at times of change.

• Chronicle your journey along the way. It will be very helpful to onboard team members, once they know the reasons about each decision.

• Naming tokens and align with the team. Optimize at scale the experiences of Designer and Developers when using your design system. This will be vital not only for scaling but also adoption.

• Provide everyone access to your design system documentation. The design system affects many different areas, including marketing, branding, communications, product managers, high-level stakeholders, etc. You should involve all of them in its development.