The Cygnus Design System & Shuddle Space Travel Products

This project is a design system and products made with that design system for an interplanetary travel company. You can also take a look at this case study on my website and my Figma file.

Project Overview

This project is for the fictional, newly-launched IPTS, the Interplanetary Travel Syndicate, which is a company that provides transportation services for intergalactic travelers. The company’s niche market was created for people who are looking for a convenient and safe travel option between different worlds within the Universe. The company need someone to create their design and user interface for three products:

  1. ipts.org, an informational website where a user can find the latest news and happenings with the IPTS,

  2. IPTS Travel, a website where a user can browse and book travel to and from multiple destinations within our galaxy, kind of like Expedia for space, and

  3. IPTS Rail, a real-time updated web app where a user can view lines, routes, and times for all the different commuter lines. Think NYC Subway or the London Underground, but for interplanetary travel.

My Role

My tasks were to create the homepage for both websites and the mobile app, and create a design system to go with them.

The ipts.org home page was created to look like a news site, kind of like CNN.com.

IPTS Travel’s home page is a bit like AirBnB, with listings of trips and experiences one could book when visiting another planet.

I also created a “listing” page to depict a chosen listing, with photos, information and reviews of the stay.

IPTS Rail was created as a mobile app.

The Design System

A design system was created in tandem, and consists of 8 UI components in Figma along with color and typography styles, and a reference site in ZeroHeight that includes those styles and components, along with their design principles and guidelines.

The first version consisted of 8 components - a header, a footer, a menu, a primary button, a review card, a regular card that could be used for news or listings, a date picker, and a form.

Challenges

One challenge I had was coming up with images to use, since us humans don’t have any way of taking trips throughout the Universe, apart from astronauts traveling to the moon and the International Space Station, and maybe up-and-coming companies that offer rocket trips for those of us fortunate enough to afford them. So, I ended up using MidJourney AI to create the images for each product. I had to stop myself after a bit - creating cool images that quickly can be addicting!

The New Design System

Another challenge was that, part-way through the project, leadership at IPTS hired a prestigious branding firm to do a rebrand of the entire organization, which affected the three products and the design system. I had to switch gears and redesign the products and update the design system and the reference site to reflect those changes.

After weeks of research and exploration, they settled on the new name “Shuddle,” which feels more like a cool, new startup. The branding firm discovered through focus groups that the IPTS name and logo felt very ominous, like it was a cold, faceless corporation that was always watching, so they created a new logo.

There were new colors to help appeal to the younger demographic.

The typographic palette before the rebrand used Inter but now uses the IBM Plex Mono and Serif fonts.

The Rebranded Products

The three products were were also renamed to reflect the new brand:

"ipts.org" was changed to "shuddle.world."

"IPTS Travel" was changed to "Shuddle Visit."

"IPTS Rail" was changed to "Shuddle Visit."

"IPTS Rail" was changed to "Shuddle Ride."

Next Steps

My next steps if I were to continue this project (which I might do - it was fun!) is to create more pages to finish out the products and add more components to the design system, along with updating the ZeroHeight reference site.

More by Anne Youkey

View profile