Shuddle Design System
Overview
About the Project
Shuddle Design System was created as a capstone project for the Scaline Design Systems course by Dribbble.
The goal was to create a single design system that could support 3 digital products in a Shuddle Family: Shuddle.org, Shuddle.visit, and Shuddle.ride.
My Role
I served as a design lead on a project while getting support, feedback, and inspiration from my mentor and classmates.
Research & Discovery
Competitive Analisis
We've started our research by comparing other websites in the travel industry - from well-established like Expedia and Eurail to fresh startups in interplanetary space. While working on an inventory of these products, we started to notice the same components repeating over and over again, as well as the same sections.
Content and structure
From there, we took the next steps to better identify the space we are in:
We started to outline the content of all three websites (thanks to ChatGPT for help);
We started to sketch the pages in the form of very low-fidelity prototypes;
And from there we started to write a list of components that we will likely need to create for Shuddle Design System first.
Laying down the foundations
Key Components
Once we started sketching all three websites, it became clear that the following components are going to be absolutely necessary:
Buttons
Header
Footer
Hero image + text
Cards (multiple!)
Tabs
Text inputs + drop-downs
But we were not quite ready to start working on them yet because until we've laid down the brand colors and set up our files properly!
Branding
We were lucky to be provided with the core brand colors and fonts. We were still missing font hierarchy and system colors (especially a gray palette!) so we added those to the foundation of our system as well and defined font styles and sizes.
Creating Components
Core Components
We've started with the most obvious but challenging one - the buttons, and continued building from there!
Writing Documentation
Although, writing Design System documentation may feel like a burden to many, with current plugins our life has become much easier.
Final Results
Closing Notes
As a designer with 6 years of experience, I've worked with many design systems but have never created one from scratch. Even though it was not a real life project but a school assignment, I've learned a lot, and most importantly gained so much respect to everyone who stands behind this magic of design systems!