Radix Labs Design System

In a nutshell...

⭐

Establishing the first design library for Radix Labs, a Boston-based startup building operating systems for science labs.

Team

2 designers, 2 developers, PM/CEO

My Role

Design System Project Lead

Timeframe

August 2023 - February 2024

Radix Labs makes your labs work for you.

With a suite of tools, including a database, lab protocol builder, and notification system, Radix Labs offers end-to-end lab integration.

Radix Labs is backed by YCombinator and The Engine, MIT’s startup incubator.

We didn’t have a design system.

I joined the Radix team in late summer 2023. The team was majority engineers, with one sole designer- they relied on Tailwind CSS and some custom components as they focused on building the core product quickly.

Conducting a BIG audit

The very first priority I had was conducting a major audit of the existing product and designs, identifying UI/UX inconsistencies, recurring patterns, layouts and user flows. I took existing screens and "exploded" them into their basic components.

The team was already interested in creating a design system, but by conducting an audit, I was able to demonstrate the value it would bring to both us designers and the development team by pointing out some of the largest issues the design system would solve.

The biggest problems?

Inconsistencies in the user interface

Across the product, I found many inconsistencies in colours, fonts, components, that overall detracted from the user experience. These inconsistencies:

impact the overall look and feel of the product
create redundancies in code and in design files
affect future design decisions, as it will be difficult to tell what component or style to use in what use case

Inconsistency between designs and developed features

There was a great number of custom components, colours and styles that were scattered about our existing design files that were nowhere to be found in our code repositories. As I was being onboarded, I found myself sifting through several older versions of screens that were no longer reflective of the current product.

Approaching the problem with Atomic Design

I researched many ways of putting together a design system, and landed on Brad Frost’s Atomic Design Framework. It provides a modular, phase-by-phase approach to incrementally building design systems that are adaptable and maintainable as the organization and product grows.

📖

I did a LOT of research during this phase!

I read a lot of articles from industry leaders and documentation from established design systems like Atlassian, Intuit, and Google. I also borrowed concepts from the design system I’m most familiar with because of my internship- SAP’s Fiori Design System!

Laying the foundations

Before even starting with Atoms, Molecules, and Organisms, I had to lay some ground rules for the Radix Labs design system- the foundations, or “subatomic particles” that make up the atoms: typography, colour, and grid systems.

While staying true to Radix Labs existing brand guidelines, I put together basic design elements like like typography and colour. I focused a lot of time on laying these foundations early in the process with design tokens, to ensure that the design system was maintainable and scalable.

I implemented these foundations into a design library using Figma’s styles and variables.

Typography

From my audit, I found that there were several weights and sizes used across our designs. Keeping in mind the use cases I documented in my audit, I streamlined this into a collection of just 7 text styles.

Colour

Radix Labs’ main suite of products had a generally cohesive colour scheme, with a lot of redundancy. I made some major decisions to narrow down and update the colourspace:

🖋️

Keep neutrals to a limited range, only darkest and lightest values, to create a minimal and clean interface.

🖋️

Leverage brand colours to make semantic colours for warnings, errors, and CTAs. This ensured that our interface would remain cohesive with the brand.

🖋️

Ensure accessibility by checking colour contrast according to WCAG guidelines- many of the older colours failed contrast tests.

Design Tokens: what’s in a name?

To truly ensure that these ground rules would propagate into our designs, I presented design tokens as a potential approach for our team to follow. Design tokens address and mitigate issues like inconsistency in UIs as products scale. Not only that, but they also lay the groundwork to support theming, dark mode, and future updates.

I started first with examples- by breaking down the structures of industry-established design tokens from Shopify, Atlassian, and Salesforce.

By studying these design token taxonomies, I was able to identify which parts of their structures were applicable to Radix’s design tokens, and created the first iteration of our token structure:

⚙️

component-element-usage-variant-state

Atoms: the building blocks of UI

In accordance with Atomic Design, I started with the “Atoms”, the most basic UI components needed in our design system: buttons, inputs, selectors, and navigation.

Molecules and Organisms: creating more complex components

From the “Atoms”, I was able to create new shared components, building on basic components. Here’s a simple example:

Documenting the design system

💫

A new design system is for everyone, both developers and designers.

Throughout every step of this process so far, I worked with my team’s engineers to co-create our design tokens, our colourspaces, and our typography.

I started documenting our design system process using a shared Airtable. This table not only serves as a reference guide for components and design tokens, but also a project management tool to track our progress as we continued building the system out.
Here's a look at our design tokens table!

Key takeaways

1. A design system is a living document

Design systems grow with the product. Utilizing Atomic Design principles really helped in scoping the project and prioritizing the most key components first and building more as needed.

2. Start small, scale accordingly

By using Atomic Design principles, creating the design system had a “snowball”-like effect as it was easier and easier to make new components once the base “Atoms” were made.

3. Communication leads to co-creation

Getting buy-in from my technical teammates and leadership was crucial to the design system’s success. It was important to demonstrate the importance of the design system from both business and technical perspectives to get the rest of the team on board!