Overview

This case study is part of the final project for Dribbble’s Design Systems course. The project mimicked a real-world scenario in which a company is experiencing rapid growth.

The Brief:

As the Head of Digital for the newly launched IPTS: The Interplanetary Travel Syndicate, you have been tasked with creating 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.

Approach

I focused on creating simple, clean designs with user-friendly components that could be easily updated and scaled down the line.

I utilized AI to generate initial ideas for content and did competitor analysis research to dial in on key features for each site, looking to news, travel, and commuter/rail sites for inspiration, and noticing the most common elements and various aspects that I liked. I outlined these in plain text before moving on to basic wireframes.

Visual Design

I set up some initial font and color styles in figma so that I could easily work across all three site designs simultaneously. This also allowed me to focus my attention on creating components. Patterns naturally began to emerge, and three unique websites started to form.

The Design System

If a component was used in at least three instances, I added it to my design system. I only created a new component when the existing components I was working with wouldn't suffice. I kept my design system lean, only adding the necessary styles, along with reusable components for Headers, Buttons, Input fields, Cards, Action Blocks, and Footers.

The Curveball

In the midst of this project, IPTS rebranded and became Shuddle. The good news is, with my design system in place these updates were fairly smooth! I updated logos, colors, and fonts, and made small tweaks to the components in my design system and it was so fun to see these changes quickly cascade across all three sites.

Conclusion

This design system helped me create a unified look and feel from the beginning stages. Once I had a design system in place it was easy to experiment with new styles, and it significantly streamlined the challenge of implementing new branding. Chronicling components aided in my understanding of what users of the design system might need to know when using it.