Case Study: The "Stellar" Design System

A design system providing style guidance, typography, colors, icons & components for designers and developers to build a fictional set of websites.

Project Brief

Create a Design System to power 3 website under 1 company brand.
The Design System should include the following:
- Style Guidelines
- At least 3 UI Components

IPTS – The Company

IPTS (The Interplanetary Travel Syndicate) provides travel solutions to different places around the universe.
The 3 websites are:
- IPTS.org: An informational website where you can find the latest news and happenings with the IPTS.
- IPTS Travel: A website where you can browse and book travel to and from multiple destinations.
- IPTS Rail: A real-time updated web app where you can view lines, routes, and times for all commuter lines.

Getting Started

I felt it was important to first establish what each website should do by outlining their main purposes, main content, and any page elements that would support the content.

Research

After establishing a general idea of each site's purpose and content, I gathered screenshots from different websites that serve similar purposes and provide similar content. While auditing those sites, I recognized similar patterns, so I assembled a collage of screenshots for each pattern from these sites and noted what would and would not work for my products.

See my initial discovery notes.

Wireframes

To visualize the hierarchy of each page, I created wireframes. The wireframes informed the following:

The general layout of each page
The page sections that made up each layout
The components that made up each section.

Design

Styles

After wireframing, I created a palette of colors, typography styles and spacing rules to speed up my design process. The speed comes from the elimination of time spent making decisions. By making style decisions before designing, I don't have to make those decisions later, keeping everything quick and consistent. The best part is, the styles are saved and reused in the design, making it easy to switch out a color or style. Updating styles in one place cascades to all elements that reference the saved styles.

Process

I designed all sites at the same time with each page next to each other. This made it easy to:

Move/copy components from one site to another
Quickly see how changes to a component or style effects all sites

I would also update components while zoomed out to see all 3 pages in order to see how the updates affected each page simultaneously.

Information Widgets

The key purpose for each site is to provide information. I noticed similar solutions in my research for retrieving information, which led me to create a widget for each site that displays info or provides a way to search for info. These widgets share a common visual style and are positioned as the main focal point at the top of each site's homepage. The widgets are built with shared components, which grounds each site with a common visual and functional language and makes each site look like they belong to the same collection of resources.

IPTS Final Results

IPTS .org Homepage

IPTS Travel Homepage

IPTS Rail Homepage

IPTS Component Library (Figma)

Documentation

While designing each component, I made notes and took screenshots to help build out the documentation for the design system. The documentation provided guidelines for designing, and a reference for how to utilize the Design System's component library to its full potential. With documentation complete, I named the Design System "Stellar".

Check out the completed documentation.

REBRAND!

After finishing the IPTS Design System, it was time for a rebrand with a new set of colors, logos and type treatments. The company name changed from IPTS to Shuddle.

Fortunately, it was easy to quickly switch everything out because everything was saved as a style or component. I updated the new component library with the new styles and logos, then changed the component library in all of my new Shuddle pages to point to the new Shuddle component library.