Design System for an Interplanetary Adventure

Project Brief

The Interplanetary Travel Syndicate, IPTS is a newly launched transportation network that shuttles people from across different worlds within our galaxy.

As the Head of design for IPTS, I've been tasked with designing websites for our 3 unique offerings that are launching soon:

  1. The main website, ipts.org where you can learn and keep up with all things IPTS

  2. Our travel website, IPTS Travel where you can browse and book your next trip to destinations across the galaxy.

  3. And a web app, IPTS rail where you can view information regarding available lines, routes and times for transportation.

With the logo as the only pre-existing asset, I began to research how users might book travel on websites and web apps, check the status of rail/train service and common patterns on travel websites.

I began to consider the common elements that would exist across all 3 websites to determine, outside of buttons, what elements should become components.

I first started constructing the layouts for each page in tandem as they would have common elements.

IPTS Wireframes for all brands

After the wireframes were completed, I began working on the high fidelity landing pages for the 3 brand variations and the components in tandem.

The IPTS Design System

Impromptu Rebrand

At the last minute, a big change was introduced to rebrand IPTS to Shuddle. The agency wants a more youthful, fun and vibrant look to appeal to a younger demographic.

With the introduction of the rebrand, new logos and color palettes. The designs and design system needed to be updated.

Chronicling a design system

I've learned the important lesson of not only documenting the design system but chronicling the design system.

It is very helpful to have information on the steps you took to create a component and/or a design especially if major changes need to be made like a full rebrand. How you deprecate or remove old components and tokens can sometimes be a challenge especially when products/designs can't immediately be updated due to impact and also when you need to look back on the transition from the old to the new version of your design system.

This was a project for the Dribbble Scaling Design Systems course.

More by Katrina Hussain

View profile