Shuddle: Design Systems

Background

This is a fictional project for Dribbble's Design Systems course.

There are 2 phases for this project. Phase 1 was released a week before Phase 2.

Overview

Phase 1

As Head of Digital for the newly launched IPTS: the Interplanetary Travel Syndicate, a bustling transportation network that shuttles people from world to world within our galaxy, leadership has decided to launch with 3 unique offerings, which are:

  1. ipts.org, an informational website where you can find the latest news and happenings with the IPTS

  2. IPTS Travel, a website where you can browse and book travel to and from multiple destinations within our galaxy.

  3. IPTS Rail, a real-time updated web app where you can view lines, routes, and times for all the different commuter lines.

Each website has to be at least 1 page, but each page has to have at least 5 components on it. A design system will likely help with this effort.

Chronicling along the way and making a reference site for the design system would help the next person who has to launch these three products know exactly how to do it.

Phase 2

Leadership at the IPTS—the Interplanetary Travel Syndicate—just hired the prestigious branding firm MegaBrand to do a rebrand of the entire organization, and there are a few things that’ll affect the three products.

MegaBrand discovered through focus groups that the IPTS name and logo felt very ominous, like it was cold, faceless corporation that was always watching.

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.

Process and Deliverables

Phase 1

  1. Competitor Analysis

  2. Styles

  3. Visual Design

  4. Components

  5. Reference Site

Phase 2

  1. Styles

  2. Components

  3. Visual Design

  4. Reference Site

PHASE 1

Competitor Analysis

Since I had to design 3 unique website products, it made sense to start off with analyzing competitors for inspiration across 3 categories: News, Travel, and Commuter. Although I took some screenshots from different competitors, I still referenced some of them by revisiting their sites. Due to the scope and time for this project, I decided to analyze and design landing pages only.

News

I focused on finding which layouts of how content is presented that I thought were visually engaging. Considered factors were varied type size and layout.

Travel

I looked at input fields where user searches for a destination, and cards showing destinations. Specifically, I took note of what and how content is presented.

Commuter

I explored what features and sections are shown for ideation. I noticed things like planning a trip, latest updates, and upcoming events.

Styles

Color, typography, and grid were setup in advance to save time and cover what I needed for my design.

Color

For simplicity, I decided to use a neutral palette only. Also, this thematically and logically works for a space related product. To create my palette, I copied Tailwind's Slate palette from their colors page. Every color is the same, except for the darkest one (1000), which was adjusted slightly.

Typography

For font, I chose Space Grotesk for headings and Space Mono for the rest since they seemed appropriate and fitting for a space related product. The scale setup is somewhat similar to how Material 2 Design approaches type scale.

Grid

Since I decided to design for desktop, I created a grid style for 1440px width with 64px margin and 32px gutter. Vertical spacing is 8px.

Visual Design

To determine what components to create for a design system of IPTS, I designed the landing pages for all 3 websites in high-fidelity from start to finish. The challenge was to design each page to be distinct from each other while also belonging together under the same ecosystem.

My design process was creating 1 section at a time from one page to another. For example, I started with headers across all pages, and then with hero sections in the same manner.

Components

After finishing the visual design, I was able to determine what components to create for the design system. The criteria was if something was repeated at least 3 times either on the same page or different pages, it should be a component. There were a couple of "deviations" to the rule, but were complex enough to justify the need for them to be components too. These were the destination picker for IPTS Travel and the rail menu for IPTS Rail.

After creating components, I replaced most of my design with instances of them.

Reference Site

To ensure designers can redesign any of these pages, I chronicled my process with a design system documentation tool called zeroheight.

Check out my reference site for the IPTS Design System. Each of the designed pages can be found under the "IPTS WEBSITES (ARCHIVE)" category.

PHASE 2

Styles

Color and typography were provided for the Shuddle rebrand.

Color

The color palette is fresh and vibrant.

  • Midnight replaced the darkest variations of neutral

  • White replaced Neutral 0

  • Marina was applied to text in the footer

  • Amethyst was the button color

  • Apricot was applied to divider lines

Typography

The typographic palette relies heavily on the IBM Plex superfamily (IBM Plex Serif and IBM Plex Mono) to both give a wide range as well as make everything feel familiar.

  • IBM Plex Serif replaced Space Grotesk for Headings and Subtitles

  • IBM Plex Mono replaced Space Mono for Body, Button, and Label

Components

Since visual design was completed for IPTS, components were applied with new color and typography. Corner radius was curved for specific components like cards as an example for rebranding purposes.

Visual Design

After changing styles and components, I redesigned all 3 website landing pages to reflect the Shuddle rebrand.

  • Logo was changed

  • Some images were swapped for photos of younger people to feel more welcoming and inviting

  • Some written content was edited

Reference Site

The same reference site has been updated with documentation pages for Shuddle websites. Check them out under "SHUDDLE WEBSITES" category.

Conclusion

This was a challenging, yet rewarding project to work on for a design system course. There was a lot of room for creativity in approaching a process. The only thing I would have done differently is to start creating components earlier as I was designing, instead of waiting after finishing all the pages for efficiency.

Successes

  • Designed 3 distinct, yet harmonious website landing pages

  • Created required amount of components for all 3 website products

  • Documented my design process via chronicling on a reference site

  • Updated my styles, components, and design for Shuddle rebrand with ease

Challenges

  • Adding enough and varied content for each product

  • Designing 3 unique, yet similar website landing pages

  • Creating enough components for different website pages

  • Naming some components that aren't typically seen in a design system

  • Finding the right images that work appropriately for Shuddle rebrand

Lessons

  • Applying styles ahead of design saves time and enforces consistency

  • Designing section by section across different pages helps determine what components should be created

  • Writing down the successful path in designing a page is the best way to setup designers to follow along

Next Steps

  • Ask a few designers to see if they can successfully redesign any of the 3 website landing pages from my reference site

  • Edit my reference site as needed based on designers' experience and input

More by Lawrence Tang

View profile