OrthoFX — Patient Portal

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

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

Project Type: Web

Duration: 5 Weeks

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.

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

Product Requirements — Patient Portal

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. Modernize UI design (more attractive design layout and visuals)

2. Purchase products on the portal

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

   • View orders and payment history

3. Patient specific next steps

• Upcoming appointments

• Order shipping information

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

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 Premanente’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, what to expect, and marketing could be valuable additions to the portal.

The new design needed to incorporate more calls to action and patient specific information. If a patient had already purchased our trial product, we would want a module that advertised our full treatment product as their next substantial purchase.

User Testing

OrthoFX’s target demographic at the time focused on women between the age of 21-35 years old. We successfully tested two female users, 25 years old and 30 years old.

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

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?

As a startup company, we were limited in resources to collect more qualitative and quantitative data from users. Therefore, we made use of what did have.

If given enough resources, I would propose conducting more user interviews with more actual customers to better inform the decisions we make. We were unable to conduct user testing 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.

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 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.

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.