Role UI Design
Last update April 2023
Tutor Dan Mall
Mentor Marc Obieglo
This project was the capstone project of the Dribbble Scaling Design System course in February 2023 with Dan Mall. I graduated at the end of April and here is the certificate. Read the detailed Case study here.
Design websites while establishing their design system
In this project, I was the Head of Digital of IPTS: the Interplanetary Travel Syndicate, a 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 and further product development within the company.
Process – Research, Design, and Build
I started with a standard design process: research and browsing, benchmarking pros and cons from similar products, and finding a feel for the UI design. According to the existing logo, I wanted to extend the old-style feel, classy and stable, so I chose a classic typeface with a colour palette and some earthy element tones.
To quickly arrange some content to sketch with, I was doing the Hot Potato Method with my teammate this time – Chat GPT– to throw some ideas for the three websites. At the same time, I started to find possible reusable components and logic for the websites.
With these basic setups, I started to design the IPTS Rail website, which will be the most used among these three. Then I made the components I built for IPTS Rail into the component library and later used them for designing IPTS Travel and ipts.org.
The process for both the website design and the component library was moving simultaneously and a bit back and forth.
The Challenge – Halfway Rebrand
Halfway through the project, the leadership at IPTS decided on a complete rebrand, which included new logos, colour palettes, typefaces, and descriptions for the look and feel. We were given a package of materials to facilitate this change.
I was initially surprised and confused, but then I discovered the power of the ongoing component library. Instead of rebuilding everything, I made changes to the component library. Updating the library helped with rebranding, and I accomplished about 50% of the task. Additionally, I created more detailed style guides for the design system since the styles were already well-defined.
Result
I have completed the initial design for three websites and developed a scalable design system. My ultimate aim was to create a sharable design system with other designers and developers. I designed and uploaded the websites to a reference site to achieve this. If interested, you can read more about the project in the case study or view the results in the Figma file and ongoing reference site.
shuddle websites
Milkyway Design System 1.0
