Background
The patient portal is an user-friendly online website that provides patients anywhere, anytime access to personal health records, educational resources and secure online messaging with their care team.

McKesson owns it’s oncology specific patient portal MyCarePlus for the patients with cancer and their care team since 2015.

Work Year
Jun 2022 to July 2023

My Role
UI/UX Design, Visual Design, Design System, User Research, User Testing

Platforms
Responsive Web App

Why redesign?

McKesson launches an oncology technology and insights solutions as a new business ‘Ontada’ which is designed to support innovation, acceleration, and evidence generation to drive better outcomes for patients with cancer.

As a new business, we wanted to find an opportunity for growth and successfully fulfill patient journey needs.

To begin with, we worked with Accenture’s digital strategy team to find users’ pain points and strategic opportunities to solve the problems.

Phase 1 – Discovery

Phase 1

Discovery

Phase 2

Understanding

Phase 3

Define

Phase 4

User Experience Deisgn

Phase 5

Impact

Phase 6

Key Takeaways

Research: Quantitative Data

Accenture Digital Strategy
• Surveyed 600 patients across treatment journeys and settings.
• Interviewed 30 patients across treatment journeys and settings.

Research: Qualitative Data

Ontada UX
• 3 oncology practice visits and a total
34 Interview sessions.
• Identified patient jorney and discovered persona insights.

Analysis: Patient demographics

Patient profile summary (Both quant and qual)

• 60% of patients were treated at cancer centers.
• 40% over age 60, and 30% between 46 and 60 years.

Social behaviors of patients (qual)

• 8 out of 10 patients used the portal; MyChart.
• 6 out of 10 patients visited websites to find clinical information for their treatment.

6 out of 10 patients were open to using digital tools for managing their care.

– The likelihood increases when patients understand the value of the tools to improving care for them and future patients.

Phase 2 – Understanding

Phase 1

Discovery

Phase 2

Understanding

Phase 3

Define

Phase 4

User Experience Deisgn

Phase 5

Impact

Phase 6

Key Takeaways

Findings

Overall, digital can be an enabler for improving that experience but it is not the sole method. It’s a blend of human engagement enabled by technology.

• The research validated that the patient experience needs to be improved especially at the time of onboarding stage.

• The elements of the experience are extended beyond pure clinical care and are focused on more personalized engagement and patients’ understanding of what to expect.

• It’s not one size fits all. There is a desire to have an improved experience, especially at the early stage, and spanning across treatment and surveillance.

Users’ Pain-Points and Unmet needs

1. Not receiving expected level of personalized engagement from the oncologist.

2. Not receiving support for treatment side-effects management.

3. Not receiving emotional support from care team.

Phase 3 – Define

Phase 1

Discovery

Phase 2

Understanding

Phase 3

Define

Phase 4

User Experience Deisgn

Phase 5

Impact

Phase 6

Key Takeaways

Personas

We discovered Chemo and Radiation treatment has exacerbated pre-existing conditions that have affected patients’ vision, energy, and patience. For the caregivers, assist patients to effectively communicate and empower them to understand their health. For both primary and secondary personas, we have to avoid complex terminology, simplify content and avoid information-dense screens to help guide and focus their attention.

Key Solution Goals: Re-imagined Patient Portal

1. Digital Engagement
Improve connectivity between patients and their care teams.

2. Patient Journey
Better support for patients and their families through the entire treatment journey.

3. Modernize Digital Experience
Build on a sustainable infrastructure to support growing digital engagement needs.

Phase 4 – User Experience Design

Phase 1

Discovery

Phase 2

Understanding

Phase 3

Define

Phase 4

User Experience Deisgn

Phase 5

Impact

Phase 6

Key Takeaways

UX Design Approaches

• Modernize the product holistically by applying the new Ontada’s Design System and provide simple, intuitive and user friendly experiences.

• Help our older demographic users to have a fully accessible contents that are WCAG 2.1 compliant in any devices in any screen sizes.

• For the first release, focused on developing core functionalities such as Health Records, Scheduling, and Messaging.

Audit

We firstly conducted a product review with the existing patient portal product MyCarePlus, and find out problems and users' pain points

Competitive Analysis

There were a number of patient portal products that we could compare and find an opportunity can stand out from the market and bring a new value for patients with cancer.

MCP Problems and Solutions

From the research and analysis, we found our critical issue that disrupts user experiences and we narrowed down a list of them per priority.

Wireframe

Sketching out initial ideas as low-fidelity mockups to prove the concept and critique which direction would serve a better user flows.

Iterations and Evolution

As we developed design prototypes and shared them with stakeholders, we got feedback in the early stage and were able to measure what was working and what needed to revisit the direction. The engineering feedback was very helpful on the homepage, and we almost entirely changed the direction by making each module as a microapp and rearranged the page layout holistically.

Usability Validation – A/B Testing

The new navigation system was quite controversial between horizontal and vertical design. We compared pros and cons and conducted A/B testing to understand the users' behavior and find out what's more intuitive experience to our target audiences.

Feedback and Reiteration

User feedback validated the original horizontal design with a big illustration helping them to interact with menu options much more easily. From the user testing, we also learned that users tend to use smaller devices (1280-1440px wide) than we researched, and the big menu bar takes up too much space. For the final iteration, we came up with the scroll interaction that menu bar resizes and allows contents to have enough space.

Design Decision – For Me

Enhancement
1. Modernized and clearly rearrange interfaces to improve legibility and accessibility.
2. Intuitive navigation allows users to browse any pages from anywhere.
3. Each widget is developed as an individual microapp, and the order is customizable per user’s preference.

New Value
1. All core features’ highlights are viewable and accessible in one place as an aggregator.
2. Provide more context explicitly on who it is for, and where and what treatment this patient is receiving.
3. Fully responsive and supports in any screen sizes, so users can access with any web devices.

Design Decision – Contents Page

Enhancement
1. Prioritizes content within a relevant context, so users can understand the information much easier.
2. Eliminating redundant side menus allows main contents to take more real estate and create a better hierarchy.
3. Only relevant info are shown at a glance and medical terms or complex info may link out for reference.

New Value
1. Leverages relevant key moments in a patient’s cancer journey. (triggered by clinical content within iKM)​
2. Guides the patient towards actions that are most important in that moment. (Simplify by showing what is important: first, second etc.)
3. Visualize the patient's health information with a graph and it helps them more easily understand the data.

Handoff and Finalization – Definition of Done

As an Agile Software Development Lifecycle approach, UX team not only delivered design guidelines and prototypes but also kept working closely with engineering and QA teams by the finish line of the project. Each deliverable came with the Checkpoint card on their Figma page that indicates whether this project accounts for all requirements, accessibility compliance, and performance testing. 

Phase 5 – Impact

Phase 1

Discovery

Phase 2

Understanding

Phase 3

Define

Phase 4

User Experience Deisgn

Phase 5

Impact

Phase 6

Key Takeaways

Positive Feedback: Comments from end users

• “For this to be used and for it to work, it almost has to be oversimplified like this. Everything’s got to be bigger and brighter.” — Dr. Brian Heller.

• “The only thing I could say is our patients are older, they can’t see as well, and it is much easier to see those menus.” — Susan. Patient Care Coordinator.

• “Convenient technology experience attracts and retains patients.” — Melissa. Clinical Staff.

• “The new portal highly Improved for both provider and staff satisfaction with daily workflow.” — John. Account Manager.

Success Metrics

User Success
• Average 16% increase of patient enrollment in the portal over 96 practices.
• 50% of patients use the portal regularly, better-connecting patients and providers.

Performance Improvement
• Microservice approach dramatically improved the data loading performance (average 70% on desktop and 88% on mobile) compared to the traditional monolithic architecture.
• Established the first fully responsive and reusable react framework for our design system.

Phase 6 – Key Takeaways

Phase 1

Discovery

Phase 2

Understanding

Phase 3

Define

Phase 4

User Experience Deisgn

Phase 5

Impact

Phase 6

Key Takeaways

Key Takeaways

• Experienced the holistic end-to-end solution in Agile Software Development Life Cycle (ADLC) and kept improving collaboration processes in a cross-functional team.

• Had an in-depth understanding of a specific user group and solved problems for them as a user-first design approach.

• Led the entire project from the design system’s perspective and trained both UX and engineering teams to correctly use the design system in their projects.