CareMessage Design System

CareMessage is a B2B SaaS app that helps safety net organizations send text messages to their patients. I led the design of the new CareMessage Design System to improve our product design process, manifest our design principles, and provide health clinics with a usable, accessible, beautiful software that supports their work with underserved patient populations.
Senior Product Designer
CareMessage Design System


CareMessage's adoption grew significantly during the COVID-19 pandemic. More and more free clinics needed a fast and reliable way to communicate with their patients. Texting helped solved that problem. With CareMessage rapidly growing, we needed to reevaluate our UI components and prepare to scale.

Also, during this time, the company was refreshing the brand. This rebrand was meant to help CareMessage's visuals look more polished and professional.


Create and launch a design system to help establish a solid foundation and create a library of components built with accessibility and scale in mind.

No items found.

Project Goals

At the beginning of the year the team created company wide goals that included:

  • Building trust through design principles
  • Scalability

To help support these goals, we made sure to keep a few items in mind while working on the design system project:

  • Improve ease of use
  • Improve color contrast for accessibility
  • Create scalable and flexible UI components

My Role

I worked within a small pod that included a Product Manager, Senior Engineer and Senior QA Engineer. I was the design lead and I primarily worked on design and documentation. The team met on a weekly basis where I would independently introduce new designs and communicate design specs.

I would also work very closely with the Head of Design and other Product Designer to get feedback on designs and file setup.


I conducted a heuristic evaluation and took inventory of CareMessage's existing components and patterns. I noted the most commonly used components, inconsistencies within the app and opportunities for usability improvements. I also reviewed customer submitted feedback to understand and uncover user pain points within the app which helped with component prioritization.

CareMessage App before the rebrand and design system

Systems thinking played a big role during discovery. I thought about how the design of individual components would work in different user scenarios and edge cases. Something that I noticed while conducting my heuristic evaluation is that certain inconsistencies within the app were due to simply thinking about one problem at a time. I dug deeper to understand and address root problems our customers were facing.

Figma Setup

I used Figma to build the library of components. I used variants, instances and autolayout to create the components. This helped make it easy for other designers to consume those components into their own work.

Why Figma?

Figma is one of the best design tools to create and support design systems. You can easily create design libraries that any design team member can use. As long as you consider setup from the beginning, you can create an easy to maintain library thats build to scale and change over time as the company grows.

Establishing Foundations

The core of the design file is centered around the foundational visual elements such as color, typography, spacing and border radius. Our Senior QA engineer conducted an accessibility report to help us locate key areas for improvement. This was helpful in ensuring accessibility was not an afterthought and also built into the core of the design system.

I made sure to tackle the following:

  • Including color contrast options for our brand colors
  • Setting typography hierarchy and sizes made specifically for a highly interactive app
  • Defining consistent spacing and border radius styling for a refined and polished product visual design
  • Using an accessibility annotation library to help communicate accessibility requirements for various components within documentation.

Colors, typography, spacing, radius & accessibility Notes

Leveraging Figma Variants

Using this feature in Figma helped me create and manage various states and styles for particular components.

Button component options in Figma

Creating Placeholder Content

While constructing the card, tile and modal components, I created placeholder content with the use of instances. The designer could then easily swap the placeholder with different content layouts for their project. My goal here was to give designers flexibility without disconnecting the instance. Once they disconnect from the instance, they will risk the file becoming out of date.

Tile content placeholder


I organized the pages within Figma to help with organization and communicating structure for the documentation site.

Organization of design file in Figma

I documented best practices for usability and accessibility. A lot of the documentation created centered around the heuristic evaluation done in the discovery phase of the project.

Sample documentation pages

Documentation for button alignment

Introducing New Processes

The team created a dedicated slack channel with in the organization for any and all communication around the design system. People can easily raise questions or concerns within this space.

We used Zeplin to help with communicating design specs. We leveraged the global styleguide to communicate established components and sass variable names.

Zeplin color section

Outcome & Future

Here are a few highlights from the project:

  • Reduced contrast errors from 110 to 10
  • Increased our accessibility score on Google Lighthouse from 74 to 87
  • Improved development and design production

In the future we would like to start tackling template pages and start building out more complex patterns. The Product Manager of the design system team started working on a design system roadmap to ensure that we continuously deliver new updates to the library. The engineering team has done some research into integrating with Storybook to help with documentation.

Sarah King Logo

Additional Work

© 2023 by Sarah King