A Capstone Case Study | Scaling Design System by Dan Mall offered through Dribbble

Overview

The Interplanetary travel syndicate (IPTS) is a web platform that provides three distinct offering for the IPTS platform —

IPTS.org: A place where users can find latest news and articles and happenings in the galaxy

IPTS Travel: Where people can book travel tickets to and from destinations in space

IPTS Rails: A place where people can find maps, routes and directions from various destinations in and around the galaxy

The scope of the project was to have one design system power all three platforms with 5 shared components which can be flexible and scalable.

My Role

For this project I was designated as the head of design. I was responsible for everything, from research to design exploration, building components in Figma and finished designs.

=======================================================

Defining the Problem

The IPTS platform's mission is to help space explorers learn

and travel in space. With just a basic design library existing the platform failed to attract users to the platform as expected

=======================================================

Process

My Research revealed that the existing components lacked a cohesive language.

This made the website platform have a pattern that looked like other websites, even though their was structure.

After going through the designs I researched into further developing what little existed. I looked into websites which provided similar services offered by the IPTS platforms. From this research I was able to understand and gauge what customers would come to expect. I was able to identify common patterns across these sites. This initial research was critical to determine shared elements for each service.

By analyzing real world products I was able to isolate specific elements that would make it feel unique for the three platforms

Getting into the Design

With the data collected in the research I started on iterating on the designs to better understand the overlapping patterns. I created 2 variations for all three platforms-- IPTS. ORG , IPTS Travel and IPTS Rails.

I also expanded on the collection of component and to create components with a purpose.

Due to time constraints I focused on the layout of the three sites and building the main component. This really challenged me to work diligently to deliver, without sacrificing on quality.

With the rough wireframe created, I iterated the designs and explored the further possibilities with initial mockups to better visualize the finished look without spending too much time, knowing that further changes will happen.

Since the typography was quite limiting, I further expanded it to have more options to choose when it was appropiate.

While working on expanding the design system of IPTS, a big branding firm was brought on to overhaul IPTS into a modern space platform

Through focus groups and weeks of research the IPTS brand and it’s identity for all three platforms felt outdated and uninteresting and it was determined to make a name change—— Shuddle.org, Shuddle Visit and Shuddle Ride and to target the young generations.

The new identity also brought new colors and typography with the IBM Plex font family designated as the primary typeface to appeal to a wider number of user to the site.

This also mean’t that the Design System components needed to align to the new identity. I modified and expanded the design system by specifying the usage through documentation of the new components and making sure the look and feel were consistent and fresh to attract the youth.

The design system played an instrumental role in making all three platforms feel consistent and the ability to scale when change happens

As the Design system components were establish I created the high fidelity wireframes. I continuously refined the wireframes until it was time to create the final design.

Key takeaways

Building all three platforms simultaneous helped me work efficiently and build a new product that adapts to change. This really tested my ability to build a scalable design system.

Although components could be expanded the core framework of the design system stood the test when change happens. The challenging aspect of this project for me was to adapt to sweeping changes without the dialogue that would exist in a team environment.

Due to time constraints I would have spent more time documenting the design system.

Despite these challenges I learned to adapt and pivot when things change quickly. This really helped me to gain a new outlook in building design systems and sharpened my design skills regardless of the project scale.