summary

Building design systems & redesigning a space travel agency's website.

Project Role

Product Design

Timeline

September - November 2023

Disciplines

Design Systems, Interface Design

Collaborators

Dribbble Education

Intro

The Question

"How can I utilize design systems to efficiently and professionally conduct rebranding and redesign intiatives?"

Overview

In October 2023, I took a design systems course through Dribbble Education that shifted my perspective on scalable design. We were first asked to design three websites for a fictional space traveling agency, Inter-Planetary Travel Services (IPTS), based on a simple set of brand guidelines. At the same time, we built a shared design system for the websites, collecting the most-used components and assets.

The real magic happened when we were asked to redesign and rebrand the entire IPTS product suite, this time letting the design system do most of the work. Through this process, I saw how powerful a well-structured design system can be.

Design Process

Process

Creating IPTS, a design system, and using the design system to complete an efficient redesign.

Process

Exploring Design Systems and IPTS

‍

The first half of the course was all about understanding design systems theory. I learned that design systems aren’t simply libraries or rulebooks; they’re living documents that grow and adapt alongside the product and the team using them.

‍

At the same time, we were given our first big assignment: to design three websites for IPTS, a fictional space travel agency. With only a logo and a few brand cues, I imagined the visual identity as “Analog Futuristic”, inspired by the slightly retro feel of early NASA branding, paired with the modern minimalism of Tesla and SpaceX. The result was a cinematic, scroll-driven experience that captured both the nostalgia and excitement of space exploration.

‍

Process

Creating The Design System

‍

As I designed the IPTS websites, I also began collecting recurring elements into a design system, using Figma for the component library and ZeroHeight for documentation.

‍

This process taught me that building a design system is as much about decision-making as it is about design. I started to ask questions like: When does something deserve to become a component? How do I enforce rules while maintaining flexibility? Over time, I found that a good design system isn’t just about consistency, it’s about creating a framework that empowers creativity rather than restricting it.

‍

Process

Rebranding: The Design System in Action

‍

Midway through the course, we were told that IPTS was rebranding. The new identity, called Shuddle, traded the futuristic, space-age look for something brighter, playful, and more modern.

‍

Because the design system was already in place, it did much of the heavy lifting by updating styles, tokens, and components automatically across pages. Within just one hour, I had transformed the IPTS products with new branding that was distinctly Shuddle (as shown below). Suddenly, the power of design systems became abundantly clear to me; by taking care of the repetitive details, it gave me the freedom to spend my energy on experimenting and crafting more meaningful, expressive experiences.

‍

Results

Solutions

An overview of the results of using the design system and the lessons that I learned along the way.

Results

Faster Production, Smarter Design

One of the biggest lessons I took away from this project was realizing how much time I saved by using a design system. I was amazed by how quickly I was able to build Shuddle despite it's branding interpretation being so different from that of IPTS. Creating the original IPTS sites took me about two and a half weeks, but the process of creating Shuddle took less than a week. That’s more than a 50% reduction in production time.

Having a solid design system in place made some of the foundational aspects of interface design trivial, which gave me some wiggle room to experiment with creative details when designing Shuddle.

Results

The 80-20 Rule

The next major lesson I took from this project was finding out that so much creative freedom is unlocked when there's a solid underlying structure in place. Instead of spending hours rebuilding pages and components for Shuddle, I was able to spend that extra time focusing on more exciting things like refining visuals and testing new ideas.

Our instructor called this the “80/20 rule”, a take on the Pareto Principle based on design systems: with a strong system in place, 80% of a product can be built with just 20% of the effort, freeing up the remaining 80% of your energy to push boundaries and explore the final 20% creatively.

Results

Enduring Consistency

The final (and perhaps most lasting) benefit I discovered was how design systems create longevity. People come and go, projects evolve, priorities shift, but a well-maintained system keeps everything grounded in a shared design language. With a strong design system, a product's consistency isn’t dependent on any one designer’s whims or style, it's built into the very foundation of the work.

Design systems also bridge the gap between design and development. With tokens, variables, and components clearly defined, updates become seamless, which keeps designers and developers working in sync.

Case Study

This experience showed me that a good design system doesn’t just streamline production, it amplifies creativity. Seeing how drastically the IPTS site transformed within the first hour of rebranding sold me on the power of design systems. Since then, I've incorporated the lessons I've learned from this course into almost every project I've worked on. Moving forward, I want to keep building or contributing to design systems that empower teams and products to both maintain consistency and unlock creative power.

View case study

Up Next

Powell's

Check if this link is set