Screenshot 2025-04-01 at 3.18.22 PM.png

Simplifying Healthcare, One Patient at a Time

Epic SmatyChart.ai:

Background

—Designing an AI-powered “Friendly Mode” for the MyChart patient portal to helps patients better understand their own health data—without needing a medical degree.

Role

UX Designer · Product Owner

Scope

4 Months · apprenticeship

TEAM

Team of 5 - 1 UX Designer (Me) · 2 developers · 2 data engineers

Tools

Tools

Figma Logo

Figma

Overview

Client Brief

"In recent years, healthcare has moved toward greater transparency by giving patients access to their medical data through online portals. However, much of this information—like test results and physician notes—is still written for healthcare professionals, making it difficult for patients to fully understand or act on their own health information."

problem

problem

problem

Much of the information in patient portals—like lab results and physician notes—is still written for healthcare professionals, not patients. As a result:

Patients struggled to interpret their own test results and medical records.

Patients struggled to interpret their own test results and medical records.

Patients struggled to interpret their own test results and medical records.

Confusion and anxiety increased when information was unclear.

Confusion and anxiety increased when information was unclear.

Confusion and anxiety increased when information was unclear.

Opportunities for patients to take informed action on their health were missed.

Opportunities for patients to take informed action on their health were missed.

Opportunities for patients to take informed action on their health were missed.

Solution

Solution

Solution

We created SmartChart.ai, an AI-driven “Friendly Mode” plugin embedded into Epic’s MyChart. The pulgin:

Simplified complex medical jargon into plain, patient-friendly language

Simplified complex medical jargon into plain, patient-friendly language

Simplified complex medical jargon into plain, patient-friendly language

Added conversational explanations to provide clarity and reassurance

Added conversational explanations to provide clarity and reassurance

Added conversational explanations to provide clarity and reassurance

Offered contextual definitions of medical terms without altering the original content

Offered contextual definitions of medical terms without altering the original content

Offered contextual definitions of medical terms without altering the original content

Impact

In just 4 months, we shipped a high-fidelity platform plugin that:
2.5
2.5
2.5
%

reduced cognitive load by

Created a flexible foundation for a scalable AI patient plugin

Received positive feedback from mentors and mychart users alike

TL;DR
TL;DR
TL;DR
Patients couldn’t understand their own medical data in portals like MyChart. We built an AI plugin with a friendly mode that translates jargon into plain language with context.
The result: clearer comprehension, less confusion, and greater patient confidence.

Research Process

Understanding the Problem

We kicked off with qualitative research—interviewing MyChart users to understand where they struggled.

Key insights:
“I don’t understand half of what’s written, so I just Google it.”
“I’m not sure if something’s serious or routine.”
“I wish I could just toggle a simple version of the results.”

Patients didn’t want more data—they wanted clearer meaning and reassurance. Their needs shaped our design focus.

our Process

our Process

our Process

To manage design + dev in parallel, we combined Scrum + Kanban frameworks.

Scrum: Weekly sprints with standups, retros, and rotating Scrum Masters.
Kanban (Jira): Each team member pulled from prioritized tasks. I maintained the product backlog and coordinated between design and development.

As both the UX Designer and Product Owner, I ensured our design decisions reflected real user pain points, and that those insights translated into feasible dev milestones.

Ideation & Concept development

Ideation & Concept development

Ideation & Concept development

I led a collaborative ideation sprint using Figma and Miro, sketching wireframes and user flows based on user scenarios from our interviews.

With time constraints in mind, we scoped three MVP features:

“Friendly Mode” toggle – for simplified test results and doctor’s notes.

“Friendly Mode” toggle – for simplified test results and doctor’s notes.

“Friendly Mode” toggle – for simplified test results and doctor’s notes.

Contextual hovers – offering plain-language popups for complex medical terms.

Contextual hovers – offering plain-language popups for complex medical terms.

Contextual hovers – offering plain-language popups for complex medical terms.

Conversational chatbot – for guided walkthroughs and emotional support.

Conversational chatbot – for guided walkthroughs and emotional support.

Conversational chatbot – for guided walkthroughs and emotional support.

Wireframes

This user journey map follows Nia, a first-time student entrepreneur, as she navigates the original TEO website. Based on real usability walkthroughs, it highlights key breakdowns—like vague headlines, confusing CTAs, and a lack of entry points. Each step captures her actions, thoughts, and emotional drop-off, showing how poor site structure led her from curiosity to confusion, frustration, and eventually exit.

building the experienece

While the engineering team built the app in React.js, I continued to evolve the UX.
  • Integrated Gemini AI plugin for summarizing health data
  • Designed mobile-first, responsive screens
  • Shifted from web scraping to file-based inputs for quicker implementation
  • Conducted handoff with detailed design specs and Figma tokens
TL;DR
TL;DR
TL;DR
We combined Scrum and Kanban to keep design and dev moving in parallel, with me driving backlog, sprints, and cross-team coordination. Through rapid ideation, user testing, and iterative wireframing, we translated real patient pain points into feasible MVP features.

Final Design

Framer

is

a

design

tool

that

Results & Impact

​In just 4 months, we shipped a high-fidelity prototype that:

Reduced user overwhelm by offering digestible medical summaries

Reduced user overwhelm by offering digestible medical summaries

Reduced user overwhelm by offering digestible medical summaries

Created a flexible foundation for a scalable AI patient-assistance plugin

Created a flexible foundation for a scalable AI patient-assistance plugin

Created a flexible foundation for a scalable AI patient-assistance plugin

Received positive feedback from mentors and healthcare users alike

Received positive feedback from mentors and healthcare users alike

Received positive feedback from mentors and healthcare users alike

Reflection

REFLECTION

REFLECTION

REFLECTION

SmartChart.ai wasn’t just a technical challenge; it was a human one.
The project reminded me that clarity, empathy, and trust are just as critical as functionality in healthcare design.

Serving as both the UX designer and the product owner pushed me to stretch across disciplines—and made this one of the most meaningful design experiences I’ve had.
SmartChart.ai wasn’t just a technical challenge; it was a human one.
The project reminded me that clarity, empathy, and trust are just as critical as functionality in healthcare design.

Serving as both the UX designer and the product owner pushed me to stretch across disciplines—and made this one of the most meaningful design experiences I’ve had.
TL;DR
TL;DR
TL;DR
Designing SmartChart.ai taught me that in healthcare, empathy and clarity matter as much as functionality—making it one of my most meaningful design experiences.