Tarthis: Connecting users from world to world through Shuddle.
Welcome to Shuddle, the rebranded Interplanetary Travel Syndicate, designed to transform the way we explore our galaxy.
In this case study, we'll delve into the creation process behind Shuddle's three key products – Shuddle.world, Shuddle Visit, and Shuddle Ride with Tarthis: a comprehensive system that provides a consistent visual language and user experience.
Discover how a robust design system help me build three solid MVP products and then iterate them to merge with a vibrant new brand identity that breathe life into these platforms, creating a cohesive and user-friendly experience that appeals to a younger demographic, while embracing a new era of interstellar adventures.
Join me as I take you on a journey through the stars with Tarthis my capstone project for Dribbble's Design Systems Course — Dan Mall
Role
As a seasoned Frontend Developer, I took on the role of "Head of Digital" for the capstone project to broaden my perspective and deepen my understanding of the design process.
My goal is to bridge the gap between design and engineering more effectively and ensure a smooth, efficient collaboration between these two disciplines.
During the project, I actively engaged in multiple design tasks, learning about design processes and tools that helped me develop a deeper understanding of the designer's perspective.
Objective
The three products displayed above represent the culmination of my capstone project journey: Tarthis, a comprehensive design system created specifically for the Shuddle brand that can be use acrros the organization to build new experiences.
The process of developing these solutions was far from straightforward; it involved a month-long iterative journey filled with numerous design decisions and unexpected changes along the way.
The Approach
Taking a hands-on approach, my initial brief introduced us to the IPTS: the Interplanetary Travel Syndicate, a bustling transportation network that shuttles people from world to world within our galaxy.
As the Head of Digital, I was responsible for building three distinct platforms: ipts.org, an informational website; IPTS Travel, a website where users can browse and book trips within our galaxy; and IPTS Rail, a real-time updated app for checking trip schedules and details.
Discovery
During the Discovery phase, I conducted a thorough exploration of various competitors and similar products to draw inspiration and insights.
By creating an inventory of these products, I was able to start planning the potential wireframes, structure, and shared components required for our own services. This competitive analysis helped us identify best practices and opportunities for innovation within the IPTS platforms.
Following this analysis, I ended up establishing a set of design principles to guide the entire process and provide a clear framework for decision-making.
These principles served as essential constraints while designing the multiples products, ensuring that the selected components for Tarthis were built on solid foundations
Feel free to take a look into my discovery FigJam file to understand the nuts and bolts of those foundations.
IPTS final designs
I crafted high-fidelity landing pages for all three websites from start to finish. The challenge lay in designing each page to be unique while still maintaining a cohesive identity within the same ecosystem.
In line with the course's teachings, I made a conscious effort to share my work publicly and sought feedback from colleagues and friends. This collaborative approach facilitated a dynamic, iterative process that enabled me to address early design flaws and refine the components being created.
By embracing this "self hot potato" approach, I was able to ensure that the final designs effectively captured the essence of the IPTS brand while meeting the diverse needs of each platform.
80/20
During an early design iteration, I noticed that the extensive use of the same card component for various features diminished the visual identity of each product, causing them to appear overly similar.
To address this, I decided to create a unique component for each product that would emphasize one of its key features.
While these specific components would not be included in Tarthis, they would exist as reusable elements within each product's individual library.
This approach allowed me to strike a balance between maintaining a unified design language across platforms and highlighting the distinct qualities of each product.
Oops! Meet Shuddle!
Embracing Change
In the midst of the capstone project, I was presented with a significant update that would impact the different products on multiple levels.
"Your leadership at the IPTS—the Interplanetary Travel Syndicate—just hired the prestigious branding firm MegaBrand to do a rebranding of the entire organization, and there are a few things that’ll affect the three products you’ve been working on.
MegaBrand discovered through focus groups that the IPTS name and logo felt very ominous, like it was cold, faceless corporation that was always watching. (“The eyeball-shaped logo doesn’t help,” said one candid participant.) In addition, the IPTS wants to appeal to a younger demographic.
After weeks of research and exploration, they’ve settled on the new name “Shuddle,” which feels more like a cool, new startup."
Undeterred by this development, I was confident that my Design System was robust enough to accommodate the new colors, typography, and design guidelines.
Thus, I integrated the new branding elements into the products, demonstrating the versatility and adaptability in the face of change.
Iterate, iterate, iterate
This immersive experience allowed me to gain a deeper understanding of the complexities involved in design work and the obstacles designers encounter in their daily tasks.
Initially, the requested changes seemed slightly overwhelming, but as I began tackling them, I was surprised at how easy and fast it was to update the components. The process was actually very similar to using CSS variables and component properties in frontend development, resulting in a smooth and enjoyable experience.
This approach allowed me to have more time to iterate on crucial aspects and reconsider some of the decisions made earlier in the project.
Reference Site
Throughout the entire process and various iterations, I maintained an up-to-date reference site to document the development of the products. It was exciting to discover the challenges associated with making this type of documentation engaging for the diverse range of users who may visit the site.
For instance, in this case study, where I detail the construction of the Shuddle.world landing page, you'll notice that each section features a summary image. These visuals enable experienced designers to quickly grasp the essential aspects of the implementation.
Simultaneously, I've ensured that these images are accompanied by more fundamental explanations for those who may be less experienced in the field. This approach caters to a wide audience, providing valuable insights for all levels of expertise.
Closing Remarks
Throughout this capstone project, I embarked on a journey that provided invaluable insights into bridging the gap between design and engineering, with the ultimate goal of fostering efficient collaboration between these disciplines.
Learnings
Creating the Tarthis Design System proved to be a powerful tool in ensuring consistency and cohesion across the Shuddle platforms.
It allowed myself to navigate unexpected challenges, such as the rebranding from IPTS to Shuddle, while maintaining a clear focus on delivering accessible, user-friendly designs.
Some key learnings I would like to highlight are; the importance of stick to the established design principles, being open to iterative design processes, and embracing the value of feedback from colleagues and friends.
By maintaining a flexible and open-minded approach, I was able to effectively respond to change and refine the designs to better serve the users.
Next Steps
I would love to continue to leverage the engineering perspective in the design processes, seeking new ways to improve the collaboration between designers and developers.
This capstone project will serve as a foundation for future projects, allowing me to explore how to work closer with designers and other disciplines, establishing new strategies and patterns to work from end to end. There are many aspects that I would definitely be interested in exploring, such as:
Sharing properties' nomenclature strategies. We can all follow rules for the different types, such `showIcon` for visibility properties, or `isFeatured` for Boolean, etc.
Name layers based on some framework, for example BEM, so we can share layers and classes nomenclature.
How to keep and track consistency in any established ruleset for naming component properties or layers, through Figma.
Identify when a component has reached a complexity that might affect the development.
Keep working to evangelize both ends to work more close together to create better environments and more cohesive teams that can iterate faster and further any product
This case study helped me to understand the powerful synergy that can be achieved when design and engineering work in harmony, ultimately leading to innovative, user-centric solutions that push the boundaries of what's possible in the digital space.
Resources
Visuals for shuddle Visit: Figma
Visuals for shuddle Ride: Figma
Tarthis Design System: Figma
Reference Website for Tarthis: ZeroHeight