Context

“Create a holistic UX project by using state-of-the-art tools and methods to complete a full UX design iteration, from user needs finding to prototype evaluation.” for IN4MATX 132: Project in Human-Computer Interaction Requirements and Evaluation.

My Role

Lead UI/UX Designer

Duration

10 Weeks, 1 Academic Quarter

We found inspiration in the inefficiencies of urgent care hospitals, especially their long wait times and outdated check-in processes.

Many of us have recently been to urgent care for different reasons, and while sharing our experiences, we found the entire process of being checked to be outdated, inefficient, and in dire need of improvement. While researching, I came across statistics that proved that our experiences were shared with many other patients.

A Critical Issue in Healthcare: An Inefficient Urgent Care System.

In emergency situations, timely access to medical care is essential, yet many patients face significant delays during the check-in process at urgent care facilities. This inefficiency is particularly problematic and frustrating for individuals with life-threatening conditions who require immediate attention.

Project Roadmap: Let’s get down to business.

As this was a relatively longer and larger project, we had to ensure that we were able to stay on track. To do so, our project manager created a Google Sheet to keep track of our deliverables given our time, resources, and individual skills present in our team dynamics.

An image of a sheet that displayed all of our deliverables, who was in charge of completing them, and deadlines

Interviews: Blending in-person interviews and Google Form responses.

Specific interview questions about the experiences our target audience experienced with their recent visits to urgent care helped us pinpoint specific features we wanted to implement into our mobile application. Some of these questions included:

  • What is your largest concern regarding healthcare visits?

  • Would knowing the wait times in advance change your decision about when or where to go for emergency care?

  • Can you describe your last experience with hospital wait times and pre-check-ins?

  • What was satisfactory and what was frustrating about the process?

In-Person Interviews: User quotes that birthed some of our app features.

These quotes shaped many of the future design features of our app, as we wanted to target the issues that our target audience had to improve their urgent care experiences.

I couldn’t check in on my way there and I had to be physically present at urgent care to fill it out, which I found to be very frustrating.

I would be willing to drive further if that meant I could be seen sooner.

I wish there were more updated wait times and reasons for delays, so there is complete transparency between the hospital and its patients.

  • The color palette is not accessible.

  • Too text-heavy; add more images.

  • Pretty unclear user flows due to a lack of user-friendly interface.

  • Not aesthetically pleasing to the eye.

User Personas: People frustrated with the urgent care process.

We created different personas that were based on the overall trends we found within the 53 people we researched, which included demographics and general experiences with urgent care. I found that there were 2 main sub-populations that people generally fell under: those who frequently visited urgent care and those who tried to avoid going to urgent care, which I created personas to represent.

persona of olivia chen

Olivia represents the sub-population of our interviewees that frequently visits urgent care.

persona of ethan nguyen

Ben represents the sub-population of our interviewees that only occasionally visits urgent care.

Competitive Analysis

Since we wanted our application to have features that made it stand out from other competitors, we created a competitive analysis chart with the features we intended on implementing. We found that not one application exists that has all the implementations.

competitive analysis chart comparing mychart, gohealth, summit cityMD, and carbon health

Problem Statement: The real one this time.

After our research and finding out the different problems our target audience truly experienced, I created our final problem statement to emphasize the issues we wanted to target and centralize our implementations around them.

Our Solution

We drafted an initial list of features we wanted to implement that directly addressed our problem statement.

  • Pre-check-in feature to save time.

  • Display live wait times to improve transparency between hospitals and patients.

  • Patient portal to help save information and save time.

  • Display co-payment and insurance eligibility to improve financial transparency.

Sketches: Getting all our ideas down.

We had some initial sketches, as we all had so many different ideas we wanted to implement into our mobile application. We mapped out some of our features on a whiteboard, such as having a map feature, a login page, pre check-in, and a clearer wait time depiction.

Lo-Fidelity Wireframing: Bringing our sketches to life.

With our initial sketches, we then planned out how we wanted certain features to look in more detail while ensuring we still had all the different components we all wanted to implement as a team.

lofi wireframes that show in more detail the frames we wanted to include

High-Fidelity Wireframing: Our first iterations.

With our low-fidelity wireframes in place, we then created sample screens in high-fidelity to see how they would look with a color scheme.

hi fidelity wireframes of yucare

Feedback: How can we improve?

After asking for feedback from our teaching assistant, we took notes on some critical errors in our overall design that needed to be fixed.

Re-Iteration: Let’s make our prototype even better!

Taking the lead with these designs, I ensured every concern was addressed. Using my previous Figma & UI/UX design experience and learning more about good design habits through YouTube videos, I was able to prototype drastic improvements to our initial design iterations.

revised hi fidelity wireframes

Conclusion: My most important takeaways.

  • Importance of Accessibility: Often overlooked, I never realized how inaccessible everyday tasks could be for those with disabilities, especially those with vision problems attempting to navigate the internet. I understand that, as the lead designer for my team, I had to consistently produce and maintain accessible content to ensure we could reach our entire target audience, which includes those with disabilities as well.

  • User-Friendly Interfaces: Although this might sound obvious, one of my most valuable takeaways is that I need to design with the eyes of the end user, not with my eyes. Certain aspects might seem intuitive to my own eyes but confusing to other users. Conducting usability testing and ensuring to get constant feedback from my peers, team, and teachers helped improve our project as well as my design skills.

Teammates

Amanda Takahashi, Alice Tran, Janina Wu, Hyeon Woo Seo

Tools Used

Figma