Overview

This design system is the final case study created for the Dribbble Design Systems course.

Project brief

Part 1

Create a design system for a fake company called IPTS: The Interplanetary Travel Syndicate (IPTS), then use the components to create mockups for three different IPTS products.

Part 2

Redesign the IPTS design system for the Shuddle rebrand, then update the mockups for the three different Shuddle products: News, Visit, and Ride.

Deliverables

• Nova design system, evolved from IPTS (part 1) to Shuddle (part 2)

• At least one page for each of the following products, each page with at least five components on it:

  • Shuddle News, an informational website where users can find the latest news and happenings with Shuddle

  • Shuddle Visit, a website where users can browse and book travel to and from multiple destinations within our galaxy, like Expedia for space

  • Shuddle Ride, a realtime-updated web app where users can view lines, routes, and times for all different commuter lines, like the NYC subway or the London Underground, but for interplanetary travel

• Design system documentation

My role

I was the only contributor on this project, so I was responsible for researching comparable sites, creating the design system, and applying its components to the three products – then redesigning it in part 2.

Competitive review on Notion

Outputs

Components

Shuddle's design system is documented in a tool called zeroheight (including deprecated styles and components for the old IPTS branding).

I reused these seven components across the three site designs:

1. Button

2. Card

3. Footer

4. Input

5. Logo

6. Navbar

Mockups

With the three sites placed side-by-side, it’s easy to see the themeability of the design system at work:

Part 1

Each of IPTS’s sites has a distinct color that represents it: blue for News, orange for Travel, and yellow for Rail.

While these designs are only presented in light mode, the foundations are laid for expansion to dark mode in the future.

Part 2:

Before Shuddle redesigned its branding, the sites had a consistent look and feel, where each site had a distinct color: blue for News, red for Travel (now Visit), and yellow for Rail (now Ride). After the rebrand, these colors were updated to midnight blue for News, green for Visit, and red for Rail.

With the rebrand, a new purple color was introduced, now weaved through all three sites as the persistent primary color, drawing users’ attention to the most important content on the pages.

Two new fonts, IBM Plex Mono and IBM Plex Serif, replaced the original Cabin and Epilogue. Line heights and spaces between elements were updated to match the look and feel of the new fonts.

Takeaways

With the first set of design deliverables for part 1, IPTS was able to launch its three sites and start serving its customers with not only these three site homepages but also baseline components that will serve them in creating many other pages, too.

Then, with the rebrand for part 2, Shuddle could launch its rebranding on its three sites’ homepages with minimal disruption to customers because of the smooth transition from the old to the new design system.