Establish a Design System
Role UI designer
Timeline Two weeks
Deliverable Three websites and a design system
On-going Reference site
The IPTS/ Shuddle websites and Milkyway Design System 1.0
This is a project about designing IPTS/ Shuddle websites and establishing its design system The Milkyway Design System. The three websites have their function within a consistent visual identity and the Milkyway Design System offers a set of guidelines, components, and tools specifically for creating products for IPTS/ Shuddle or any other space travel products. All designers who work for the company or related firms have the access to the pre-built components which can be easily customized to the specific needs of each product, and all the new products will have a consistent look and feel, at the same time creating a smooth user experience for the users.
Stage 1: The web design project
Intro and project goal
As the Head of Digital for the newly launched IPTS: the Interplanetary Travel Syndicate, a bustling transportation network that shuttles people from world to world within our galaxy. The company decided to launch 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.
My role was to create all three websites with consistent visual identity and yet have their unique character, at the same time to establish a component library for sharing within these three website designs.
Getting started
I started to build these three websites by defining the purposes, functions, and contents/elements first. At the same time, I researched and browsed through some competitors’ digital products, some space theme materials (news, images, articles…etc), and also just some random and abstract magazines and websites to try to find a feel for these sites.
Design Process
First I chose the typeface Neue Haas Grotesk Pro for the products’ font because together with the old-style look of the logo, I wanted to create a bold but classic feeling for presenting the coolness and reliable safety of this company. As for the colours, I picked and mix-matched some colours from reference images to create a material-based colour theme.
IPTS Rail
I started with IPTS Rail because I think it will be the most constantly used one of these three. Thanks for my brainstorming body - Chat GPT, I thought it will be nice to have a live tracking function on the website so it is not just a dry informative site but a place you can have a glance at what is going on in the space as well. To use it as much as possible of the screen, I made the main navigation hidden when the live aircraft tracking is on.
Establish the component library/ design system
While using the Hot Potato Method to put together the contents and their hierarchies of the three websites, I also tried to find a possible system path and listed some basic components that are going to be used on these three sites (or at least two of the sites).
So when I put together the draft design of IPTS Rail and the list of components, it created a natural path for me to design the components for the websites and the design system at the same time. It was also clear that I use the same navigation bar for all of the sites.
In addition, I made a mobile version for IPTS Rail due to the common usage of the function. I thought having the search and current status functions available for our phones would be handy. In the longer term, It can help me to test and stretch the design system to a wider range.
Stage 2: The challenge – Half-way Rebrand
Rebrand
While the websites and the style library were being built, the leadership at IPTS just hired the prestigious branding firm MegaBrand to do a rebrand of the entire organization, and have settled on the new name Shuddle and wanted to feel more like a cool and new startup. They have provided new logos, colours, fonts, and tone/feel for the organization.
Solution – adapting the changes through the design system
It was a huge surprise but fortunately, since the styles and some components were built into the style library already, it was not a big trouble to rebrand for all three websites. By adopting the new branding materials to the shared component, I got into the new feel pretty quickly and was able to maintain the design idea (the hidden main navigation) and changed to the new look seamlessly.
While adapting the new branding material to the designs, I also defined the styles (colour palette, typography, and components) with more options and guidelines.
For example, by replacing the black colour with the brand navy blue colour Midnight to create contrast and hierarchy, and also different shades of a neutral background. And by making a transparent palette, the brand colours can be used to create depth and dimensionality.
As for the card component, by using the Figma auto-layout function, it can be easily adapted to different scenarios. On shuddle.world, it is used as links for the news, and on shuddle Visit, it has been used in reduced size with subtitles instead of links. Please check the Figma component library for more details.
The outcomes and the experience
It was a success (specifically the efficiency) for adopting the new branding material into my designs. This challenge was also a good chance to experience how a design system work in practice and also what needs to be included in the system and what is not so necessary. The rebranding also helped push the UI design a bit further by adding a more concrete decision and another perspective.
Conclusion
This project aimed to establish a solid structure and logic for the design system while designing and scaling the company products. The project’s end goal is to integrate all UI components into Zeroheight and complete with token sets. In the meantime, guidelines for each component will be available.
It was an exciting and challenging project while the design mind wanted to go wild, the systematic mind tried to plan things in a system. The process has proved to me that design and design system can be built at the same time, furthermore, they help each other to scale and grow.
Thank you for the ride and please don’t hesitate to leave me some feedback. All comments are appreciated.
The Credit
The project was the capstone project from Dribbble’s Design System Course – Dan Mall February 2023, and my tutor was Marc Obieglo.