Reimagine Space Travel: A Design System Case Study - Shuddle
Artemis Design System
Building a scalable design system for the fictional company Shuddle.
This fictional (concept) design system was built as a part of the Dribble Design System course. Though it would be cool and scary to fly through space at the speed of light. This capstone project is simply sharpening my sword as I dive in on a personal journey to learn new skill sets as I explore Design Systems, Design Tokens, Documentation and so much more! Hope you enjoy it!
The Goal + Challenge
Even though I know 90% of you all are skipping to the cool stuff. The goal of this Capstone project is simply to build a Design system for a fictional Space Travel company named IPTS.
What’s so hard about that
Well mid way through we were given a challenge which was to rebrand midway through and we had to test and see how well our Design System would hold up to the unscheduled rebrand.
How it Went
I expected some sort of challenge. Though I personally thought it would be a dark theme you will see that I structured my figma library to account for a quick dark theme shift. What I wasn’t ready for was a complete rebrand.
The Process
Reviewed and documented Travel & Space companies that I liked. It also helped that unbeknownst to me I recently visited Kennedy Space Center just before the topic was announced. So the timing couldn't have been better. 😎
Though I was in the middle of setting the foundation and just getting the concepts out. I intentionally held off and did not fully build out a color pallet. Although I simply set up my Library so that I could rapidly build it out once I had the concept locked in. What I didn’t prepare for was the challenge I would face around the Typography.
I got the structure set up just how I wanted it! Until….
“The Curve Ball… Rebrand + font = IMB Plex Serif 🤦
How can something so simple throw off my workflow? “I thought I planned for this…. I had a back up plan for the back up…” Though it was a straightforward fix, I didn’t realize it would break some of my components. And throw off the simple clean look I was going for.
“It was as if I was in cruise control and suddenly got a screw in my tire and it gradually slowed me down.”
The Pivot
What I learned: After I recovered from the challenge I soon realized the rebrand actually gave me a boost because I was inspired by the color palette. Also, I realized personally “Open Sans became my comfort zone”. It’s time to push it and guess what I don’t have to love every element of the project.
Components
Variants
Knowing that I had to plan for some sort of interruption I quickly built out multiple variants for Buttons, Input fields, Navigation and other components. Which gave me the ability to quickly scale the site.
Colors
Typography
Cards
Colors
The Takeaway
The beauty of this being my own personal project for the Dribble Design Systems course w/Dan Mall. I learned a few things.
Just be myself, this isn't a client project, I'm learning I'm stretching myself so In this personal moment I said I don't care. Even in the writing style of this case study my focus is to get it out and not be my worse critic there is no need to be perfect & clean. (That's the joy of design)
You can’t plan for everything, life happens let the process just happen don't try to prevent it.
Be willing to be agile & pivot when needed
Don’t try to do it all at once. Design systems are meant to grow organically alongside your product or suite of products.
As a final note for Dribbble & Dan. As a person of color in this industry for too long. It was so refreshing to be in a design class with other people of color. That made my heart smile. To the Community keep killing it!
(TLRD; )View the prototypes
I know this is all you want to see and you skipped everything else. It's ok I do it too 😊.
Shuddle Travel Booking - Prototype
If anything I hope I inspired you to just be yourself and trust the process...
Felix