About the course

I took Dribbble’s 8-week Design System Course with Dan Mall. This is a course that teaches you everything you need to know about creating a design system. The course was a mix of video lectures, live mentor sessions with industry experts, weekly assignments to practice what we’ve learned, resources for further exploration, and more! The last two weeks were spent crafting a design system for the course’s capstone project. Keep reading for more.

The Capstone Project

The set up

Humans have desecrated planet earth to the point that it’s inhabitable for most. The newly launched IPTS (Interplanetary Travel Syndicate) is a bustling transportation network that shuttles people from world to world within our galaxy. They have brokered a deal with the Guardians of the Galaxy and they’ve agreed to let earthlings co-exist with them in the galaxy.

As the Head of Digital for the IPTS, I’ve been tasked with launching an experience that will provide earthlings with info and services to book shuttles to outer space.

Ok ok ok....

So naturally there would be research to help us understand our problems and possible solutions, but for the sake of this course, we were already given the problem and solution. So let’s move on...

What's the problem?

We have new digs and IPTS has already started the production of space shuttles for transportation. However, earthlings have no way of booking their travel to the planets. Space travel is fairly new and most earthlings do not know how interplanetary travel works.

What's the solution?

We at IPTS, and by we I mean I...I will be launching 3 unique offerings(s) that will provide earthlings with info and services to book shuttles.

AI for the win...ChatGPT

ChatGPT is a trained a model which interacts in a conversational way. It can chat with you, answer follow-up questions, and challenge incorrect assumptions. I used ChatGPT to help me figure out what features I would need for my 3 offerings.

Let's start by probing for IPTS .org

Since IPTS .org is an informational site, I decided to treat this like a marketing site. People come here for information rather than for booking travel. So I started by asking ChatGPT “What info do i need for a space travel site?”

Next let’s ask about IPTS Travel

IPTS travel is a booking site (much like Orbitz or Expedia). People will come here to input travel dates and destinations and view pricing and travel times and eventually book their shuttle. So I asked ChatGPT “What features are needed to book outer space travel?”

And lastly, IPTS rail

IPTS rail is meant to be a real time updated web app that has routes, lines and times for commuted trains. The first thing that came to mind when I hear this description is New York's MTA subway system OR something more widely known, Amtrack.

Let's start wireframing

IPTS org

Based off of what ChatGPT spat out I know I’ll need destination info, travel requirements, safety protocols, equipment info, crew info, testimonials, FAQs, contact info, travel itineraries and costs.

I used the AI to determine what the navigation will be for the .org site. But modified the navigation by combining Contact into FAQs and combining Safety and Requirements. I removed testimonials as a nav item. I feel testimonials would make sense at the bottom of the homepage rather than it’s own page. I left out travel itineraries and costs since they will be covered in the UX for IPTS Travel.

IPTS Rail

I created wireframes based off of what features ChatGPT gave me for booking outer space travel. However, I've also used sites like Orbitz enough to know what features I need to include. I put together these wireframes using using screenshots from Orbitz.

IPTS Rail

I created wireframes based off of what features ChatGPT gave me for booking train travel. At first i thought However, I've also used sites like Orbitz enough to know what features I need to include. I put together these wireframes using using screenshots from Orbitz.

Moodboard

Since we are traveling to outer space it's only right that we stay on theme. Anyone who knows me, knows I LOVE sneakers and I wholeheartedly believe there's a sneaker for EVERY occasion. This capstone project immediately made me think of the Nike Foamposite One NRG Galaxy. I used it as inspiration for my moodboard.

The moodboard showcases colors, typography and type lockups, logo, a button, composition of imagery, icons and additional elements such as gradient rings.

Heading

Even while working on the wireframes for IPTS, I could already see shared components: buttons, copy and image lockups, cards, logos and links. Instead of working on one offering at a time, I worked on all three at the same time in order to get a bird's eye view. It made it easier for me to set up my component library.

I started with colors (based on my Nike sneakers), buttons and cards, row layouts, cards, icons and selection controls to name a few.

The true test of the design system

For the last week of the Dribbble Design System Course, we were thrown a curve ball.

Leadership at the IPTS—the Interplanetary Travel Syndicate—hired the prestigious branding firm MegaBrand to do a rebrand of the entire organization.

MegaBrand discovered through focus groups that the IPTS name and logo felt very ominous, like it was a cold, faceless corporation that was always watching. (“The eyeball-shaped logo doesn’t help,” said one candid participant.) In addition, the IPTS wants to appeal to a younger demographic.

After weeks of research and exploration, they’ve settled on the new name “Shuddle,” which feels more like a cool, new startup.

The color palette is fresh and vibrant, and the identity relies much more heavily on photography of younger people to feel more welcoming and inviting.

The 3 main products have also been renamed to feel more like a family of products instead of independent offerings:

1. “ipts.org” is now “shuddle.world.“

2. “IPTS Travel” is now “Shuddle Visit”

3. “IPTS Rail“ is now “Shuddle Ride“

Understanding the new branding

I first tried to understanding the differences between my current designs and the new brand.

1. I noticed the new imagery.

2. New colors, logo and typography. I also realized i had a floating carousel and overlapping imagery in my initial designs which i don't think made sense with the new branding.

3. In the new brand everything seemed more "flat". A lot of things had rounded edges but with the new brand, everything was squared off except the CTAs.

Problems I faced with new branding

For the most part, it was easy to update the design system. There were very few components that needed to be completely redesigned for the sake of the new branding.

However, there's a green and red in the new color palette that i wasn't sure how to fit into my designs considering how red and green clash with the new purple CTA.

The biggest problem was the new typography. The headlines became a serif font and the body copy was monospace which made everything bigger and wider and caused the layout to adjust for most components.

Adding to the design system

I had to add dark mode version of some components to the design system to account for a dark color palette of the new branding which uses lots of navy.

Take aways

Overall I truly enjoyed this course. I enjoyed working with people from different backgrounds and from different parts of the world.

The importance of code

Something I learned which is not on display in this case study is how helpful it is to understand front end. Taking the time to dig into code helps to bridge the gap between design and engineers.

Deviating from the system

So many designers (including myself) think that design systems are bible and they are the end all be all...but I learned the importance of deviating from a design system in efforts to be innovative or spark creativity when needed.

Chronicling

Documenting components is one thing but chronicling how they are used was new to me. But it makes perfect sense. It's important for a design system to cover how a component should be used and the steps to make the component work for the needs of the person using it.