Description

This project is about the journey towards the creation of the shuddle design system, as a capstone project for the Scaling Design Systems course by Dan Mall.

Brief

The first half of the capstone project was to create 3 websites of IPTS: An Interplanetary Travel System.

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. Like Expedia for space.

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

My Role

UX Designer for the product, including the 3 websites. Each website has at least one page, and each page has at least 5 components. The project is well-suited for agile teams in its flexibility to adapt to everchanging requirements, thus eliminating waste (A key Lean principle). I needed to create a scalable design system that will allow me to change the design from one place only.

The Process

Research

Based on the brief for each product, I took some screenshots in order to identify the atoms and small molecules as a first step towards creating the design system.

Preparing the Atoms

After analyzing the research websites, I created the Following:

1. IPTS Theme

   This file includes Typography, Colors, Spacing, Grids, and Logo. I made it in a way that when I need to change themes, all I need is to update this file and publish it.

2. IPTS Components Library : Atoms and Molecules

   At this point I started creating the atoms and small molecules, so I could start creating the websites faster, without the need to worry about how they would look like, since I have a master component, I can just update it later on when branding is ready.

3. Identifying Molecules and Organisms

   After creating the websites using the atoms and molecules, I started identifying the bigger blocks to identify patterns, which could end up becoming components . The rule is simple: If the same group of atoms and molecules is repeated in 3 products, I turn into a component.

Creating the Components

The way I like to create components is by combining everything that I will need to use in a master component, then turning off layers using the component's properties (Thanks to Figma's features) in variables where it's not needed. Having a master component for a set of components centralizes the place in which changes need to be made.

IPTS Websites

I updated the websites and replaced all blocks by the newly created components, so the websites can easily adapt to a potential rebranding or any other drastic changes.

The Rebranding

Now is the time to test the scalability of the design system. Since I had everything related to theming in one file; IPTS Theme; I duplicated it and updated the design tokens (e.g color styles and typography), and I just replaced the new logo in the master logo component.

The Swapping

To update the Component Library, all I had to do was to swap the IPTS Theme with Shuddle Theme. For this step to work correctly, all names should be exactly the same (i.e Case sensitive)

Design Update

Before trying to make any adjustment to the websites, I wanted to see what swapping alone would do for the design so I took screenshots:

Final Result

Now is the time to emphasize the branding even further and add the special ingredient to the plate. This is the step where creativity takes place:

What's next?

Next I will be exploring design tokens further, and add spacing into the equation. In this project I defined the spacing in the themes, but I haven't used the components, I just followed the rules.

I enjoyed creating this design system, and seeing the swapping in action was definitely the best part of this project!