Shift Shuddle A Design System
Hello And Welcome 👋
As part of the Dribbble scaling design systems, our team had the opportunity to work on a large-scale design capstone project with client. Our objective was to apply all our knowledge and skills and build a design system for a client's Interplanetary Travel brand called IPTS mainly focusing on space destinations.
Role: UI/UX Designer
Launched IPTS: The Interplanetary Travel Syndicate, a bustling transportation network that shuttles people from world to world within our galaxy.
Timeline: Three Weeks
Deliverable: Three responsible websites, mobile and a design system.
Overview
The Capstone Challenge:

In phase 1 of our capstone project, we aimed to create three ecosystems for distinct products for IPTS: IPTS.org, IPTS Travel, and IPTS Rail, with each product requiring at least five different components.
In phase 2, we demonstrated the value of the design system by updating the components to reflect the new branding for "Shuddle," and provided design guidelines, components, and tools to support the rebranding efforts.
The Process: Phase 1
The IPTS client provided our team with only a logo and no other brand assets. The idea of a space theme to guide our exploration. Our process began with researching the products we would be creating, including:
IPTS.org: A platform for current news and updates about the space program.
IPTS Travel: A travel service offering tourist/holiday packages to visit other planets and promotional deals.
IPTS Rail: A transportation service providing location and time travel options for planning journeys using public transport schedules.
Research
Our research aimed to analyze how other industries in the same field use similar tools and themes to attract and engage users in the space ecosystem, whether it be for news consumption, travel, or public transportation. To gain inspiration and understanding, we analyzed current pages and design trends.
Our goal is to finalize the wireframes and create potential design solutions based on the guidelines we have developed. We will work closely with the developers and the project team to ensure that our design system is practical, efficient, and aligned with the overall vision for the IPTS ecosystem.
Wireframe
Our goal is to finalise the wireframes and create potential design solutions based on the guidelines we have developed. We will work closely with the developers and the project team to ensure that our design system is practical, efficient, and aligned with the overall vision for the IPTS ecosystem.
To determine which components to include in our design system, we first reviewed the wireframes we created for the three IPTS products: IPTS.org, IPTS Travel, and IPTS Rail.
We looked for common elements across the wireframes and identified several components that were present in each product, such as the header, buttons, card gallery, input, and footer.
Next, we conducted a UI/Component audit to evaluate the usefulness and effectiveness of each component. We tested each component in various scenarios and analysed how they worked together to create a cohesive user experience. Based on this analysis, we refined the components and finalised our list of five core components.
Overall, our approach involved a combination of designing the experiences first, reviewing wireframes, and conducting a UI/Component audit to ensure the components we included in our design system would be effective in creating a seamless user experience across all three IPTS products.
Design process
It was time to start building the style guides, which would include the fonts, typefaces, and the 5 components - header, buttons, card gallery, input, and footer.
These components were carefully chosen to align with the branding of the 3 products. Our design team worked on creating a consistent look and feel for each component, ensuring that they were practical, efficient, and visually appealing. This was an iterative process, and we worked closely with the Hot Potato project team to ensure that the components met the project requirements and vision. Overall, this was an essential step in ensuring a cohesive and effective design system for the IPTS ecosystem."
After completing the design system for IPTS, we were able to use the guidelines and components to build our three website products: IPTS.org, IPTS Travel, and IPTS Rails. By utilizing the components and guidelines established in the system, we ensured consistency and alignment with the overall vision for the IPTS ecosystem.
Here you can see the website was designed to be responsive, which means that it is optimised to work well across a range of devices and screen sizes. However, we realised that our users may want even more flexibility with our components.
To address this, we created mobile versions of our website, which provide users with a more user-friendly experience, regardless of the device they are using. This allows our users to access our content and engage with our features seamlessly, regardless of the device they are using.
________________________________________________________________________________________
Then SHIFT came........
After receiving feedback from the IPTS client and their decision to rebrand as "Shuddle," we entered into Phase 2 of the project. We quickly adapted to the new direction and developed a new design system that reflected the brand's fresh, photography-focused lifestyle and appeal to a younger audience. This involved creating sorted libraries and style guides with detailed instructions for their use to ensure consistency across all components and products.
As a result of the rebranding,
IPTS.org became "Shuddle World,"
IPTS Travel became "Shuddle Visit,"
IPTS Rails became "Shuddle Ride."
During the project, we set up our Figma files to easily update branding guidelines, which made the transition to the new brand identity of "Shuddle" smooth. We leveraged the insights we gained throughout the design process to strategise the changes needed to align with the brand's fresh, photography-focused lifestyle and appeal to a younger audience.
Our design system and components:
Our design system and component libraries were updated to reflect the new branding, ensuring consistency across all products and components. The process of adapting to the new brand identity was seamless and allowed us to deliver a final product that fully aligned with the client's vision for Shuddle.
Final products for Shuddle
In addition, we were mindful of designing our products with mobile devices and screen sizes in mind to ensure optimal user experience across all devices. To further aid in accessibility, a link to the Figma file is provided at the end of this session for users who need to zoom in.
________________________________________________________________________________________
Documentation
After completing the design process, we needed to create a comprehensive design system documentation. To achieve this, we utilized Zeroheight, a tool to document our design components, guidelines, and assets. This documentation ensures consistency and efficiency in the design process, making it easier for future updates and collaboration among team members.
In the documents, we provided resources for everyone to read through the design process by using a library that helps understand and become familiar with the components used in the Shuddle products.
Conclusion
The Shift design system was developed for Shuddle (previously known as IPTS) as a centralised library of design components, guidelines, and assets. This system ensures consistency in the design process and simplifies future updates and collaboration among team members.
By using the Shift design system, Shuddle can maintain a cohesive brand identity and provide a seamless experience for its users across all products. The design system also enables the team to efficiently create and iterate on new designs while reducing the potential for errors, making it an essential tool for Shuddle's continued growth and success in reaching its target audience.
________________________________________________________________________________________
Key takeaways
This capstone project was both fun and challenging, but ultimately a great experience. Working with the team to create a comprehensive ecosystem from start to finish was rewarding. Building a design system requires thinking through every detail to create a library of components that improves the overall design process. It's not just about building a structure, but also providing a foundation for people to learn about the design system.
________________________________________________________________________________________