Crafting a Minimal Design System

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 headers, I noticed that they contained all contained a logo. Therefore, I created a section beneath the screen shots titled "All." This notes that my finalized headers should probably include a logo due to its common usage across the existing components. 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 Lyra'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.

Component Design

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.

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.

‍