Introduction

This case study is part of the Design System course offered by Dribbble by Dan Mall. The goal of the project is to apply the concepts and techniques learned in the course to create a design system and launch three unique offerings for the Interplanetary Transportation System (IPTS)

Background

The IPTS is a fictional transportation system that aims to provide space travel solutions to people living on different planets. The system consists of three unique offerings: IPTS.org, IPTS Travel, and IPTS Rail.

IPTS.org is an informational website that provides the latest news and updates about IPTS. IPTS Travel is a website that allows users to browse and book travel to and from multiple destinations within our galaxy. IPTS Rail is a real-time updated web app that provides information on lines, routes, and times for all the different commuter lines.

Challenge

The challenge is to create three websites, each with at least one page and five components, that are visually appealing, easy to use, and consistent with the IPTS brand.

Ideation and Research

As a solo Product Designer, I started my research process by brainstorming with Chat GPT. Then to create an effective design system for IPTS, I began by analyzing the needs of the project and gathering insights from existing space travel companies, travel booking sites, and rail sites.

Through this extensive research, I identified common patterns in content and structure and used this information to create wireframes. To make these patterns more visible, I used color coding to highlight them.

Visual Identity

With the wireframes in place, I focused on creating a sleek and modern design system for the project. I drew inspiration from popular websites and chose a dark, minimalist look.

Color

I decided to use a limited color palette that focused on shades of dark grey and Light Seafoam Green. The dark grey color was used for the majority of the interface, providing a subtle and neutral background that was easy on the eyes. Light Seafoam Green was used sparingly as an accent color for buttons and select elements.

Using Tokens

One of the most critical parts of the course for me was coding, which highlighted the importance of documenting and implementing tokens. Using color tokens was challenging. I took inspiration from Carbon Design System and Gestalt Design Systems for color tokens and created a 4-level naming system: category/component/variant/state.

Fonts

For typography, I used a combination of Orbitron and Montserrat . Orbitron was perfect for headings and titles, as it has a bold and futuristic feel that aligns well with the overall aesthetic of the IPTS. Meanwhile, Montserrat was ideal for our body text, as its clean and simple lines make it easy to read.

Grid

To make sure everything looked neat and organized, I used the Universal Layout System. I set up a 12-column grid, 65-width, Offset 165, and gutter 30.

Ooops new challenge!

Design systems are only as valuable as their ability to adapt to change. In part 2 of the final capstone project, the IPTS is rebranded as "Shuddle," and the three products have new names and identities designed to appeal to a younger demographic. The challenge is to update the design system and launch the newly branded websites within a week, with a fresh and vibrant color palette and emphasis on photography. Color and typography were provided for the Shuddle rebrand.

Thanks to the time invested in developing the Hero Design System on Figma, updating the product branding to "Shuddle" was a breeze. I tweaked the color scheme and typography to give the design a fresh new look. Additionally, I modified the corner radius of buttons, cards, and other components to create a softer feel. To fully align with the Shuddle brand, I used Midjourney for new images.

Documentation

For the documentation of the Hero Design System, I utilized Zeroheight, which allowed me to effectively chronicle the usage of various components. By documenting the system, I was able to ensure consistency across all three websites and streamline the design process for future updates.

Main takeaways

In conclusion, this capstone project was a great learning experience for me after completing the Design System Course. I enjoyed the process of creating the Hero Design System and discovered many new things about design systems. Moving forward, I am excited to continue building and improving Hero Design System, incorporating new components, and ensuring its scalability for future projects.