Mychart by epic
Redesigning MyChart: Transforming It into a Modern Medical Hub with a Collaborative Design System
CLIENT
Epic Systems Corporation
PRODUCT DESCRIPTION
MyChart is a patient portal developed by Epic Systems Corporation, a leading healthcare software company. MyChart serves over 165 million patients globally, reflecting its massive reach and adoption in the healthcare industry
MISSION
Revamp the user onboarding process, homepage, and Messenger based on top-reported issues. Implement a design system in the product to ensure consistency and reinforce branding.
PLATFORM
Mobile App
Introduction
One morning, you rushed to the hospital, completed forms, saw your doctor for 20 minutes, and had blood samples taken. By noon, everything was done. Two days later, you received your test results but felt frustrated—not because of bad news from your checkup, but due to issues with the app delivering the results. Navigating the app felt like being lost in a jungle due to its quirky interface, overwhelming menu options, and scattered button placement. Recognizing that millions of patients rely on MyChart, I empathize with their struggles and see an opportunity to apply my skills and experience to propose improvements within my abilities. The redesign of MyChart is an improvement for its design system for the mobile experience, which would be well-organize and improve accessibility to create a smooth journey for all users.
Current Challenges
Incoherent onboarding Experience for login
The onboarding process plays an important role in creating the first impression for first-time users. The current onboarding tries too hard to achieve all functions at once. There is inconsistency across login pages because each page contains different features. The awkward use of space and lack of visual hierarchy make it difficult to read the information. Additionally, the inconsistency in color and style makes the next page unpredictable as users navigate through the process.
Scatter space at homepage
1. Inefficient use of space
The homepage is the central hub for all important information. It should display basic details, allowing users to quickly skim through crucial information at a glance. In the current design, the core functionality of the homepage is represented by six buttons. The homepage looks particularly odd when no additional information is displayed on the page.
2. Overwhelming Menu
The excessive options in the menu can be overwhelming at first glance. Due to its complexity, the menu even includes a search function specifically for finding items within it. This indicates that the menu might be too complicated.
Quirky Messenger
The messenger interface suffers from inefficient use of space, disrupting readability and creating unnecessary distractions. Indicators of these design challenges include:
Ineffective spacing: Misaligned and inconsistent spacing disrupts the visual flow, making it harder for users to engage with the content.
Cluttered top navigation: Poor organization and lack of clear separation in the top navigation result in excessive visual busyness, overwhelming users during interaction.
Lack of visual hierarchy: The absence of clear grouping or prioritization of elements increases cognitive load, making navigation and interaction unnecessarily complex.
Solutions
Onboarding – Connect the Dots
Design System
This unified design system was created using the Proton UI Kit (yes, I’m the creator, and it’s free!), a prebuilt system that ensures consistency across the application. This approach speeds up the process and reduces confusion caused by inconsistent designs.
Presentation of Info
An insurance card design was chosen to present medical provider information. This format is familiar and easily connects with the medical field, making it both intuitive and user-friendly.
Visual Hierarchy
The visual hierarchy was adjusted to make key information stand out more clearly. This not only improves the page’s appearance but also helps users quickly find the information they need.
Navigation Flow
The onboarding process was streamlined to ensure smooth navigation without awkward or confusing design elements. Users can now complete the process seamlessly.
Homepage - Simplicity And Unification
Homepage Restructure
The homepage was reorganized by placing key functions at the bottom of the screen, making it easier for users to switch between main pages. This setup reduces friction and enhances navigation.
Information Display
The homepage now includes key information such as personal details, upcoming visits, recent test results, and medications. This layout allows users to see all important information at a glance, improving the efficiency of the page.
Overall Value
These changes maximize the value of the homepage by turning it into a central hub for key information and easy navigation, making it more functional and user-friendly.
Menu - Limited Options
The menu was simplified by listing all options on a single page, eliminating the need for scrolling. Unnecessary options were removed to reduce cognitive load, leaving only the essential functions for a cleaner and more focused navigation experience. The search feature was also removed, as it added no significant value and was redundant within the simplified menu structure.
Messenger - Focus On The Conversation
Function as a messenger
The top navigation was simplified by removing unnecessary elements such as company logo and personal profile image. This clean layout allows users to focus on their conversations, reducing distractions and improving clarity for a better communication experience. These pages are designed to support clear and effective communication between patients and medical staff.
Popup Style
Popup-style windows were added for extra options, keeping primary messaging functions separate. This approach makes the main interface more focused while still providing easy access to additional tools when needed.
