OrthoFX — Patient Portal

Role: User Interface, User Research, Prototyping, Wireframing, Visual Design, Copywriting

Team: Curtis Ying and Andrea De Luca (Researcher and Designer)

Project Type: Web

Duration: 6 Weeks

Tools: Sketch App, Figma, Photoshop, Illustrator, & Invision

This was work done during my full-time employment at OrthoFX as a UI/UX Designer

Overview

OrthoFX is a clear teeth aligner company that prioritizes health, honesty, and professional care. OrthoFX connects you with the best doctor care, best aligner technology, and best affordable pricing with no hidden fees.

Context

During my time at OrthoFX, I was able to wear many hats in such a fast-paced start up environment. OrthoFX has a complex system containing multiple websites that must dialogue with one another. There is a doctor portal, patient portal, consumer website, admin website, and staging website.

For the patient portal, I was engaged in every part of the project which included the research, design work, prototypes, user flows, copywriting, and cross-functional team collaboration.

In this case study, I will highlight the work done for the patient portal redesign from beginning to end (including the learning and reiterations done while communicating to the engineering team).

Product Requirements

Our strategy began with interpreting the PRD into actionable steps. From there, we could enhance the experience and add additional features to fulfill the requirements given to us from our product manager.

1. Purchase products on the portal

   • Update order: cancel, change subscription frequency, shipping, and payment methods

   • View orders and payment history

2. Patient specific next steps

   • Upcoming appointments

   • Order shipping information

   • New products to try (i.e. full treatment and retainer subscription)

3. Modernize UI design (more attractive design layout and visuals)

Problem Definition

Current OrthoFX patients have difficulty determining next steps during their teeth treatments, because the current patient portal lacks clear next steps.

Proposed Solution

By redesigning and adding new features to the patient portal, OrthoFX patients will be clear of next steps in their treatment.

Defining the user

Personas

Moodboards

An analysis of other websites and portals gave clarity to what patterns users are already used.

We specifically liked Amazon’s subscription and checkout flow, Yelp’s illustrations, icons, and use of typography, and Kaiser Permanente’s portal experience.

• Amazon subscription flow, checkout flow, and order history

• Yelp tactful use of illustrations, icons, and typography

• Kaiser Permanente & Palo Alto Medical Foundation were great patient portal examples and included features to check messages, care team, and upcoming appointments

• Dollar Shave Club has inspiring and creative zero states and a great customer account experience

• Quip with a lot of information cleverly designed to not overwhelm when selecting the many product features

Wireframes

The current patient portal lacked overall excitement and functionality. More valuable information such as next steps and what to expect as an ongoing patient could be valuable additions to the portal.

User Testing

Two users navigated through a low-fidelity prototype of the patient portal.

We were unable to conduct user testing with more users or to our current customers, so the team conducted user testing with non-customers that matched the targeted age group and demographics. Since the users were not customers, I explained the context of OrthoFX being a clear teeth aligner company. Ideally, testing 20 users would be more beneficial if given more resources.

Each user was asked to complete a series of tasks such as:

Task #1: How would you go about purchasing an OrthoFX Treatment?

Task #2: How would you go about viewing your order history?

Task #3: How would you go about changing your retainer subscription from 6 months to 3 months?

Distill findings

Both users we tested affirmed the need for more navigational links on the dashboard to highlight obvious user paths.

User #1

• There needs to be an orders navigation link

• An account page would be useful with information on shipping, buying, and cancelling orders

• Finding products for purchase was difficult without a products navigation link

• Treatment doesn’t seem to be the right name to change subscriptions

User #2

• The ability to change my address is hard to find

• “As a user I don’t know when I would need a new retainer…I would go with recommendation from doctor…its confusing with so many different month options”

• It would be helpful to have an account button to change my addresses easily

Revised Designs

With our user testing feedback, we changed the flow of the portal and added a Products, Account, and Orders link to our navigation bar in order to increase predictability in our design experience.

Collaborating with Engineering

As we progressed, we created prototypes of our designs and presented them to the engineering team. We walked through our sketch file and explained the flow of each continuing screen.

Conversing with the engineering team during the process helped us realize several technical issues that neither the design team or the product manager could have predicted.

Challenge #1

Changing shipping address with subscription services can easily confuse our system of manufacturing and shipping products.

→ We solved the problem by preventing changes to the shipping address if it was only one week before the next shipment date. This allowed manufacturing enough time to adapt and make the new address changes.

→ We also made the distinction of shipping and billing address clear from the start when patients first filled out their information.

Challenge #2

Cancelling and then re-subscribing to the retainer subscription would require a re-scan, because we cannot guarantee the teeth have shifted or not ever since cancellation.

→ To solve this challenge, we created a series of pop-ups that warned and educated patients that cancelling would require a re-scan from their doctor.

Challenge #3

The credit card of the subscribing patient has expired.

→ To solve this challenge, we created an email sent to the patient asking that they update their payment information as soon as possible.

Challenge #4

Patients should not purchase retainers if they finished their treatment that grants a free pair of retainers.

→ To solve this challenge, we created a pop-up box that gave next steps on how to redeem their first pair of retainers free.

→ To make things easier, we also presented the contact information of the care team to reduce the amount of hurdles the patient had to go through.

High-Fidelity Prototypes

Dashboard

Keeping the project requirements in mind, we accomplished a more modern UI and incorporated patient specific next steps that showcased new products, upcoming appointments, and messages on the new dashboard.