About: There are people who are in need of public services but do not know where and how to access them. Many people in need have cell phones and access to technology at libraries and other public facilities.
What can keep them aware of services, gather information, and make informed decisions about obtaining assistance? How will they understand how many service providers there are and what associated information is required to gain assistance?
Materials: Figma, Adobe Illustrator, Google Docs
Class: IDT 150 Digital Prototyping
Duration: 5 weeks
Team: Anna Tran, Brianna Warren, Cindy Wan, Grace Mensing, Harish Bommakani
Role: UX/UI Researcher and Designer
Brainstorming an Initial Idea
Discussing ideas as a group
Given the very broad topic, each person began by noting their initial ideas of what we could help with. We then looked at everyone’s answers as a group and found lines where many of us were seeing a need.
We selected my idea: focusing on healthcare as a type of service, and someone in a new area as a demographic type in need of service assistance.
Meet our Persona: Julie
Creating a persona to establish empathy
Given the very broad topic, each person began by noting their initial ideas of what we could help with. We then looked at everyone’s answers as a group and found lines where many of us were seeing a need.
Julie's Painful Journey
Walking through Julie's experience of twisting her ankle
To understand the pain points of the healthcare system, we created a journey map highlighting the steps of Julie twisting her ankle and seeking help. We showed the level of emotion through each step, which showed where a web app could help make these lows easier for Julie.
Workflow of Healthcare Web App
How to seek urgent care and cursory-level insurance verification
We want to streamline the process for urgent care seekers. We made sure to include variants for registered users and guests because not everyone wants to share their info. This was added later after discussion and is reflected in both the site map and workflow. This helped us find out where decisions need to be made and how we get from “I need care” to “I know where I am going and feel fairly confident it will work for my budget/location.” In the end, we want to have the option to pass off our service to other pre-existing apps or services to streamline care and decisions even further.
Information Architecture of Healthcare Web App
Hierarchy focusing on the sequential flow
Our goal was to get our user healthcare that fits their needs as fast as possible. We included additional features such as a login, which is represented by the red diamonds showing the required steps to reach certain pages. The profile information feeds in and out of the sequential flow, integrated apps, and networks to allow for improved capabilities as seen by the dashed lines.
Wireframing the Flow
We split up as a team and each completed our own wireframes for how we envisioned our healthcare web app. I wanted to focus on the information the user gave and how they would interact with the web app to input that at different stages. If a user was signing up for the first time, their path would have minimal resistance in order to provide care as soon as possible. Existing users would easily log in and update information if they needed to, as well as view their favorite places to receive care. Finally, a guest user would have to use filters to provide information for a narrowed search, but they would still quickly find what they are looking for. I included signing up with an existing account and uploading a picture of a user's insurance card to make the process smoother.
Below are the wireframes I created that the group ended up moving forward with.
Flow Notes
Sign Up Wireframe Flow
Log In Wireframe Flow
Guest Wireframe Flow
Phone View of Wireframe Flow
Redesigning and Establishing the Golden Path
Using cool-toned colors to calm the unwell user
Our professor instructed us to use an existing design system to finalize our prototype. I found the design system called Orion and tweaked it to fit the mood we want to exude to users. I made the primary color a bright blue that is still calming but not boring or corporate. I redesigned the web app, now called Care4U, with more information and directions at each step. Our team established a golden path that new users would take as they signed up for the first time. I included the scan insurance card step during this process to make the process easier. Also, the steps help the user understand which part of the sign-up process they are currently on and how soon they can expect to access the web app's main feature of finding filtered care fast. I used more colors, such as green and yellow, to show more clearly which places take a user's insurance and which do not.
High-Level Use Cases
Considering other personas
As a team, we wrote ten high-level use cases of potential users and what needs should be met by Care4U. We thought through the specific features of Care4U and how they would apply. This helped us with finding users to test our web app as well as scoping our prototype.
Final High-Fidelity Prototype
Using critiques, iterating, and testing with users
After showing our golden path in class, we received great feedback surrounding the tone of our web app. Our professor was not feeling as at ease as we intended. We decided to add a mascot, Care Bear, to help guide users through the whole web app with questions and directions. After this change, we took it to the field to test on potential users.
We tested how easy it was to use, how helpful it was during an emergency, how smooth the sign-up process was, and if users would just "continue as guest" or sign up. We allotted 30 minutes for each user and approached the testing as an unmoderated remote walkthrough. We were there to give help on small confusions when needed and ask guiding questions about hypotheses if not already addressed. We wanted to see how a new user would approach a new web app. The test users we selected we our version of Julie: nearby age, had experienced urgent care, not terribly experienced in insurance handling, and recently moved to a new place. Most people were close relations, i.e. siblings, coworkers, and close friends.
Based on the responses we have received after user testing, users wanted to use “continue as a guest” rather than sign-up. If they did want to sign up, they wanted to do it through Google or Apple instead of email. The sign-in process is smoother than other insurance sites that users deal with. Features like insurance card scanning are good but half the testers prefer to type it in manually for a sense of security. Once into the map view, the button and search bar were confusing because they looked like a pop-up ad. The majority of the users selected “allow while using the feature” because people don’t want the company collecting data to see what they are doing elsewhere and the “allow once” is annoying having to give it permission every time. Personalization (teddy bear, RICE method page, search by problem) helps a lot and is a better alternative to sites such as WebMD. The color scheme is calming but also serious. It is not too relaxing so the user focuses on finding help but also does not feel too juvenile. Overall, users deemed it easy to use if someone is panicking about a medical problem.
With More Time and Resources
Lessons Learned
To further improve Care4U, we would clear up minor features that seemed to confuse users like the text of buttons/description fields, ratings vs favorites, etc. We would include scanning the back page of the insurance card and putting a disclaimer on the insurance scan card for what exactly can be scanned. Once a place is selected, we will add details about hours of operation, appointments, wait times, and forward medical information. Also, adding trusted sources for at-home care in the meantime.
I enjoyed gaining the experience of working with a group of students who were learning UX/UI design for the first time. I taught them how to use Figma and the importance of user research and feedback. However, this set back the fidelity of our project with the time constraint, as I was the only person designing the prototype.
