Introduction

The Inter Planetary Travel Syndicate (IPTS) is a company that aims to make space travel accessible to everyone. They offer a range of products and services to help people explore the universe, including an informational and marketing website (IPTS.org), a space travel booking platform (IPTS Travel), and a real-time web application that helps users find and book rail trips across the universe (IPTS Rail).

To create a consistent and intuitive user experience across all of these products, IPTS approached me to build and implement a design system. In this case study, we'll dive into the process of creating the Lyra design system, including the research and analysis that informed its development, the design decisions I made along the way, and the impact it has had on IPTS's products and overall brand.

Discovery & Research

I began with several research efforts, all of which informed my overall approach.

Component Audit

I conducted a component audit on the existing web pages of IPTS’s products. This involved extracting recurring elements across the products in order to figure out which components are needed most within the pioneering design system. I took as many screen shots as I could and placed them aside, categorizing by component type. Through observing the frequency at which certain elements were used, I was able to create a list of essential components to get started on.

With each component, I took a deeper look into the child elements that they are made up of. For example - while looking at all of the cards, I noticed that they contained a title block. Therefore, I created a section beneath the screen shots titled "All." This notes that my finalized cards should probably include a title due to its common usage across the current ones. I continued this method, but with three other sections titled "Most; Some; and Few". Anything that fell within the 'few' section was left out and anything in 'some' section proved the need for further investigation. In conducting this method for each component I was able to nail down the contents of the components, as well as the potential variations that should be designed.

Competitor Analysis

In addition to analyzing the IPTS products themselves, I also looked at several competitors in the space. I reviewed services like Expedia, Airbnb, NYC MTA, Flight Scanner, and Wander to better understand what is common across travel-related products. I made note of the frequently used components and their variations so that I can call back to them when I begin building components. I also took note of the overall styling of these sites. They tended to feel sharp, modern, and welcoming all at once. I wanted to make sure I can evoke those kinds of emotions with the IPTS design system.

In order to maintain alignment with industry standards, I also reviewed some public facing design systems. This allowed me to gain an understanding of the best practices for component usage and general design language. The Helix Design System, the Carbon Design System, and the Goldman Sachs design systems all served as fantastic case studies in this effort. In particular, I loved their focus on minimal component aesthetics and rich usage guidelines. This process helped to prepare me for the creation of IPTS’s core design fundamentals.

Design System Development

My initial discovery lead me to the development of 5 core principles, which provide the design direction for all IPTS products.

IPTS Core Principles

1. Human - At IPTS, we place the user at the center of all design decisions. Every component and layout should be designed with the user in mind, and all interactions should be intuitive and easy to use. This principle ensures that our products are user-friendly and provide an exceptional user experience.

2. Modular - Our design system should be modular, with individual components that can be easily combined to create new layouts and pages. This modularity ensures consistency across our products and makes it easier to maintain and update the design system over time.

3. Minimal - At IPTS, we believe that less is more. Our design system should be minimal, with simple and elegant components that prioritize functionality over decoration. This approach ensures that our products are easy to use and visually appealing, without being overwhelming or distracting.

4. Bold - Bold typography, color, and writing style can help to create a strong visual identity for IPTS. We should use typography and color in a consistent and deliberate way, with a focus on creating impactful design language that is both welcoming and modern.

5. Accessible - Accessibility is a key consideration in all aspects of IPTS design. Our products should be accessible to all users, regardless of ability or disability. This includes using high contrast colors, clear typography, and providing alternative text for non-text content.

Foundations

The foundations portion within a design system is essential as it provides a solid groundwork for designing cohesive products. It serves as a comprehensive reference point for the elements that guide the overall design language and aesthetics of the system. With the foundations set in stone early on, I can begin to design components without skepticism.

Let's briefly go through the styles that drive the look and feel of the IPTS foundations. For a more in depth view, check out the Lyra Reference Site.

Color

The "Deep Space" color palette was carefully chosen and thoughtfully implemented in the IPTS curation process, creating a sleek and minimal look that aligns with the company's transportation services and galactic theme. The deep navy primary color, combined with the varying shades of blue and gray, creates a sense of depth and mystery, while the sparing use of light gray accents adds contrast and sophistication. The resulting design is visually appealing, engaging, and consistent with the IPTS brand image.

I used the 'UI Color Palette' plugin in Figma to help generate tints and shades that follow WCAG AA + AAA accessibility guidelines for contrast.

Typography

I selected Satoshi and General Sans as the typographic base. Assertive in its nature, this combination of fonts creates a clean look and concise hierarchy within interfaces.

Satoshi is a display font with a bold, futuristic style, while General Sans is a versatile sans-serif font with a more traditional look. The contrast between the two fonts creates visual interest and helps to differentiate headings from body text. Satoshi's bold, futuristic style complements the brand's forward-thinking ethos, while General Sans provides a reliable, easy-to-read foundation for the brand's messaging.

Grid Layout

The grid serves as the schematic for how designs should be approached. It is a powerful tool for organizing and laying out content in a consistent and visually appealing manner.

Attributes

• Number of columns: 8

• Margin size: 44 pixels

• Gutter size: 24 pixels

The 8-column structure allows for a high degree of flexibility in terms of layout, while the margin and gutter sizes help to create a clear visual hierarchy and spacing between different elements on the page. Additionally, using multiples of 2 columns for container and section width ensures that the layout remains balanced and visually pleasing.

Components

When designing the components, I adopted an approach that can be summed up with three words - consistent, modular, and scalable. I want designers that utilize these components to focus on solving problems. Having a strong component base with strategic guidelines encourages less thinking and more doing.

Through my initial discovery, I observed that the Lyra design system should focus on four particular elements for phase one adoption. Buttons, Cards, Headers, and Tabs - I chose to include these components first because of their frequency across the current IPTS products.

Design & Usage

For each component, I broke down the specs and wrote guidelines so that designers and engineers have minimal questions when implementing in their work. Lets take a look at the button component to see how I displayed this information in the reference site that I created.

Application

With the newly designed components, I was then able to start applying them to screens within the IPTS products. Through using the Figma UI kit I created, I could quickly update mock ups with ease.

Documentation

While working on each component, I took note of all of the obstacles I faced along the way. What worked? What didn't work? At any point which required me to stop, re-evaluate, and iterate, I made sure to document the process. As I built each new component, I dropped them into the original designs so that I can get a better understanding of the do's and the dont's.

This process helped me to come up with usage guidelines and best practice to follow when working with Lyra components. I get into all of this information in detail via the Lyra Reference Site that I built with Zeroheight, which serves as the sole source of truth for designers, developers, and everyone involved with product.

Impact & Conclusion

There is no doubt that working to create a unified source of truth allows for efficient and advanced product design. Using the newly formed IPTS design system made re-creating the products a breeze. Having that direction does wonders in the shoes of a designer, as well as all other team members that work on the success of innovative products.

One thing that stuck with me throughout this process came from Joey Banks (Design systems designer at Webflow) - " As a design systems designer, you’re not telling people how to drive, you’re fixing the car." This understanding of a design system practitioner's role helped me grasp the value of this endeavor. It rang true throughout this project, especially when going back to re-build the initial designs - night and day difference. I will continue to work with this mindset as I practice this design discipline well into the future.