UPMC Health Plan
UPMC Health Plan
Building a healthcare design system for consistency, accessibility, and faster product delivery.
Building a healthcare design system for consistency, accessibility, and faster product delivery.
Healthcare SaaS Design System
Product Design, UX/UI
Overview
UPMC’s healthcare design system for creating more consistent, accessible, and scalable product experiences across complex member, patient, staff, and administrative workflows. I helped design and evolve the system so teams could move faster with shared components, clearer usage guidance, stronger documentation, and reusable UX patterns.
The Challenge
UPMC teams were building healthcare products across many workflows, roles, and platforms. Designers and developers needed a shared system that could reduce inconsistencies, improve accessibility, and make complex healthcare interactions easier to design and build.
The challenge was not only to create UI components, but to make the design system practical for real product teams. Orchid needed to explain when to use a component, when not to use it, how it should behave across desktop and mobile, and how teams could apply it consistently in high-stakes healthcare workflows.
What I Did
Design System UX: Designed and refined reusable patterns for healthcare product experiences, including forms, inputs, selection controls, date pickers, tooltips, banners, setup flows, and responsive layouts.
Component Guidelines: Created clear usage guidance so teams could understand the difference between similar patterns, such as checkboxes, radio buttons, switches, dropdowns, and date inputs.
Documentation Strategy: Structured documentation around practical product decisions: what the component is for, when to use it, when to avoid it, accessibility considerations, mobile behavior, and recommended alternatives.
Accessibility & Healthcare Standards: Designed with accessibility, readability, responsive behavior, and healthcare workflow clarity in mind so the system could support both staff-facing and member-facing experiences.
System Alignment: Compared Orchid with Coral to identify opportunities for convergence, including shared component behavior, stronger documentation, interactive examples, visual consistency, and developer-friendly configuration.
Adoption Research: Supported design system survey work to understand how UPMC teams used Orchid and Coral, why they chose a system, what gaps existed, and what improvements would make the system more useful.
Key Decisions
Make guidance as important as components. A component library alone was not enough. Teams needed plain-language guidance that helped them choose the right pattern for the right situation.
Design for real healthcare workflows. Patterns had to support appointment scheduling, staff tools, member interactions, forms, validation, and administrative workflows where clarity and accuracy matter.
Standardize similar interactions. Checkboxes, radio buttons, switches, dropdowns, and date pickers can easily overlap. Orchid helped define clearer rules so teams could avoid inconsistent or confusing interactions.
Support responsive and accessible design. The system needed to work across screen sizes and user needs, including native mobile behavior, clear labels, readable layouts, and accessible validation patterns.
Bridge design and development. Documentation needed to serve both designers and engineers by connecting visual guidance, usage rules, configuration options, and implementation expectations.
Core Product Loop
Choose — Teams identify the right component or pattern for the workflow.
Apply — Designers use documented usage rules, examples, and best practices.
Build — Developers implement with clearer specs, states, and behavior.
Validate — Teams check accessibility, responsiveness, and consistency.
Improve — Feedback, surveys, and cross-system comparisons guide future updates.
Next Project
UPMC Health Plan
Building a healthcare design system for consistency, accessibility, and faster product delivery.
Healthcare SaaS Design System
Product Design, UX/UI
Overview
UPMC’s healthcare design system for creating more consistent, accessible, and scalable product experiences across complex member, patient, staff, and administrative workflows. I helped design and evolve the system so teams could move faster with shared components, clearer usage guidance, stronger documentation, and reusable UX patterns.
The Challenge
UPMC teams were building healthcare products across many workflows, roles, and platforms. Designers and developers needed a shared system that could reduce inconsistencies, improve accessibility, and make complex healthcare interactions easier to design and build.
The challenge was not only to create UI components, but to make the design system practical for real product teams. Orchid needed to explain when to use a component, when not to use it, how it should behave across desktop and mobile, and how teams could apply it consistently in high-stakes healthcare workflows.
What I Did
Design System UX: Designed and refined reusable patterns for healthcare product experiences, including forms, inputs, selection controls, date pickers, tooltips, banners, setup flows, and responsive layouts.
Component Guidelines: Created clear usage guidance so teams could understand the difference between similar patterns, such as checkboxes, radio buttons, switches, dropdowns, and date inputs.
Documentation Strategy: Structured documentation around practical product decisions: what the component is for, when to use it, when to avoid it, accessibility considerations, mobile behavior, and recommended alternatives.
Accessibility & Healthcare Standards: Designed with accessibility, readability, responsive behavior, and healthcare workflow clarity in mind so the system could support both staff-facing and member-facing experiences.
System Alignment: Compared Orchid with Coral to identify opportunities for convergence, including shared component behavior, stronger documentation, interactive examples, visual consistency, and developer-friendly configuration.
Adoption Research: Supported design system survey work to understand how UPMC teams used Orchid and Coral, why they chose a system, what gaps existed, and what improvements would make the system more useful.
Key Decisions
Make guidance as important as components. A component library alone was not enough. Teams needed plain-language guidance that helped them choose the right pattern for the right situation.
Design for real healthcare workflows. Patterns had to support appointment scheduling, staff tools, member interactions, forms, validation, and administrative workflows where clarity and accuracy matter.
Standardize similar interactions. Checkboxes, radio buttons, switches, dropdowns, and date pickers can easily overlap. Orchid helped define clearer rules so teams could avoid inconsistent or confusing interactions.
Support responsive and accessible design. The system needed to work across screen sizes and user needs, including native mobile behavior, clear labels, readable layouts, and accessible validation patterns.
Bridge design and development. Documentation needed to serve both designers and engineers by connecting visual guidance, usage rules, configuration options, and implementation expectations.
Core Product Loop
Choose — Teams identify the right component or pattern for the workflow.
Apply — Designers use documented usage rules, examples, and best practices.
Build — Developers implement with clearer specs, states, and behavior.
Validate — Teams check accessibility, responsiveness, and consistency.
Improve — Feedback, surveys, and cross-system comparisons guide future updates.
Next Project
UPMC Health Plan
Building a healthcare design system for consistency, accessibility, and faster product delivery.
Healthcare SaaS Design System
Product Design, UX/UI
Overview
UPMC’s healthcare design system for creating more consistent, accessible, and scalable product experiences across complex member, patient, staff, and administrative workflows. I helped design and evolve the system so teams could move faster with shared components, clearer usage guidance, stronger documentation, and reusable UX patterns.
The Challenge
UPMC teams were building healthcare products across many workflows, roles, and platforms. Designers and developers needed a shared system that could reduce inconsistencies, improve accessibility, and make complex healthcare interactions easier to design and build.
The challenge was not only to create UI components, but to make the design system practical for real product teams. Orchid needed to explain when to use a component, when not to use it, how it should behave across desktop and mobile, and how teams could apply it consistently in high-stakes healthcare workflows.
What I Did
Design System UX: Designed and refined reusable patterns for healthcare product experiences, including forms, inputs, selection controls, date pickers, tooltips, banners, setup flows, and responsive layouts.
Component Guidelines: Created clear usage guidance so teams could understand the difference between similar patterns, such as checkboxes, radio buttons, switches, dropdowns, and date inputs.
Documentation Strategy: Structured documentation around practical product decisions: what the component is for, when to use it, when to avoid it, accessibility considerations, mobile behavior, and recommended alternatives.
Accessibility & Healthcare Standards: Designed with accessibility, readability, responsive behavior, and healthcare workflow clarity in mind so the system could support both staff-facing and member-facing experiences.
System Alignment: Compared Orchid with Coral to identify opportunities for convergence, including shared component behavior, stronger documentation, interactive examples, visual consistency, and developer-friendly configuration.
Adoption Research: Supported design system survey work to understand how UPMC teams used Orchid and Coral, why they chose a system, what gaps existed, and what improvements would make the system more useful.
Key Decisions
Make guidance as important as components. A component library alone was not enough. Teams needed plain-language guidance that helped them choose the right pattern for the right situation.
Design for real healthcare workflows. Patterns had to support appointment scheduling, staff tools, member interactions, forms, validation, and administrative workflows where clarity and accuracy matter.
Standardize similar interactions. Checkboxes, radio buttons, switches, dropdowns, and date pickers can easily overlap. Orchid helped define clearer rules so teams could avoid inconsistent or confusing interactions.
Support responsive and accessible design. The system needed to work across screen sizes and user needs, including native mobile behavior, clear labels, readable layouts, and accessible validation patterns.
Bridge design and development. Documentation needed to serve both designers and engineers by connecting visual guidance, usage rules, configuration options, and implementation expectations.
Core Product Loop
Choose — Teams identify the right component or pattern for the workflow.
Apply — Designers use documented usage rules, examples, and best practices.
Build — Developers implement with clearer specs, states, and behavior.
Validate — Teams check accessibility, responsiveness, and consistency.
Improve — Feedback, surveys, and cross-system comparisons guide future updates.