This project is conceptual and was created for educational purposes as part of the Dribbble Scaling Design System course by Dan Mall.

Project Overview

Intro

Shuddle is a futuristic transportation company that offers intergalactic travel to destinations within our galaxy. The company provides various services, from interplanetary flights to rail travel and shuttle services. With a mission to make interstellar travel accessible to everyone, Shuddle approached us with a challenge: to create a design system that reflects their brand values, personality, and vision for the future.

In this case study, we'll take a deep dive into the process of creating the Shuddle design system, exploring the challenges we faced and the solutions we implemented to create a cohesive, effective, and visually stunning design system.

The Challenge

Shuddle, formerly known as IPTS, is a transportation network that shuttles people from world to world within our galaxy, wanted to create a consistent and cohesive visual language across all digital properties. The company needs a comprehensive design system allowing consistency and scalability across all of their digital products.

The Solution

We developed a new design system with scalability in mind that could be easily adapted and updated to serve as the foundation for the company's digital properties. The Shuddle Design System consisted of guidelines and reusable components to ensure consistency and improve efficiency across the company.

The Impact

The Shuddle Design System has significantly impacted the company's digital properties. By providing a consistent visual language across all of its properties, the system has helped to improve brand recognition and user engagement. It has also streamlined the design and development process, allowing the company to work more efficiently and effectively.

By leveraging the power of the Shuddle Design System, the company has created a seamless and cohesive user experience across all of its digital properties.

My Role

UX Designer, responsible for brandings, designing three product pages, creating a design system with documentation, and chronicling the process. I benefited from AI technology as my co-pilot for this project.

• ChatGPT: Language model AI assistant, provided assistance in tasks such as generating copy, writing codes, writing prompts, and answering questions related to design and branding.

• MidJourney: Image generator tool, provided visual prompts and various futuristic and sci-fi-themed images for the project.

Starting the Project

Project Brief

Upon receiving the brief, I learned about the client and the scope of work which involved creating three websites for the Interplanetary Travel Syndicate (IPTS).

• The first website, IPTS-org, is an informational platform that provides users with the latest news and updates on IPTS.

• The second website, IPTS Travel, allows users to browse and book travel to multiple destinations within our galaxy.

• The third website, IPTS Rail, is a real-time web app that displays lines, routes, and times for all commuter lines.

• The client provided their product logos in black and white.

My Approach

The first thing I did was conduct a competitive audit; I searched websites with similar offerings and gathered some notes and information.

Then, I collaborated with ChatGPT, which provided valuable insights into the project. Together, we determined the essential features of each website and created a design guide. Our approach was to keep the design minimalistic, futuristic, and modern with a dark theme.

After analyzing the requirements for the three websites, we identified the target audience as millennials and Gen Z who love to travel and explore.

The Pilot

To kick off the project, I started with designing the first product, which served as a pilot project to create reusable components for the design system.

I began by creating some basic wireframes, and once I was satisfied with the layout and structure, I proceeded to build the first website.

My next step was to identify and create the necessary components, before that I added the color and typography systems to ensure consistency throughout the design.

Wireframes

Color and Typography System

Components

Pilot Product

Midway Mayhem and Big Changes

Halfway through the project, the client decided to undergo a rebranding effort and introduced us to their new name, logo, color palette, typefaces, and images. Each website has a designated color and logo.

As a result, I had to adjust the existing design system to make it more fun and approachable.

Introducing Shuddle

• Shuddle World

• Shuddle Visit

• Shuddle Ride

After reviewing the provided asset, I noticed that the new direction looked more friendly and fun, and my design looked minimal and serious. So, I had to make some modifications to the component, add the new logos, typeface and colors to the system.

Shuddle | Typography System

Shuddle | Color System

Shuddle | Components

Extracting And Abstracting

After the rebranding, I proceeded with developing the other two websites. This is where the value of having a design system becomes apparent, even with just a handful of components. I leveraged the existing design system, extracted the necessary components, and integrated them into the new websites.

Whenever a new component was required, I created it and added it to the design system for future use.

This ensured consistency across all three websites and made the development process more efficient.

All three Products | Shuddle World, Shuddle Visit, Shuddle Ride

Documenting Or Chronicling

Design systems typically include detailed documentation, but it can often be overwhelming or ignored by users. To make it more accessible and user-friendly, documenting the design process can be valuable for those utilizing the system. By chronicling our process and taking notes after each project milestone, we gave users essential information, such as tips and tricks, how to use the system, where to find components and other helpful insights in the reference site.

Conclusion

The result was a design system that successfully captured the Shuddle brand's spirit. By providing a consistent and scalable visual language, the system has helped to improve brand recognition, streamline design and development, and create a seamless and cohesive user experience across all of the company's digital properties.

Final Thoughts

What I Learned

Throughout this project:

• I gained valuable insights into the importance of effective collaboration between design, development, and product teams.

• I learned the importance of prioritizing working software over comprehensive documentation and the value of taking notes and documenting progress throughout the project rather than just at the end.

• Most importantly, I discovered the power and benefits of a well-designed design system, especially after significant changes like the ones we experienced during this project.

Next Steps

• I plan to deepen my knowledge of design tokens and naming conventions to enhance the design system's functionality.

• In addition, keeping the design system and reference site updated and maintained is essential to ensure its longevity.

• Finally, practice is vital to mastering any skill, and I will continue to hone my craft and improve my design skills.

Thank You