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.
At the beginning of the year the team created company wide goals that included:
To help support these goals, we made sure to keep a few items in mind while working on the design system project:
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.
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.
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.
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.
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:
Using this feature in Figma helped me create and manage various states and styles for particular components.
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.
I organized the pages within Figma to help with organization and communicating structure for the documentation site.
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.
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.
Here are a few highlights from the project:
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.
