CoverMyMeds is a McKesson healthcare technology company that specializes in electronic prior authorization (ePA) solutions. Their digital platform helps automate arduous PA forms and facilitates better coordination between providers, pharmacists, and payers to get patients their medication faster.

When CoverMyMeds approached us for help, their UX team was siloed across embedded product teams, which had created disjointed experiences in the PA platform. We investigated how to achieve better cohesion between their design and engineering teams, ultimately creating a centralized design system to facilitate collaboration and guide their perspective on product design.

• Product Cohesion & UX Maturity: Our collaboration spread UX knowledge across CoverMyMeds, with employees referencing our documentation and components to align with the evolving product ethos. Designers and engineers have used Carbon’s documentation to ensure consistency and accessibility.
• Motivation to Solve Technology Incompatibility: I've reached out to other expertise areas in CoverMyMeds (outside product, design, and engineering) to learn how the design system might provide value and solutions to their specific problems. Our conversations have yielded alignment on the importance of simplifying the underlying technology and design patterns.
• Recruiting a Design System Team: We are now focusing on building a dedicated team to manage the design system, pitching the business use case to leadership for hiring full-time engineers.

After McKesson acquired the company in 2017, CoverMyMeds underwent changes that unintentionally deteriorated cross-functional collaboration and prolonged release cycles. Myself and a design peer facilitated a series of group interviews with the UX, engineering, and product teams to uncover the root of these problems:

1. An engineering-dominant culture had minimized the level of influence and impact designers and researchers could achieve.
2. Independent teams chose their own technologies and frameworks, making it a challenge to connect services and create consistent user experiences.
3. The switch to an embedded team model had fragmented the UX team, leading to a breakdown in shared processes and resources.

CoverMyMeds knew the legacy design system needed replaced and expressed interest in one that could bring efficiency, consistency, and reusability to the product development process. A previous attempt at a centralized design system, called the “Design System Language,” was obsolete and limited. I led the audit of the design system to expose its weaknesses:

• Components & Interactions: The DSL encompassed a small range of basic components and lacked documentation of patterns and interactions.
• Inconsistencies: Various differences in styling, spacing, and conventions across components impacted screen design cohesion.
• Accessibility Challenges: Notably, the design system did not meet the strict accessibility standards for visual accessibility and supported devices required in the healthcare industry.

At this time, a separate engineering effort to consolidate frameworks revealed an opportunity to start building the design system. I met with a small group of their product and engineering leads to discuss implementation tactics, ultimately aligning on adopting a React-based framework.

After reviewing several options, I recommended using IBM's Carbon Design System for its deep library of components, detailed documentation, and out-of-the-box accessibility features that would be in closer compliance with healthcare policies.

To make the design system look and work better for CoverMyMeds, we customized styles to refine the product language using cascading design tokens for easier maintenance. I also introduced a system of interlocking components using "base" and "core" structures, allowing single base edits to cascade across all core components, speeding up design time.

Although Carbon comes baked with accessibility in mind, requirements for digital healthcare products are much stricter. I conducted a visual accessibility audit before modifying specific UI elements to follow UX best practices and healthcare usability policies.

We built the components prototype-ready so that anyone could test their ideas, not just designers. I worked in Figma to simplify component variants, leveraging features such as booleans, nesting, and instance simplification to make components easier to use.

Once my team had a foundation of components and documentation, we solicited feedback from CoverMyMeds employees. The extensive documentation initially overwhelmed participants, prompting us to streamline it.

I was responsible for creating various resources to accommodate different learning styles, including written content and interactive Figma activities. I made video tutorials to onboard employees and voiceover new product and design principles.

We gradually released components to the UX team, eventually supporting ScriptHero, CoverMyMeds' first patient-facing product for prescription discount cards.

I worked together with ScriptHero's product manager and engineer, as well as another CoverMyMeds designer, to unravel technical complexity and make a plan for how to implement the new design system. To get started, we integrated a couple essential components into the UI and planned iterative cycles for further integration. I created designs for the future full experience in order to guide refinement of the product.

Many of the atomic Figma components are built with states and interactions baked in, meaning anyone from the product organization can leverage the library to quickly test ideas without needing prototyping skills.

Some of the educational resources I created for the documentation library are activity-based, giving anyone the ability to practice using the design system with simple prototyping tutorials.

The new Carbon-based design system pulls the same terms for styles from developer documentation to close the gap in communication between engineers and designers.

The semantically-named design tokens use labels such as $danger and $text-primary to reduce ambiguity in implementation, ensuring solutions across different product teams follow similar conventions.

A select number of components have been implemented in ScriptHero, a prescription platform acquired by CoverMyMeds. With the design system, the app’s UI and interaction patterns now align with its parent company’s product language without compromise to the patient experience.