Intro

In my role as the Head of Digital at IPTS, the Interplanetary Travel Syndicate, a thriving intergalactic transportation network facilitating travel across various planets in our galaxy, I was tasked with the creation of three distinct websites, each offering unique features and services.

Project Overview

In Phase 1, the goal was to create three distinct ecosystems for IPTS, namely IPTS.org, IPTS Travel, and IPTS Rail. Each ecosystem requires at least five unique components. Our journey began with limited brand assets—a logo—and the concept of a space theme to guide me.

Research

The research delved into how other industries in the space field engage users, whether for news consumption, travel, or public transportation. This involved analyzing existing pages and design trends to gather inspiration.

To streamline this process, I've established a design system in Figma. This system will seamlessly integrate with all three products, reducing my workload and enabling swift updates across the entire product line.

Wireframes

To determine which components to construct, I first needed to define the structure and architecture for each product. This approach helped me pinpoint the essential components.

To guide this process, I applied a principle learned in my course, which advocates that an element should be transformed into a reusable component if it's used three times or more.

Component Selection

Through a comprehensive review of wireframes, I identified common elements like headers, buttons, card galleries, inputs, and footers. A UI/Component audit refined these components, resulting in a set of five core components.

Design Process

Next, I developed style guides encompassing fonts, typefaces, and the core components— header, button, card gallery, input, and footer. These components were tailored to align with the branding of IPTS's three products. Close collaboration with the project team was key to achieving a cohesive design system.

Rebrand to Shuddle

The leadership at IPTS, known as the Interplanetary Travel Syndicate, has recently engaged the prestigious branding agency MegaBrand to undertake a comprehensive rebranding of the organization. This rebranding effort will have implications for the three products I have been actively involved with.

MegaBrand conducted extensive research, including focus groups, which revealed that the IPTS name and logo were perceived as somewhat foreboding, giving the impression of a cold and impersonal corporation that was constantly surveilling. After weeks of dedicated exploration, they have arrived at the new brand name, "Shuddle."

The new branding incorporates a typographic palette prominently featuring the IBM Plex superfamily.

Rebranding Highlights

• IPTS.org became "Shuddle World."

• IPTS Travel became "Shuddle Visit."

• IPTS Rails became "Shuddle Ride."

Documentation and Conclusion

Following the design process, comprehensive documentation was created using Supernova, streamlining future updates and team collaboration.

The Cosmic Craft design system empowers Shuddle to maintain a cohesive brand identity across its products. It facilitates efficient design creation and iteration while minimizing errors—a vital tool for Shuddle's growth and success in serving its target audience.

Key Takeaways

This capstone project was both enjoyable and challenging, offering a rewarding experience. Building a design system involves meticulous attention to detail, creating a foundation for understanding and using the system effectively.

Rebranding entails more than just altering colors and typography; it involves establishing a new style, adhering to color rules and their combinations, ensuring harmony among page elements, maintaining a consistent voice and tone, and addressing numerous other aspects. While a design system expedites the implementation of some modifications, a complete overhaul of products is often necessary to fully integrate all these changes.