top of page

Artera Design System

Product Designer | April 2022 - Janurary 2023

The Problem

Artera was faced with three problems:  

  • A front end framework change from Kendo to MUI 

  •  An accessibility audit that uncovered poor contrast ratios across components

  • An impending rebrand (Goodbye, WELL Health! Hello, Artera!) 

These problems necessitated an entirely new design system that was both accessible and fit our new branding guidelines, was entirely in MUI, and would scale with the rest of our product and create predicable patterns as our application continued to grow. 

The Problem

Role & Impact

Alongside the work I was doing on a different primary project, I began to work on the design system. Design systems have always been such a fun project -- they are opportunities to set patterns and precedents and make your life easier on. When done correctly, they pay off immensely. 

Role & Impact
Method

Method

We took an atomic approach to our design system -- starting from the foundation (color, typography, spacing), we built our smallest standalone components, to nested components, moving our way up until we have not only pages but patterns of pages and workflows that could be replicated as many times as needed across the application.

We had a combination of MUI components we were switching to and custom components from our old design system our engineers had built specifically to fit our application's needs. We needed to grab all our necessary components, theme them, make the necessary Figma adjustments (hi, autolayout!), and write up some documentation for our designers and devs. 

Components

Chip

image (2).png
image (2).png

Text Field

image.png

Checkbox

image (3).png
Components

Best Practices

Just as important as having these new components and all of their states placed nicely within our design system was including documentation on how to use them. Frankly, before this, we had inconsistent usage all over the place. Dropdowns where radio buttons would suffice, toggles with confusing state labels. We needed something to change.  This would empower our engineers to make decisions as to intended behavior as well as designers to keep track of principles and agree on changes. 

image.png
Best Practices
Reflection

Reflection

This design system is not complete, nor will it ever be. Design systems are living documents, changing with needs and evolving over time. 

Like in all projects, communicating changes to the design system was vital. Because it's a massive document with such a broad audience and not a ton of opportunities to talk through the changes, having a space for the dissemination of information, feedback, and questions was vital.  

bottom of page