Mei Yi Tan
Project Summary
A Texas Urgent Care wished to reconstruct its mobile app from the ground up to encompass off of its services in a way that its users could easily access.
The project successfully produced a mobile web app, creating efficient lines of communication between care provider and patient while reducing the necessity for in-person visits.
Roles
- Sole UI/UX design contributor
- Interfaced with the client to gather requirements and feedback
- Collaborated with software team to understand technical limitations
Project Type
Client Project at a Consultancy
Tools
- Figma
- Slack
- Google Workspace
- Zoom
- Adobe XD
Duration
1 year
Define
Background
Next Level Urgent Care (NLUC) is a company that provides affordable urgent care through various clinics in Texas. It has over 150M+ in revenue, 300K appointments per month, and 40K members of its prime subscription.
- Project Objectives
- This project aimed to provide more user-friendly care while simultaneously allowing care providers to reduce non-urgent in person visits.
- Project Deliverables
- Mobile app with 3 workflows: a visitor, a registered user, and a prime user in their insurance program which allows for virtual visits amongst other benefits.
- These 3 different users needed completely different experiences on the mobile app: A visitor with limited access and encouragement to registration, a registered user with access to some services and a direct line to care providers, and Prime users with access to extra care tools and care provider priority under the company’s own insurance.
- Project Assumptions
- Patients will more efficiently connect with their care providers.
- Providers will more easily manage urgent and non-urgent cases.
Problem
There was a need for an improved patient mobile experience from an existing user metric that showed that a large amount of visitors to their services preferred mobile.
Problem Statement
How might we design a mobile user experience that optimizes access to NLUC’s existing services?
Ideate
User Flow
A key consideration was what the users of the old app were already used to, which comprised of a series of buttons that took the user to web links. We did not want a repeat of this, but the familiarity of the initial startup page’s core essence (a collection of routes to other functionalities) was kept to ease old users into the new experience.
On the other hand, the old app did not have login functionality, so the entire user flow had to be made from scratch. Therefore, the mobile revision needed paths stemming from what each user type could access. The focus was making sure core parts of the patient experience were upfront. For example, patients needed to access their billing and upcoming appointments foremost. The patient should be able to view key appointment information at a glance when logged in.
Key Features
- (Visitors) Account Registration
- (All Users) Allow users to virtually get in line to see a care provider ASAP.
- (All Users) Ability to make in-person appointments
- (Registered Users) Appointment Management
- (Registered Users) PHI / Medical Records like current medications.
- (Prime Users) Symptom Checker, a quiz that determines if a user has common medical issues that can be resolved over-the-counter or was more serious and required physical attention.
- (Prime Users) Vitals Checker, an external API service that scanned a user’s face to determine vitals information.
The example below shows:
- Path to the main dashboard from upon initial download of the app for the 3 user types.
- 2 key workflows: How a patient experiences getting in line for urgent care & How a patient schedules a future appointment.
Visual Styles
- I created the concept the basic design rules the mobile app would follow
- The client provided a loose style guide to follow
Mid Fidelity Designs (Early Concepts)
Since this app was completely from scratch, I concepted some mid-fidelity screens with focus on how the app would be structured.
Based on the aforementioned workflows and the essence of the old app, I focused on the most clear paths a user could take. Since the app was aimed towards families, my goal was to ensure that the newfound complexity of the mobile experience could be easily navigable for users of most ages. The more tech-savvy younger generation would ideally breeze through the user journeys and the older ones would at least ideally get the gist pretty quickly.
The examples below of how the user would first see the app and how a registered user’s dashboard would appear like would be taken to the client for review.
Navigating Complexity
Because the app is a complex web of experiences and integrates services that call external APIs, there was a careful balance to strike between technical capability and user perception.
It was crucial for me to understand the technical side and actively speak to developers during my design process.
Areas where this became more apparent were with the additional Prime features like the Scheduling Virtual Appointments and Vitals Checker. This is because both required extensive use of an external API that had limited capabilities.
For example, Virtual Appointments could not load a certain number of available appointments at once. This was a problem because the client requested that a user should be able to see a several months’ worth of options. This required extensive deliberation between me and the software engineer on this part of the project. Ultimately, we balanced a way to incrementally load appointments, much like lazy loading. That way, upon initial load, a user would be able to quickly access a few options but as the user scrolls more would continue to appear.
Another area of complexity included the Symptom Checker Questionnaire. While simple in idea, the execution required pure attention to detail as each new answer to a question brought users to either scheduling an appointment or a request for a specific kind of over-the-counter treatment.
This process required quick and responsive communication between the medical expert, my design of the questionnaire’s UI, and the software engineer in charge of implementing it. I had to make sure I was in direct contact with the medical expert from the client’s side to ensure users would be led to appropriate treatment. The user flows itself were also complex in nature, as some answers resulted in branching pathways.
Below is an example of its complexity. A user flow was made in Figma to track each route.
Version 1
Visitors
These user types can only access two key features and therefore do not get a user dashboard but more of a landing page with some interactivity.
It was important for it to update with the Get in Line feature to keep visitors informed about when they can see a provider without being logged in.
Registered Users
These users have information saved, which speeds up processes like filling out forms. Past appointment information is also saved.
From the main dashboard, all key appointment and medical information is designed to be glance-able but not as robust as a prime member dashboard.
Registered users are also able to receive account alerts informing them of expiration or required medical followups.
- Cards are critical for summarizing information and as reusable components.
- Variation between primary and secondary buttons to indicate optional or features that are not focused on.
- Using colors on subtitles to color-code between appointment types and inform users quickly.
- Ex: Green “Urgent Care” text, Blue “In-Person Appointment” or Orange “Virtual Appointment”
Prime Users
These users have extra features along with all core functionalities registered users have.
- Explicit PRIME labels on users and certain features to make users feel special.
- Virtual Appointments are easily accessed from Prime Dashboard.
- Card ordering depending on priority and importance is emphasized due to many features.
Prototype 1
All 55 screens of the high fidelity prototype were converted into a responsive web app released in 2023.
It integrates several services including Mend to manage patient appointments and information and encompasses the entire Patient-facing experience.
Evolution - Version 2
UI Revisions
The client wanted to lean more towards usage of cards and boxing information together. I had created a phase two that completely reused all of the previous content and formatting which the client wanted to keep and cleaned up.
- Better Design System with more reusable components
- Reorganized to follow single-column formatting
- Additional navigation bar for quick linking to core features
- More indicators like horizontal scrolling prompts
Prototype 2
The second prototype provides the same structure served in better organization of feature priorities.
Comparisons from V1 – V2
In appointment scheduling, the UI format changed to accommodate picking from a month range rather than a weekly basis.
The screens were also spread out a bit more to break up the stages of choosing an appointment. Rather than choosing a provider and times all at once, a user would be less inundated with information by choosing a provider first.
V1 – Schedule Virtual Appointment
Based on a weekly view and condensed so a patient chooses most information on one page.
V2 -Schedule Virtual Appointment Revised
Scheduling a virtual appointment now has 2 phases with more information about the provider displayed upfront.
Reflection
Clarify Vision
If I were to do-over this project, I would ensure that we had a clearer vision of what the client would want upfront. Although I had proposed possible visions for client review in the beginning, there were functional details down the line such as what the client wanted certain content to say that was not clear and held up some development later. I would want to gather possible content from the client upfront in the future.
User Personas
Since we had 3 distinct types of users, I would also like to make user personas to refer back to in addition to identifying key age groups with technological capabilities.
Determine KPIs
For this project, I would have tracked its success on whether people were making most appointments on the app versus contacting the team directly. Another KPI I would consider is the average number of patients going to see doctors in person lowered because NLUC was trying to reduce providers being overwhelmed.