Interstellar - Shuddle's Design System
This project chronicles the evolution of Shuddle's (formerly known as IPTS) - Interstellar Design System throughout its development—a capstone project undertaken for the Scaling Design System Course at Dribbble.
🧑🚀 Mentor: Charles Christie
🖌️ Tools: Figma + ChatGPT + MidJourney + Unsplash
Project Overview
It was the year 1973, a time when space exploration was riding high like a star-studded locomotive, and the enigma of the moon landing still lingered in our collective consciousness. The Interplanetary Travel Syndicate, known far and wide as IPTS, had just hurled their ambitious enterprise into the cosmic void—a bustling cosmic commuter network, whisking folks to and fro amidst the tapestry of our galaxy's realms. Leadership took center stage with a trio of daring offerings:
IPTS Org is an information website where users can find the latest news and happenings with The IPTS.
IPTS Travel is a website where users can browse and book travel to and from multiple destinations within our galaxy.
IPTS Rail is a real-time updated web app that views lines, routes, and times for different commuter lines.
And so, as the Head of Digital, I crafted three digital realms, each adorned with no less than five components—a symphony of design and the cosmic dance of electrons. So here it goes.
The Process
Research
With not a lot to start with—just concise product descriptions—I set out on a journey to truly grasp IPTS. My goal was to understand its basic offerings, including what it needed and what its audience wanted. To achieve this, I dived into the world of similar companies, peeking into patterns and their overall structure.
(Slide 1)
Visual Inspiration
I sought visual inspiration by immersing myself in the vibrant aesthetics of the 70s, particularly focusing on the era's distinctive colors and typography.
(Slide 2)
Structure & Content
Next, I had to plan and map out the structure and content of each of the products. As I was operating independently, I sought assistance from my AI colleague, Chat GPT, to aid in this endeavor. After iterative deliberation, I finalized a more polished framework, implementing the 'Hot Potato' technique to guide the structure's development. This approach seamlessly transitioned into Figma, where it materialized as wireframes.
(Slide 3)
Design System
By strategically arranging elements on the page, I expedited the identification of recurring patterns, enabling the swift formulation of a cohesive design system. This system was documented on zeroheight for future reference.
The Output
The Rebrand
Zoom ahead to the year 2023, a half-century since the enterprise's inauguration. Leadership, seeking a fresh identity, enlisted the services of the illustrious branding powerhouse, Megabrand. Out with the old and in with the new: IPTS—the Interplanetary Travel Syndicate—morphs into Shuddle, shedding its former skin to exude the vibe of a hip, emerging startup and charm a younger cosmic crowd.
The 3 main products have also been renamed to feel more like a family of products instead of independent offerings:
“ipts.org” is now “shuddle.world.“
“IPTS Travel” is now “Shuddle Visit”
“IPTS Rail“ is now “Shuddle Ride“
Introducing - Shuddle
The reveal of the new branding brings an updated design system. This involves revamping the colors, typography, and components to harmonize effortlessly with the brand's fresh identity. This shift is also reflected in the product page templates. Fortunately, since I already had an existing design system, updating and visually refreshing them was a relatively easy task.
Conclusion
The significance of a scalable design system cannot be overstated. It offers everyone the advantage of components, a clear grasp of construction methods, guidance on appropriate choices, and the ability to pivot at a moments notice—definitely a comprehensive toolkit for effective design.
Reference Site: https://zeroheight.com/49f036798