The same homepage collage of application components displaying their UI design. The components include a table of patients, a processing complete banner, an order summary module, a meridian graph module, and a place-an-order button.

2022

Making contact-lens ordering more visionary

Designing custom scleral lenses is no easy feat for eye doctors. Using ecommerce style patterns, we streamlined the process and diminished their need for software training.

Client Project • UX/UI Design • Healthcare

TLDR; Key results

Optimized ordering flow efficiency & timing by implementing an ecommerce flow pattern
Modernized design of the dashboard for improved order tracking
Increased user satisfaction from testing with practitioners

Context

BostonSight is a scleral lens manufacturing company that many eye doctors go to for patients with visual abnormalities. The custom nature of scleral lenses lends itself to a more comfortable fit, however it results in a more complex process to configure the correct size, shape, and material. To make the process easier for practitioners, BostonSight set out to create FitConnect—an app for designing lenses, placing orders, and keeping track of patients.

Problem

When it came to placing a new order for a patient, practitioners relied heavily on the application’s training videos and instruction—which took precious extra time in a doctor’s already crazy schedule. They needed it to be quicker and easier.

A website screenshot displaying the FitConnect starting new order screen, paired with 3 overlaid sticky notes. The sticky notes read: 'Disorganized layout makes it hard for me to understand what I need to fill out.', 'Content is small and hard to read. It doesn't feel like a modern app.', and 'If I need support while placing an order, I have to exit the flow.'

Process

To solve this problem, I started by looking to other online flows that allowed users to “build” a fairly complicated custom product—like building your custom car, or designing your very own custom Converse. This concept, while a bit more complex than a simple “add to cart” style flow, is fairly commonly used and vetted across hundreds of companies and their users—so we decided to try it out for a new patient order flow.

Two wireframes of the redesigned flow for the select a patient page and the measurements page. The redesign features a progress bar at the top, with an order summary module on the right and more organized form options in the main page area.

This concept immediately resonated with stakeholders, supervisors, and researchers so I got to work converting them to a higher fidelity. The iterative process did glean a few new details and revisions to solve for as we went. For example, one aspect that stakeholders called out was the way in which doctors choose the correct product. Our initial solution was to keep products simply laid out in cards—but it turned out that there were many dependencies across fit and type that would require a specific order of selection.

A series of design iterations that shows the 'start an order' options changing from radio buttons, to cards, to table rows, and landing back on smaller cards.

With the design of the dashboard and ordering flow largely finished, it was easy to start building a design system of components and styles. This would not only help us finish designing additional pages in a consistent way, but it served as a cohesive set of guidelines for the design and development of FitConnect as a whole.

Using these guidelines we were able to iterate on designs for key pages like the main dashboard, the patient account page, order history, login, and billing.

A figma design system with a color palette, accessibility considerations regarding color contrast, and components like the order summary module.

Solution

After many rounds of feedback, we landed on a more modern dashboard and wizard-like ordering experience, with much cleaner pages for orders and patients.

The optics and properties page, step 3 of the new flow. Features tabular form fields and an image of an eye to determine dot location.

The orders page and an example patient details page, both featuring tabular data about orders.

User Testing

Working with a UX researcher, 5 practitioners were interviewed and tested out the figma-built prototype of FitConnect. Overall the participants were much happier with the simpler dashboard, flow and navigation.

“I am confident that I could maneuver through here very easily. I don’t see myself as having issues where I would get stuck and have to call consultation. I could do this easily.”

“This feels really smooth and easy. I like that there are some tips that are available too. I feel like the whole thing got moved forward ten years.”

Improvements

Practitioners called out a few areas that could be improved upon to make their experience more convenient as well as enhance clarity for new fitconnect users.

A before and after diagram displaying the patients in fitting process table. It reads: 'Testing Insight: Seeing the status of a patient's last order is a high priority so I know when to schedule their fitting appointment. Improvement: Last order status column was added to the table in the dashboard, with appropriate color coding.'

A before and after diagram displaying the meridian graph module. It reads: 'Testing Insight: Participants suggested additional reinforcement of axis (degrees) labels to confirm fitconnect uses the same conventions they are used to. Improvement: Display the degree amount along with an orientation graphic for extra clarity.'

A before and after diagram displaying the order summary module, the before collapsed and the after expanded. It reads: 'Testing Insight: On the review screen, I want to automatically see the order details as an expanded summary. Improvement: Revamped the order details to be a more in-depth summary—which is auto expanded on the last screen for one less click.'

Final Designs

The reimagined FitConnect makes placing and tracking orders much more intuitive.

A desktop computer with the newly redesigned FitConnect dashboard up. It features 3 large buttons to place an order, register a patient, and view order history, along with a patients-in-fitting-process table, a billing module, and a tips module.

A collage of final UI components, including menus, modules, forms, and buttons.

The Difference

In the end, not only did we optimize the ordering flow efficiency & timing, but we also modernized the design of the dashboard for improved order tracking. User satisfaction also increased, from testing with practitioners. My key design takeaway? Complicated procedures don’t require complicated UI—in fact it’s the opposite approach which made this redesign so successful.

Thanks for reading!