Latinum Design System - Dribbble SDS
The capstone project
This is the story of the capstone (final) project for Dribbble's Scaling Design Systems course, taught by Dan Mall. Over this 10 week course, Dan and his team of design mentors gave the students an in-depth look at what design systems are and the many processes, workflows, and frameworks that are used to build and maintain them.
At the conclusion of the course, the other students and I were asked to apply all of the things we've learned and launch a fictitious travel startup with 3 digital products.
Since this was a course about scaling design systems, we were instructed to build a design system that would act as the foundation for those products. We then put that system to the test by rebranding our fictitious startup and updating our 3 products to reflect the new brand's design.
The project brief
The newly launched IPTS: the Interplanetary Travel Syndicate, is a bustling transportation network that shuttles people from world to world within our galaxy.
Initially, IPTS’ fliers relied on individual agents to personally manage the scheduling of each flight. As IPTS grew in size and the flights became more frequent, it became increasingly difficult for agents to pay special attention to each flier’s unique needs while still taking the time to schedule and manage each flight. IPTS needed to relieve the load on its agents and give control to its fliers. The company’s leadership has decided to launch with 3 unique offerings:
IPTS.org, An informational website where you can find the latest news and happenings with the IPTS.
IPTS Travel, A website where you can browse and book travel to and from multiple destinations within our galaxy. Like Expedia for space.
IPTS Rail, A real-time updated web app where you 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 as IPTS’s Head of Digital will be to design these offerings from scratch and to manage the different teams involved in bringing these products to life.
Designing IPTS
IPTS' visual style is a mixture of bold futurism with clean, minimal elements. The ui is meant to look familiar and accessible to users who may not be familiar with the cutting edge of tech or space, and still be compelling for those who are.
Design files
Assets
Content creation
Research and discovery
With the offerings decided upon for the IPTS' launch, I began studying similar websites and products around the internet to understand why they've been successful and to find opportunities for improvement that I could address in the design of IPTS' products. I looked at many different sites, but the ones I focused on were the following:
Virgin • The Walt Disney Company • Delta • British Airways • Booking • Expedia • Jet Blue • United • Lufthansa • New York MTA • Transport for London • SpaceX • NASA
Building a component inventory
In order to help myself understand the design patterns that successful travel companies used in their offerings, I built an inventory of components found on the websites of those companies. I did this by crawling over each site and taking screenshots of similar or repeating components, then pasting them into my Figma design file.
Information architecture
By analyzing the component inventory and the relevant content I found around the web, I was able to conceptualize a hierarchy for the content we'd be building into our offerings at IPTS. I did this by creating low-fidelity wireframes of each offering and polishing them into dev-ready mocks.
Latinum Design System
The wireframes also served to highlight the content and components that could be repeated on all three sites. These components were then abstracted into their own Figma library and would become the first pieces of Latinum Design System used by IPTS.
I would also abstract the styles and design patterns from the polished mocks as I worked on them. Altogether, the components and styles made up the figma library which would be installed back into the Figma design file.
Pivoting from IPTS to Shuddle
With Latinum Design System in place, the rebrand from IPTS to Shuddle was relatively painless. The design system was built so that all the styles were abstracted and could be adjusted at the atomic level with minimal effort. By updating the design tokens in the Figma library to match Shuddle's style guidelines, IPTS was put to rest without breaking stride. Shuddle would become the brand to carry our organization forward.
Thank you for reading : )