The Basics
Our project team included 1 product manager, 5 developers, and 1 designer (that's me) with the supervision by our VP of Engineering and the Senior Director of Product Management. The initial launch of our (roughly) six months of progress was deployed in April 2022.
This project was conducted in tandem with the creation of our portal design system, Helix. You can learn more about my work on the Helix project here.
The Problem
At Strata, our clinical partnerships ordered our testing primarily through our portal interface. With the many different clinical practices operating under differing restrictions, our portal needed to meet the needs of each use case.
Prior to this project, the portal interface was hard-coded for each clinical partner. This practice was time consuming for our engineers, difficult to maintain, and lacked visual consistency.
Research
Before starting on the design of this interface, I spoke with the tenured members of our team to learn what issues our users were facing. This step helped me learn what concerns were high priority for internal stakeholders as well as what impediments our users have become accustomed to when using our portal.
Independently, I conducted a heuristic evaluation against the Nielsen Norman Usability Standards to learn where our tools were working and what elements were falling short. Following that, I collected data by analyzing the comparative interfaces of our competitors.
Once I had completed this deep dive, I compiled all of my data and began work on the initial user flows. This step helped me to establish the information that we needed to collect from each order based on the test they were trying to order, our relationship to their billing department, and what patient information was available to the clinical staff placing the order.
Concept Design
The form needed to be modular. In order to achieve this, the team used the knowledge of our user's mental models to our advantage to create subsections of the input fields.
The form needed to be dynamic. We wanted a format that would be able to change based on the initial answers the user provided.
These two components drove my implementation of a wizard UI.
Helix Integration
In tandem to this project, I was tasked with building out a design system that would be integrated into the new portal interface. This design system, lovingly named Helix, prioritized the elements that I needed to incorporate into One Portal first.
Although this was no small feat, taking this project on simultaneously allowed me the ability to break away from any design debt that we had previously integrated into the hard-coded One Portal predecessors.
User Testing
As part of the project, I scheduled and facilitated direct user testing interview sessions to obtain qualitative feedback on the designs. This step was critical to ensuring the changes being made to the interface would assist in the users workflow.
We conducted this step early and often to allow for iteration throughout the design process. I believe that doing so prevented the need for immediate iteration post-MVP launch.
Wire-framed User Flows
Here you will find the wireframe build out of each user flow incorporated into One Portal. Although these screens are hard to see, they show the multitude of uses integrated into the larger form.
Initially Launched Design
The video below exhibits a walkthrough of one user flow that is accessible within the One Portal design.
User Feedback
After our initial launch, we received glowing reviews of this work.
"This is a combination of every portal I love" - Clinical Support Staff, Mayo Clinic
“Less scrolling and like the view status/results tab as well, as that will with corrections and knowing when new reports are available for download” - Clinical Support Staff, Gunderson
“Portal seems easy to use and easy to navigate” - Clinical Support Staff, Marshfield Clinic
“The new portal is clean and easy” - Clinical Support Staff, Ochsner
“New portal is straight forward and user friendly” - Clinical Support Staff, University of Michigan
“Like the new portal and the training was very informative” - Clinical Support Staff, Ochsner Covington
V2 Component Launch
In order to launch the MVP, I made a few sacrifices in our interface. However none of these sacrifices impeded usability or accessibility. The main component that had to be saved for later was the Side Document Uploader. This document uploader, however incredibly beneficial to our build, was a new feature adoption and an element that primarily benefitted a niche user group.
The feature allowed for one user to add documents for any subsection at any step in the form. In other words, a user would be able to add all documentation, save, and then allow another user to submit the form later without retrieving the required documents from outside their access.
Within 8 weeks of our MVP launch, we deployed this feature.
Retrospective
Looking back on this project, I should have pushed harder on the redesign of the One Portal landing page (or dashboard). Although this component was not fully fleshed out into our project plan, it is a key component of the UI. I was able to implement the Helix design system into this page, however, our development team was unable to include a larger feature adoption into this project's launch. If I had more time, I would've built a stronger solution for MVP.