Note

This is the capstone project submission for Dribbble's Design Systems course, all material is fictional.

Project Overview

The Interplanetary Travel Syndicate our galaxy's leading transport agency, embarked on a journey to revamp its brand identity and user interface (UI) design. This case study walks through the process, and outcomes of the UI rebranding initiative that led to an enhanced user experience, increased brand recognition, and improved user engagement.

Key Features

As part of the major overhaul IPTS changed its name to Shuddle and launched three new websites. The general IPTS informational website ipts.org turned into shuddle.world, the inter galaxy travel portal iptstravel.org became shuddle.visit, and the commuter booking site iptsrail.org moved to shuddle.ride. To manage such a large-scale overhaul we decided to create the Solar Design System which would power all three products and future-proof Shuddle for fast growth.

Research

To start the process I conducted a comprehensive analysis of current UI elements and competitor designs. Identified pain points, user preferences, and design trends relevant to the industry. This helped identify patterns that the customers were already familiar with and that's what was used as the starting point.

Exploring Current UI Elements and Competitor Designs

Conducting a thorough examination of IPTS' current UI components and scrutinizing rival designs to extract insights. Immersing in industry publications, design forums, and emerging trends to identify modern design approaches and innovations in the travel sector.

Recognizing Familiarity

Discovering recurring patterns ingrained in user experiences, elements they instinctively recognize and engage with. Booking search boxes, real-time update windows, and more were shortlisted.

Wireframes

Before the design system began I needed to evaluate which components would be common across all websites. The fastest and most efficient way to achieve this was low-fidelity wireframes. What I learned at this stage was that along with the usual components such as buttons, navigation, etc, cards would take center stage in these sites.

IPTS Mockups

After the initial layout was finalized using wireframes I moved on to creating higher fidelity mockups for IPTS, IPTS Travel, and IPTS Rail. The design guidelines were open-ended so the colors and themes were trying to mimic a dark interstellar space look.

Building The Design System

Instead of the traditional approach where one would start by building a design system with components from scratch and then use them to create new apps/sites. I used Dan Mall's "Measuring Spoon Cycle" approach. Which essentially meant that the design system gets built after the products. In this approach, we identify the components that are repeated across products and bring those into our system. After which the components would be easily swapped in the live products with instances from our system.

Testing The System

While building the Solar Design System we got a major overhaul request from the client. IPTS was no more! The company was renamed to Shuddle and so were all the products. Although this was unexpected it came at the best possible time since it was the best stress test we could put our newly created design system through. If all was set up correctly we could replace the colors, typography, and components in the system, and all the changes should trickle down to the products automatically!

Shuddle Update

After updating the Solar Design System by removing all old IPTS styles and replacing them with the new Shuddle design guidelines we updated the library. This created a waterfall effect and updated all instances of the components wherever they were used.

Shuddle Products

Take a look at the final three Shuddle products

1. shuddle.world - Main source for all Shuddle information

2. shuddle.visit - Leading inter-galaxy travel portal

3. shuddle.ride - Real-time transit updates

External Links

• Solar Design System Reference Site

• Solar Design System Figma Library

• Shuddle Products Figma Link

Conclusion

The UI rebranding initiative undertaken by Shuddle (formerly IPTS) successfully revitalized the brand identity, leading to improved engagement, recognition, and business outcomes. By aligning design with user behavior and the company's vision, the project demonstrated the profound impact of design transformation on both user satisfaction and business success. The initiative also shows multiple benefits of using a design system, without which this same project would take almost 5x the time and cost the company a lot more.