Introduction

This case study chronicles the capstone project challenges of the Scaling with Design Systems course by Dribbble and Dan Mall. The objective was to apply the design system principles and process covered in the course to build a robust design system for a fictional organization that could accelerate the initial delivery process as well as unexpected rebranding needs.

Initial Challenge

The project began with creating three distinct websites for a fictional space travel organization called IPTS—each with at least one page and five components:

• IPTS.org - an informational website that provides the latest news and updates about IPTS

• IPTS Travel - a website that allows users to browse and book travel.

• IPTS Rail - a real-time updated web app that provides information on lines, routes, and times for commuter lines.

My Design Approach

Ideation and Research

As the solo Product Designer, I began by brainstorming with the Object-Oriented UX design approach, developed by Sophia Prater. That is, I listed all of the key “objects” the user would expect from each of the three websites.

Then, I researched for visual inspirations on space-themed web designs and feature ideas from existing travel websites.

This helped me rapidly lay out concepts for the three websites and identify potential patterns to build as components.

As I took the general layout blocks to low-fidelity sketches, I decided on the five components to incorporate in the design system: Top Navigation, Footer Navigation, Card, Button, and Banner.

Visual Identity

Based on the visual inspirations and other consideration mentioned above, I decided to go with futuristic, minimalist creative direction that aimed to replicate the ambience of being in space.

Color

I derived the core color palette from a sunset space image that I found to be inspiring for the creative direction.

Typography

As the non-rounded derivative font of Nunito, a terminal sans serif for display typography, Nunito Sans was chosen for its sharp, futuristic feel that was compatible with the IPTS logo while adding more modern touch to the overall aesthetic. In addition, its flexibility in font weight allowed it to be only font needed from the extra bold display heading to light body texts.

Grid

I took a slightly different approach than following the standard 12-column grid layout. By using an 8-column grid with 120px margin and 20px gutter, I was able to create a spacey feel that is symmetrical and pulls more visual gravity towards the center.

Final Challenge

One of the main benefits of having a design system is the ability to quickly adapt it to evolving needs of the brand. For the final part of the project, we were told that IPTS has now rebranded as Shuddle to appeal to a younger demographic. The three websites and the design system assumed new names and needed to be quickly updated to match the new brand identity.

Here was where the design system shined. Instead of updating each elements manually, I updated the color scheme and typography as laid out in the new brand style guide. Then, it was matter of updating the components to work with the new style and adjusting the lay out of each section.

Documentation

Main Takeaways

Overall, this capstone project demonstrated how valuable a design system can be for a company with multiple products and websites to save time, create consistency, and quickly update and deliver coherent designs.

There is much more that can be added to enhance the design system such as using tokens for colors and spacing that I’d like to continue to explore. But, as Dan Mall emphasized, the important part is to derive and evolve the design system based on real product needs instead of trying to build everything at once without it actually being used.

So the project taught me to consider what is actual being used and build components and observe practical ways to systematize the design process specific to a company. I am thrilled to take build on these lessons and explore more ways to incorporate design systems into my product design process and contribute to establishing it as a practice at the projects and companies I am involved in.