MyChart: Sitewide Styles

Role: Lead UX Designer

Team: Developers, Quality Assurance, Customer Support

Timeline: Late 2023 - Current

Epic is the nation's largest and highest-rated Electronic Health Record (EHR) provider, and serves more than 54% of patients in the US. MyChart, Epic’s patient portal, serves more than 150 million patients.

I was tasked with modernizing MyChart’s sitewide styles & improving usability and consistency. I also was asked to explore adding flexibility into our design system to allow the patient portal to more closely match a customers’ overall brand identity. This project has been done in close collaboration with R&D to create more consistency and flexibility in code as well.

Goals

Consistency & trust in MyChart: Improving upon the goal of every activity feeling consistent in appearance and polish, and making our software as easy & joyful as possible to use.

Allow customer brand identity to shine through: Create clear guardrails to allow customers to better match their brand, without giving so much flexibility that UX, accessibility, or performance is compromised and/or upgrades become difficult.

Push the needle on modern design: Use this as an opportunity to improve our experience across the board.

Process

Blue Sky Thinking

First, I wanted to take some time to think about what MyChart could look like without any technical limitations. This is one of my favorite parts of the design process, because it lets you dream big and think through ideas that we may have dismissed outright in the past.

I noted areas where we’ve gotten feedback from customers, stakeholders, or designers in the past. I also kept some principles in mind:

  • Keep it simple: How can we reduce complexity as much as possible to make the site approachable and easy to use for patients?

  • Aim for consistency: Where can we standardize? What differences feel meaningful vs. arbitrary?

  • Modernize: What feels dated? What can we make more modern to match other consumer experiences?

Stakeholder Feedback & Iteration

After presenting ideas to stakeholders, I got feedback on veering away from minimalism and towards UI that felt more joyful. We also discussed scope and the technical goals of the project. This gave us ideas on what areas to focus on for sitewide style updates.

Customer Research

We had calls with 14 customers who had strong feedback about MyChart’s UI. We also hosted a feedback webinar with around 100 participants from customer organizations. We got feedback around global changes we were considering, as well as options for flexibility.

Global Changes

to modernize MyChart and improve usability & consistency

Moving from semantic to single-color buttons

Why?

  • Most modern websites do not use semantically colored buttons.

  • Customers were branding them with their own colors that were not semantic.

  • Development teams spent a large amount of time deciding what color button to use, and usability testing showed us that patients were able to complete workflows with equal success regardless of button color.

Updated font ramp

Why?

  • We received feedback from patients that it was hard to tell links and headers apart. By removing brand color from the hierarchy and creating a separate link color, it becomes much more clear what is interactable.

  • We didn’t have a formal font ramp before, so I created one based on a major second scale. I also added the ‘Display’ size, which was being used informally in some of our pages.

Updated styling for components

We updated components to be more modern & consistent with the rest of the site.

Dark mode

The sitewide standardization work we are doing will allow us to enable dark made in the future.

Adding flexibility

to more closely match customers’ overall brand identity

Why do customers want to customize MyChart?

  1. Differentiation from competitors

  2. Continuity of digital experience

  3. Modernization/Aesthetics

  4. Customer expectation

  5. Usability & accessibility

““We need to give ourselves that bit of differentiation and personality that patients know... we want them to trust Cedars over UCLA, even though we’re right across town.””
— Cedars-Sinai

Solution

Allow customers to better match their brand, without giving so much flexibility that usability, accessibility, or performance is compromised and/or upgrades become difficult. The MyChart app will not take any of these changes, since we want to keep the in-app experience across health organizations consistent.

Font Family

Many customer think of font as a crucial part of their brand identity. Some override CSS today to change the font family already.

We need to consider how to ensure readability, and what guardrails we can provide for customers.

Corner Radius

Many customers specify corner radius in their design systems. This would not affect reflow significantly but would make a big impact for brand identity.

Iconography

Less colorful and more simple icons are more on-brand for some customers. We would limit this setting since it’s lower impact for customers and would affect the look and feel of MyChart.