Overview

This is the final work for the course Scaling Design Systems with Dribbble. The work will show the important role a design system plays to save time and effort when there is a design update. Or in this case - spoiler alert - a rebranding.

Project Brief:

The task was to design three products all for the fictional company of IPTS: the Interplanetary Travel Syndicate. The company is a bustling transportation network that shuttles people from world to world within our galaxy. From there, I created a design system from commonly used components that linked to all three sites.

But wait... Surprise!

There was a rebranding of the entire organization including logo updates for different sites, colors and text style. It was also renamed Shuddle.

Deliverables:

• Hohmann Design System which is the result of rebranding the IPTS to Shuddle. This includes a reference site for it.

• Three pages for the following products which were originally designed in a style for IPTS:

  • Shuddle News: an informational website where users can find the latest news and happenings with Shuddle.

  • Shuddle Visit: a website where users can browse and book travel to and from multiple destinations within our galaxy.

  • Shuddle Ride: a realtime-updated web app where users can view lines, routes, and times for all different commuter lines, like the NYC subway or the London Underground, but for interplanetary travel.

Duration: 2 weeks

My Role:

I was the only designer on the project meaning I designed the three pages, created a design system, created a reference site and rebranded IPTS to Shuddle.

Process

Designing the Product

As we learned in this course, the first step to a design system is having a product to create one from. Starting a design system based on the most often used components is a great way to begin a system and have it actually be used.

Since I was the only designer, I used ChatGPT to quickly explore key features that should be included. From there I wireframed and did a quick mood board to flesh out some visual ideas before jumping in.

As a note, any photos featuring an astronaut in orange are the amazing work by Andrew Studer.

Components

Once the pages were designed, there were common components amongst them which I included in my design system:

1. Buttons

2. Cards

3. Footer

4. Input Fields

5. Navigation Bar

I utilized auto layout and variants to create smooth functioning components. Naming conventions (i.e. State=Enabled) helped form clear options for components like buttons.

I did end up going back to change the button colors to keep all the states accessible. It was an important reminder to keep accessibility standards in mind from the beginning.

Here's the work in progress components (later I arranged them to the formatting you see from the Figma library):

Houston, we have a problem... (if you don't have a design system anyways)

A rebrand was announced with all new colors, logos, text styles etc. IPTS will now also be known as Shuddle. This is where a design system shines since it simply a matter of updating text and color styles in Figma, adding in the new logos for instance swaps, publishing the library, approving the updates in the designs and voilà.

Granted, I did some tweaking as I went but the use of the design system expedited the process. For instance, the font required was IBM Plex Mono. It was a little larger than the previous font I selected so I adjust some font sizing of styles. For the purposes of this project, I mainly focused on keeping the changes efficient and didn't further adjust the visual design as I might have otherwise.

Check out the before and after of one page below. The before is on the left and the after is on the right. Try it out for yourself here.

Reference Site

I built a reference site using zeroheight which I titled Hohmann (find out why it's called that in the introduction). It includes the deprecated styles from IPTS and the new Shuddle styles. This process is made simpler by zeroheight since I could link my Figma library file directly to zeroheight.

Another important principle from the class was to chronicle not document. This means recreating pages and noting successes and pain points. Then writing out the helpful tips and tricks so another designer can quickly use the design system. I chronicled making the Shuddle World Homepage. I also integrated some important tips of how to use different components on their respective zeroheight pages.

Before & After

Here's the final designs for IPTS and after for Shuddle.

Key Takeaways

• There were great lessons learned throughout the course, primarily for processes and adoption tactics. One being the 80/20 rule. That states that around 80% of any products you need to create can be done with 20% of the normal effort because you can leverage the design system. That frees up 80% of your time to make things that need to shine. In short, a design system can do the standard work leaving time for you and your team to get creative.

• Chronicling the design system from the perspective of who will be using it is a great way to improve adaptability since it becomes more usable.

Altogether, I enjoyed the course and all the other learnings it provided!