GoodRx Design System

Evolving the GoodRx Design System

 

About GoodRx
GoodRx is a digital healthcare platform that helps millions of people access affordable care through prescription savings, memberships, and trusted health information about their medical conditions.

 

While prescription discount coupons remain the foundation of the business, the platform has expanded to include telehealth, condition-based care subscriptions, health editorial, loyalty programs, white-label pharmacy experiences, and a healthcare professional version of the site.

 

As GoodRx expanded into new products and business lines, a shared design system scaled alongside it—providing the flexibility to support unique experiences through reusable components and theming.

 

GoodRx Product
One Design System supporting multiple products, audiences, & branded experiences through a shared foundation and multiple themes.

 

My Role
As Staff Product Designer for Platform & Design Systems, I led the evolution of GoodRx's Design System to support a company-wide rebrand and long-term platform scalability.

 

My work spanned design system strategy, token architecture, accessibility, documentation, governance, and design-to-engineering alignment. I partnered across Product, Brand, and Engineering to modernize the system and drive consistent adoption across product experiences.

 

The Challenge
GoodRx was undergoing a major visual rebrand that extended far beyond colors and typography.

 

The existing design system had accumulated drift across tokens, components, and implementation, including gaps between Figma and production. As the product organization grew, teams also began creating more bespoke solutions, creating adoption and contribution challenges alongside the foundational scaling issues.

 

The challenge was to introduce a new visual language while improving parity, scalability, consistency, and system adoption across a growing product ecosystem.

 

The Solution
Rather than treating the rebrand as just a visual refresh, I used it as an opportunity to modernize the design system.

 

By evolving foundational tokens, introducing scalable theme architecture, strengthening design-to-code alignment, and improving how teams adopted and contributed to the system, I created a foundation that enabled the new brand while making the system more scalable and sustainable.

 

token architecture

---

Building a resilient design foundation

 

As the design system expanded, its token structure had grown organically, making it increasingly difficult to scale, maintain, and evolve. To create a more resilient foundation, I redesigned the architecture around semantic design intent—establishing a shared naming language and layered token model that strengthened consistency, design-to-code alignment, and future scalability.

 

Naming by intent, not appearance
Legacy token names reflected colors, products, and implementation details rather than purpose. I introduced semantic naming that improved clarity, encouraged reuse, and created a more scalable foundation for future evolution.

 

A shared language for design and code
I established a semantic naming convention that replaced inconsistent visual naming with a structured vocabulary based on design intent. Each token follows a predictable pattern that communicates its role within the interface, while adopting familiar Tailwind CSS conventions (text, bg, stroke, etc.) to strengthen design-to-code alignment and long-term scalability.

 

A layered token architecture
The naming convention became the foundation of a layered architecture that separated raw values, semantic intent, and component implementation—creating a flexible system that could evolve without rebuilding components.

 

Built for change
Separating semantic intent from primitive values made large-scale visual updates significantly easier. Components continued referencing the same semantic tokens while only the underlying primitive values changed.

 

 

 

modernizing the foundation

---

Translating a new brand into a scalable product system

 

As GoodRx evolved its brand identity, I partnered with Brand, Marketing, Product Design, and Engineering to translate a comprehensive visual refresh into a flexible product foundation. This work included establishing scalable systems for color, typography, elevation, iconography, and illustration, validating accessibility requirements, and creating a theme architecture that enabled consistent implementation across products.

 

---

Translating brand into product
The rebrand introduced a refreshed visual identity, but product experiences require more than a brand palette. I translated the refreshed brand palette into a structured product color system with clear roles for hierarchy, interaction, feedback, and promotion. The result was a shared foundation that could express the brand consistently while supporting the complexity of real product experiences.

 

Supporting interaction
Color also needed to communicate action consistently across the product. I established reusable patterns for primary, brand, and critical actions, including hover, pressed, disabled, and focus states. This created a shared interaction language that teams could apply consistently across components and experiences rather than redefining behavior case by case.

 

Communicating system status
I established a shared feedback system for critical, success, warning, and informational states, pairing color with iconography, typography, and supporting copy so status never relied on color alone.

 

---

Bringing a new brand voice to product experiences
I translated the refreshed brand typography into a scalable product system, pairing Moon for expressive headings with Bolton for highly readable content.

 

Creating a more consistent visual hierarchy
I redesigned the typography scale to establish more predictable relationships between heading levels. Replacing irregular size jumps with a systematic progression improved visual rhythm, strengthened hierarchy, and created a foundation that could scale with future product needs.

 

Typography scale should have rhythm, not accidents
The previous scale relied on arbitrary size jumps that lacked a clear pattern. I established a systematic 12px and 4px progression, creating stronger visual hierarchy and a more scalable foundation.

 

Modernizing typography tokens for design and code
By standardizing sizing around a 16px base and converting tokens to rem values, I created a more accessible, responsive, and scalable foundation while improving design-to-engineering alignment.

 

---

Establishing a clearer shape language
The rebrand introduced a more expressive visual language, creating an opportunity to standardize shape across the system. I established a radii framework based on component role, moving interactive controls from 8px to fully rounded treatments while using more structured corners for non-interactive elements.

 

Preserving hierarchy through shape
To avoid making every element feel equally actionable, informational and static components retained more structured corner treatments. Badges, for example, shifted from fully rounded to 4px corners, creating a clearer distinction between interactive, informational, and structural elements.

 

---

Refining depth and hierarchy through elevation
I introduced a new elevation token system that defined consistent depth relationships across components and surfaces. Standardized elevation values improved implementation consistency, strengthened design-to-code alignment, and created a scalable foundation for future component development.

 

Creating meaningful depth and affordance
The existing interface relied heavily on elevation in default component states, creating visual noise while diminishing its ability to communicate hierarchy. Hover interactions were similarly understated, often relying on barely perceptible color shifts to indicate interactivity.

 

 

I established a standardized elevation system that removed shadows from default states and reserved them for hover, focus, and floating surfaces, creating clearer affordance and a more intentional sense of depth throughout the experience.

 

Standardizing floating surfaces
The floating elevation token was applied consistently across modals, dropdown menus, and tooltips, reinforcing hierarchy and reducing visual inconsistency across the system.

 

---

Auditing accessibility across the system
As part of the rebrand, I conducted a system-wide accessibility audit across foundational colors, components, and interaction states, reviewing both color contrast and broader WCAG requirements. The audit surfaced opportunities to improve contrast, focus visibility, state differentiation, and interaction affordances through shared foundations rather than one-off fixes.

 

Modernizing inputs for accessibility and clarity
The legacy input component relied on low-contrast stroke colors that failed accessibility requirements in default and focus states. I updated the color system to achieve compliant contrast ratios, strengthen focus affordances, and create clearer interaction feedback.

 

Designing beyond minimum compliance
Although disabled controls are exempt from WCAG non-text contrast requirements, I refined disabled text and stroke colors to improve readability beyond minimum compliance.

 

Extending accessibility to dark surfaces
Rather than optimizing inputs for a single background color, I defined state-specific color tokens that could adapt across light and dark surfaces. This approach ensured accessibility requirements, visual hierarchy, and interaction affordances remained consistent throughout the system.

 

---

Bringing personality to functional experiences
I incorporated the updated illustration system into product experiences, creating a consistent visual language that reinforced the GoodRx brand while making functional healthcare workflows feel warmer and more approachable.

 

Expanding the visual language through spot illustrations
I extended the design system to support Brand's spot illustration library, providing reusable patterns and documentation that encouraged consistent adoption across the product.

 

---

Modernizing iconography for consistency and clarity
I integrated the updated utility icon library into the design system, collaborating closely with the icon designer as new icons were introduced. This established consistent implementation patterns and created a scalable foundation for future product needs.

 

 

rebrand in practice

---

A single theme, applied everywhere.

 

The rebrand was implemented as a shared theme rather than a collection of one-off redesigns. By building the refreshed visual language into foundational tokens and reusable components, existing product experiences could adopt the new brand without being redesigned individually.

 

A seamless theme transition
Because shared components referenced semantic design tokens rather than hard-coded brand values, existing experiences could inherit the refreshed visual language through a theme change while preserving their underlying layout, content, and workflows.

 

 

 

blue to black

---

Reimagining interaction without relying on color

 

In 2025, the product transitioned from a blue primary UI color to black as part of the rebrand. This change introduced a significant design systems challenge: blue had long been the product's primary signal for interactivity. I conducted an audit of interaction patterns across the platform and established new standards for buttons, links, form controls, focus states, and selection behaviors. The resulting system relied on multiple visual cues—not color alone—to communicate affordance, improve accessibility, and create a more intentional interaction model.

 

---

Redefining primary and secondary actions
I updated button styles for the new black primary action while preserving a clear distinction between primary and secondary actions.

 

Creating clear action hierarchy within complex workflows
Transitioning away from blue required careful evaluation of where color was communicating brand versus functionality. I updated primary actions to use the new black treatment, while keeping blue links in workflows where removing color made them harder to find. Testing showed that links styled too similarly to body copy became significantly less discoverable, even when underlined. In those cases, blue remained an important affordance cue.

 

---

Communicating selection through multiple visual cues
Selection controls were redesigned to communicate interaction states through more than color alone. Updated patterns used shape, stroke, fill, iconography, and contrast to make hover, focus, selected, and unselected states easier to distinguish.

 

Strengthening choice architecture
Selected states had previously relied heavily on blue to signal the active choice. I redesigned the selected treatment to use multiple reinforcing cues, making the active option more obvious without depending on color alone.

 

 

expanding the system

---

Supporting new healthcare experiences through reusable components

 

As GoodRx expanded into new healthcare services and workflows, I identified recurring UX challenges and translated them into reusable design system components and patterns. These components helped teams communicate progress, status, discovery, and next steps while creating solutions that could scale across products and experiences.

 

---

Fragmented navigation created disconnected experiences
As GoodRx expanded into new products and business lines, each area developed its own navigation patterns, branding, terminology, and account entry points.

 

The result was an experience that often felt more like a collection of separate microsites than one cohesive product ecosystem. Moving between Drug Savings, Care, Gold, and Health could mean losing familiar navigation, encountering different support links, or seeing inconsistent actions like Sign up and Sign in.

 

 

Creating one connected product ecosystem
The new Universal Navigation replaced fragmented, business-specific headers with one shared navigation framework across the GoodRx ecosystem.

 

I organized the information architecture around how users think about their needs rather than internal lines of business, creating clearer pathways between prescription savings, online care, health information, membership, and other services.

 

The system also standardized search, account access, support, and promotional entry points while remaining flexible enough to support future products.

 

Extending the system across breakpoints
The same navigation model was translated to mobile while preserving consistent hierarchy and terminology across experiences.

 

Search became more prominent on mobile, while account, product navigation, and supporting destinations were consolidated into predictable patterns that could scale.

 

Establishing tenets for future growth
To keep Universal Navigation aligned as the product evolved, I established shared tenets to guide future navigation decisions.

 

 

---

Guiding users to relevant treatments faster
As search became more important across healthcare experiences, I created a reusable pattern that helped users find medications, treatments, and health content more consistently across the product.

 

---

Helping users navigate complex healthcare workflows
I established a reusable progress pattern for multi-step healthcare workflows, giving users consistent visibility into where they were and what came next.

 

Solid utility icons identified the current step while outlined icons represented upcoming steps, creating a clear visual distinction between present and future actions. The pattern could then scale across onboarding, treatment, and subscription journeys.

 

---

Creating transparency throughout medication delivery
I designed a reusable status tracking component that gave users visibility into each stage of the medication fulfillment process, supporting both home delivery and pharmacy pickup.

 

Consistent iconography and progressive status indicators distinguished completed and upcoming milestones, while contextual messaging and actions helped users understand what was happening and what to do next.

 

 

documentation as a product

---

Reducing ambiguity through better documentation

 

As GoodRx’s design system expanded, documentation evolved beyond basic component specifications into a more comprehensive resource for design and implementation decisions. I created a consistent documentation model that brought together component guidance, UX best practices, content standards, and implementation details in one place.

 

---

The original documentation captured the basics, but left many of the practical questions teams encountered unanswered. Rather than documenting what a component was, the new documentation focused on helping teams understand how and when to use it.

 

The new documentation answered questions teams actually had:

• - How do I build it?
• - When should I use it?
• - When shouldn’t I use it?
• - How do I write content for it?
• - What mistakes should I avoid?
• - Which component should I use instead?

 

---

Each component followed a standardized documentation structure that clearly defined how it should be built and behave across contexts.

 

Documentation consistently covered:

• - Component anatomy, including required and optional elements
• - Supported variations and configurations
• - Responsive behavior across desktop and mobile
• - Platform-specific guidance when web, iOS, and Android implementations differed
• - Static and interactive behavior
• - Sizing guidance and common patterns

 

---

Documentation also captured guidance that had previously lived in critiques, conversations, or individual experience.

 

New guidance included:

• - Do & Don’t examples
• - UX best practices
• - Related component comparisons
• - Content standards
• - Standardized error messaging

 

 

 

governance and adoption

---

Helping a Design System grow with the organization

 

A successful design system requires more than reusable components. I established governance, education, and support practices that helped teams adopt the system, contribute back to it, and maintain quality as the organization grew.

 

Driving adoption through education
Adoption required more than publishing components. I created onboarding resources that helped teams understand how the system worked, where it fit into the product process, and how to design effectively within it. This reinforced the design system as a shared product, not a static library.

 

Supporting teams through proactive partnership
I supported teams through office hours, design critiques, Slack support, mentoring, and ongoing collaboration with product and engineering. These touchpoints helped teams navigate tradeoffs, surface gaps, and determine when existing system patterns were no longer enough.

 

Building systems fluency
As the system evolved, I created practical education to help designers use newer system capabilities confidently in day-to-day work. Tutorials covered topics like Figma variables, design tokens, and applying system primitives through real examples.

 

Growing the system together
The system wasn’t intended to solve every product challenge. I created a decision framework that helped teams determine when to reuse an existing component, evolve the system, or build a custom solution using shared foundations.

 

 

Establishing a quality bar
Before experiences moved into development, I ran an Engineering Handoff Review to catch quality and implementation issues earlier.

 

I reviewed designs for:

• - Correct use of design system components
• - Opportunities to simplify or reuse existing patterns
• - Accessibility and inclusive design
• - Platform consistency and interaction quality
• - Engineering readiness and implementation details

 

 

 

 

outcomes and impact

---

Lasting impact beyond the rebrand

 

What began as a visual rebrand became an opportunity to modernize the design system itself—improving scalability, accessibility, consistency, and long-term maintainability across the GoodRx product ecosystem.