My Mission: Create 3 Products, Powered by the Same Design System

Meet IPTS: the Interplanetary Travel Syndicate, a bustling transportation network that shuttles people from world to world within our galaxy. The folks at IPTS tasked me to help them set up their new design system that would ultimately become the backbone for their 3 upcoming products:

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. 

With only a logo to start with, there was a lot to do to make sure they had a flexible and adaptive design system that could support the 3 products.

Collecting Inspiration

Before designing anything, I had to take a step back and think about what the design system was meant to achieve. Components had to be consistent, specifically tailored, and simple enough to have various applications across the entire brand. For each one of the 3 products, I gathered inspiration from some of Dribbbles’ best designers and took inventory of what I thought was considered standard layouts for each product. After highlighting the common components across each page, I decided to make the following components the foundation of of IPTS’ design system:

1. Global Navigation (Horizontal Top App Bar)

2. Tabs

3. Local Navigation (Sidebar Menu)

4. Cards

5. Hero Section

6. Text Input + Divider Section

7. Footer

8. Label Chips

9. Buttons

Wireframes

Drawing from my list of components, I quickly wire-framed what each of the 3 products would generally look like and made it clear that one design system could support them all.

3 products, one design system

I created a compact design system that was able to power all 3 products using the same components. Doing so, the brand and functionality remained consistent across all platforms.

Alas, the journey isn't over...

Of course, an experience that any designer can relate to, the client has changed their mind at the last minute just when you thought you were done. It's a total 360 - an entire overhaul of the IPTS brand. Shifting away from the ominous black and white theme, Shuddle was introduced as a younger, faster, more energetic brand that the design system had to adapt to. Fret not, Astra was ready for the change and delivered it seamlessly.

Astra 2.0

Our goal was to feel “young”, “cool”, and “new” while making sure that we strayed from the IPTS’s cold presence. 

• Turned the original proposed colors into lighter hues and mixed them into lighter gradients for a more welcoming palette

• Added a lot of white space

• Added drop shadow styles to communicate softness/fluidity with the background

• Rounded corners and eliminated any unnecessary harsh lines/boundaries

• Changed the font to something friendlier

• Added various abstract shapes 

• Introduced 3d whimsical and colorful illustrations instead of dark, space images 

• A focus on bigger imagery and font

Lessons Learned

Although Astra was able to adapt quickly to the new Shuddle brand, there were some challenges along the way.

Introducing new aesthetics while working around the current design system: It took some careful thinking on how to modify the existing components into the new brand's look and feel without breaking it. For example, the components structural integrity remained the same and the branding was conveyed mostly through illustrations, abstract shapes, and bringing color to the forefront.

Adding to the design system instead of changing it: While the original Astra 1.0 was quite minimalistic, the transition to Astra 2.0 saw many stylized additions to the design system. The emphasis on font, color, shapes, gradients, and illustration added so much youth and energy to the brand and allowed us to re-use components.

Find the full Astra component library here: https://zeroheight.com/03857b718

Astra 2.0 Images produced by Midjourney.

**All Dribble shots used as inspiration for this case study is credited to original designers**