Case Study: How IPTS's Design System Evolved into Shuddle
Hey there, space traveler! 🚀
Let's blast off on a design adventure out of this world.
As the Head of Digital at the Interplanetary Travel Syndicate (IPTS), I led the mission of creating three unique digital interfaces and create an encompassing design system using Figma within a tight timeline of two weeks.
Our destinations? IPTS.org (a news portal), IPTS Travel (a travel booking site), and IPTS Rail (a real-time transit app). – each crafted to deliver unique cosmic experiences.
Our journey orbited around Product Design, Design System Creation, Rebranding, and Adaptability Testing. Departing from Research and Analysis, we moved to Wireframing and Design Iterations, passed through User Interface (UI), and finally arrived at Design System Creation.
When we hit hyperdrive, a surprise meteor shower hit us: a brand new identity, "Shuddle", radiating youth and energy. We had to quickly adapt our design system and websites to reflect this fresh vibe. The challenge: keeping changes to a minimum to test the design system's adaptability.
We took a deep space dive to adapt, switching logos, remixing the color palette, flipping to new typography, and adopting a spunky visual style.
The result? A smooth transition from IPTS to Shuddle, showing off the versatility of our design system:
Websites: Shuddle | Shuddle Visit | Shuddle Ride
Design System: AsteroiDS Design System
Reference Site: Shuddle AsteoriDS
That's our intergalactic odyssey in a nutshell. Buckle up as we delve deeper into the uncharted realms of this design quest!
Phase 1: Research and Analysis
At the onset of the project, I follow a checklist, 'Web Design Essentials', to navigate the research phase. This process keeps my creative journey on track and ensures a strong alignment with the project's objectives.
The Brand: The initial direction was a 1970s, monochromatic vibe, a reflection of the IPTS logo. But to highlight CTAs, a vibrant 'Flame' hue was introduced, subtly moving away from a purely monochrome scheme.
The Colors: Inspired by the vastness of space, we pivoted to a dark theme. Additionally, we introduced 'Astro Colors', assigning specific hues to different sections, signifying the planets in our solar system.
The Typography: 'Neuethings Sans' was chosen for its striking resemblance to the IPTS logo and its harmonious fit with the retro style.
The Iconography: We set specific rules for the icon states - Line for default, Solid for hover/active and input fields, and Duotone for featured content.
The Layouts: We scoured relevant websites to create a Mood board, identify patterns and draw inspiration. The goal was to deliver an intuitive and familiar navigation experience to the users.
Phase 2: Wireframing and Design Iterations
Hopping into the pilot seat, I began the wireframing journey. The key focus during this phase was to structure the sites, establish an information hierarchy, and visualize repetitive patterns destined to form the skeleton of the design system.
Simultaneously working on all three IPTS platforms was challenging, yet crucial. Each had its unique structure, but my objective was to find shared design patterns to promote consistency and scalability.
Key sections like Header, Hero/Search, Body, Sidebar, and Footer emerged as repetitive patterns. The Body section, in particular, was designed to be a flexible space, capable of hosting everything from the latest interstellar news to complex travel options and route maps.
Key Takeaway: My philosophy with wireframing? Less is more. I learned over the years that time spent fine-tuning wireframes is better used in conversations with clients, refining designs based on their feedback. This iterative dialogue eventually yields a more successful outcome, striking a balance between the users' and clients' needs.
Phase 3: Crafting the User Interface
Leaping into the cosmos of UI creation, I started by designing the interfaces for all three IPTS platforms. Relying on our earlier groundwork, I applied the chosen typography, set the spacing, and integrated illustrations, iconography, and images. Meanwhile, I adhered to the 'Astro Colors', ensuring a uniform hierarchy and consistency across all elements.
In this design odyssey, I followed a golden rule: no component gets created until the design is final. This approach allowed me to evaluate every element in various contexts, ensuring they function as intended across different platforms. It's like testing a spaceship before its maiden intergalactic voyage—preparation is key.
Key Takeaway: I've learned from past missions not to rush into creating the Design System. Instead, I now make sure every design element is finalized and functions well across all platforms before I start building any component. It's like a pre-launch systems check - a crucial step that ensures a smoother voyage ahead.
Phase 4: The Design System
Finally, we arrived at the creation of the Design System. Like assembling a constellation from individual stars, I started by auditing the completed interface designs. I extracted text styles and colors, forming the fundamental elements of our Design System.
Next, it was about spotting recurring elements. These became the building blocks of the system. I chose to leave out the infrequent elements to keep our Design System flexible, thinking of it more like a living, evolving entity. If something proved useful down the line, it could be added to the system.
So, with the Design System in place, our journey was complete. The mission was a success.
The Challenge
Just as we were celebrating our successful journey in the design cosmos, an interstellar storm hit us. The leadership at IPTS decided it was time for a major rebrand.
IPTS had struck an ominous chord with its audience. The logo gave the impression of an ever-watching eye, and the name felt too corporate. To connect with a younger demographic, IPTS enlisted the expertise of the Design Studio MegaBrand for a rebranding mission.
Out of the rebranding nebula, Shuddle emerged. With its cool startup vibes, vibrant color palette, a shift towards youthful photography, and the versatile IBM Plex as its typography choice, Shuddle was ready to conquer the universe.
The three main products underwent a transformation to align with the new branding:
“ipts.org” metamorphosed into “shuddle.world“.
“IPTS Travel” transformed into “Shuddle Visit”.
“IPTS Rail“ became “Shuddle Ride“.
The challenge now? To adapt our products and Design System to this new branding while keeping changes to a minimum. It's time to test the mettle of our Design System and see if it's ready to brave the rebranding storm.
The Solution
Alright, here's how it went down. Our challenge was to realign our IPTS products and Design System with the new Shuddle branding, but without flipping everything on its head. Quite a test for our Design System, right?
Logo Updates
First things first, I swapped out the logos. Bye-bye IPTS logo, hello Shuddle! Created some variations for Shuddle, Shuddle Visit, and Shuddle Ride while I was at it.
Color Updates
Next, I dived into the color palette. I gave the whole thing a bit of a face-lift, going for a light background to match Shuddle's youthful look. Assigning primary colors was like playing match-the-colors: Blue for Shuddle, Green for Shuddle Visit, and Red for Shuddle Ride. The secondary colors added a bit of consistency across the board.
Typography Updates
Typography was next on the list. Out with the old, in with the new IBM Plex. A few size adjustments here and there, but overall a pretty smooth shift. The result? A friendly vibe that is all Shuddle.
Images Updates
We then jazzed things up with some youthful, vibrant images. Swapping out the previous photos for ones that better vibed with Shuddle's young, energetic audience added an extra layer of freshness to our platforms.
Components Updates
Rounding things out, I fine-tuned our components to match Shuddle's new look. The goal was to keep the changes minimal, yet impactful, again demonstrating our Design System's adaptability. We dotted our i's, crossed our t's, and left no detail untouched!
All in all, we managed to ride the wave from IPTS to Shuddle without capsizing our boat, showcasing how adaptable a well-crafted Design System can be.
The Outcomes
After a rollercoaster journey of exploration, creativity, and adaptation, we've reached a stellar point in our expedition: the results. Grab a cup of cosmic coffee, sit back, and enjoy the show as we present the outcomes of our design mission.
Final Websites
We proudly present the three unique websites, each tailored to cater to specific user experiences and now with the vibrancy of Shuddle World.
Shuddle: Our digital news portal.
Shuddle Design System
Our adaptable design system, the digital backbone for Shuddle's vibrant identity, was a crucial element in our design journey. It offered the much-needed flexibility to cater to the rebranding pivot while ensuring a cohesive and harmonized visual language across all platforms. You can explore the robust and flexible design system we crafted on Figma here: AsteroiDS Design System
Reference Site
We looked towards the stars for inspiration. Our guiding light was a meticulously crafted Zeroheight page which served as our benchmark. It showcases superior organization and usability, qualities we aimed to instill in our design system. You can check out the reference site here: Shuddle - AsteroiDS
Conclusion
As our interstellar design journey drew to a close, we couldn't help but marvel at the transformation. From the solemn depths of IPTS, we emerged into the vibrant nebula of Shuddle.
As we navigated the cosmos of design, change was our only constant. And through this journey, we realized that our Design System wasn't just a tool; it was our spaceship, resiliently venturing through the ever-evolving galaxy of design
Key Takeaways:
Flexibility is key: Our journey showcased the importance of a flexible Design System. It must be capable of adapting to changes, big or small, without causing chaos.
Less is more: Including only frequently used components resulted in a lean, maintainable, and adaptable system.
Rigorous testing is crucial: Every component was put through rigorous testing across all platforms, thereby preempting and avoiding any cross-platform issues.
Adaptability to product changes: The transition from IPTS to Shuddle highlighted the necessity of adaptability in a well-constructed Design System.
Invest in a solid design process: Establishing a robust design process, inclusive of comprehensive testing and careful consideration of each element, pays off in creating a reliable Design System.
Starlight Thanks ✨
Before I wrap up this cosmic design adventure, I'd like to extend my heartfelt gratitude to the stellar individuals who guided me along the way. Their wisdom, expertise, and camaraderie lit up my journey, much like stars in the vast night sky.
To Dan Mall, the great instructor of the Scaling Design Systems course on Dribbble, your lessons were like a galactic compass, guiding my explorations in the vast universe of design systems.
Rick James Chatas, Design System Lead at Medium and my tutor for the course, your insights and support were akin to a spacecraft's guiding system, always ensuring I stayed on the right trajectory.
Lastly, I want to extend my thanks to the amazing crewmembers I had the privilege to work with—Aaron Ooi, Justin Ar-Rasheed, Amy Pham, and Lindsey Kinzer. Each one of you added a unique constellation of knowledge and fun to this course, making the journey an enriching and enjoyable experience.
Thank you all for being a part of my design voyage, and for making it an expedition I'll always cherish.