OrthoFX Patient Portal

At OrthoFX, a startup competitor to Invisalign, I wore many hats in a fast-paced environment, solving complex problems. I conducted research, proposed designs, prototyped, and wrote copy. I also collaborated with teams to manage OrthoFX's B2B and B2C websites and portals for teeth straightening technology.

Product Requirements

Our strategy began with interpreting the PRD into actionable steps.

1. Purchase products on the portal

   • Update orders

   • View orders and payment history

2. Patient-specific next steps

   • Upcoming appointments

   • Order shipping information

   • New products

3. Modernize UI

   • Improvements to 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 adding new features to the patient portal, OrthoFX patients will be clear of next steps in their treatment.

Personas

OrthoFX’s loose target demographic at the time focused on more fashionable women between the ages of 21-35 years old, with an average household income of $50,000.

Competitive Analysis

Analyzing other websites clarified user preferences. We liked Amazon’s checkout flow, Yelp’s design, and Kaiser Permanente’s portal.

• Amazon: subscription and checkout flows

• Yelp: illustrations, icons, and typography

• Kaiser Permanente and Palo Alto Medical Foundation: patient portals

• Dollar Shave Club: creative zero states and customer accounts

• Quip: well-designed product information

Wireframes

The patient portal lacked excitement and functionality. Adding next steps and patient expectations would improve it.

User Testing

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

Unable to test with actual customers, we tested with two non-customers matching the target demographics. I explained OrthoFX as a clear aligner company. Ideally, testing 20 users would be more beneficial with more resources.

Each user was asked to complete a series of tasks

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 Observations

• There needs to be an orders navigation link

• An account page would be useful with information on shipping, buying, and canceling 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 Observations

• 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 a recommendation from a doctor…its confusing with so many different month options”

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

Revising Designs: More Helpful Links on the Nav Bar

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 advanced, we prototyped designs and presented them to the engineering team, explaining each screen's flow. Conversations with the engineering team uncovered technical issues unforeseen by the design team or product manager.

Roadblocks We Solved Together

Challenge #1: Changing Addresses

Changing shipping addresses 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 : Resubscriptions

Re-subscribing after canceling the retainer subscription requires 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 canceling would require a re-scan from their doctor.

Challenge #3: Expired Credit Cards

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: Free Retainers First

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

→ To solve this challenge, we created a pop-up box that gave the 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 number 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.