Coroway App- UI/UX design for Covid-19
The UI/UX design case study on the mobile application Coroway that facilitates searching for clinics, test results, and contact tracing.
Overview
About the Project:
Coroway is a new app designed to help people search for COVID-19 testing locations, book an appointment, get a code or get in line for a testing location all through the app. They are also able to keep track and view their test results, and complete contact tracing.
My role:
User Research, Visual Design, Prototyping & Testing
Duration:
June 2020- January 2021
Tools:
Sketch
Miro
Invision
The problem:
During the pandemic, I had to get tested for COVID-19. The process of finding a location had to be done on my desktop and it took some time to settle on a location. I spent about three hours waiting in line at a testing location, and during this time I was looking for a different location that would be faster. After I got tested, it took almost two weeks to get my results and was fed different information every time I called to inquire about my results. I wasn’t the only one experiencing this frustration. There were multiple people that found the entire process cumbersome as well. When I spoke to friends and coworkers they all had similar experiences. Multiple of my coworkers would find a location, but once in line, they realized they weren’t going to be able to get tested. We would help each other out and send the clinics we were going to in hopes that it was a better option. Multiple of them left their original location to go to a second one. One of my friends waited over two weeks to get her results. She called the clinic a few days in a row and one day they told her she would get her results on one of two websites but they didn’t know which one. She called the next day and this time they explained her results would only be found on one website. After hearing all this, I wondered if there could be an easier way to search for locations and view our test results.
The Process
Discover
Define
Develop
Deliver
Evolve
-
Secondary Research
-
Interviews and Observations
-
Affinity Mapping
-
User Personas
-
Empathy Mapping
-
Site Map
-
User Flows
-
User Stories
-
Brainstorm
-
Wireframing
-
Branding
-
Prototyping
-
Usability Testing
-
Iterating
-
Usability Testing
01
Research
Before anything, I needed validate if there really was a problem and get a better picture of the problems people were facing. For this reason I conducted secondary research and conducted interviews.
Secondary Research
I first started by conducting secondary research, where I learned the demand for Covid tests was at an all-time high.
-
Facilities are running out of tests within the first hour of opening.
-
Problems at almost every stage of the testing process
-
In only 7 minutes, all 1000 appointments were taken up for the day.
-
Before conducting secondary research, I was only interested in finding a location and getting test results.
Still, while conducting secondary research, I learned that the job of contact tracers was quite difficult.
Interviews & Observations
I interviewed five people tested for COVID-19. I wanted to learn about their issues or any successes in their COVID-19 journey. Interviews were semi-structured in nature, all from different ages, industries, and locations.
These are just a few of the people I interviewed and the most insightful quotes.
T. Gaston
It took me three days to find a testing location because every time I arrived at a site, there was a HUGE line, and I knew there would be no chance of a testing kit by the time I got to the front.
R. Mayott
I was pretty confused at the testing site. I just saw a long line of cars and could not see the endpoint. There were no instructions and no signs.
L. Northrop
The place I went to was great. Clear communication, only waited 45 minutes. I received my results in three days. The easiest thing was doing it online and already inputting my information in so I didn't have to do it at the site.
02
Define
After conducting interviews and research, I needed to gather my notes and make sense of it all. I first created an affinity map, then created user personas, empathy maps, site maps, user flows, and user stories.
Affinity Mapping
To get an in-depth analysis of the qualitative research data, I created an affinity map. This session helped me in categorizing and prioritizing the data of problems, issues and challenges the users faced.
Understanding
the User
I created personas to represent user groups that will face similar problems. I based the user personas on their interviews about their behaviors, pain points, and needs.
Problem Space
Issues Found
1. Users felt lost at testing locations because there was no indication if they were in the correct line to get tested.
2. Lack of communication between the clinics and the users.
3. Would take multiple days to find a testing location that met their needs.
4. Users had to open multiple tabs and windows to compare clinics.
5. Users were unaware of when their test results would come in or where to find them.
Reframing the Problem
How Might We:
After looking over the research, it was quite easy coming up with How Might We questions. Some of the questions I set out to answer are:
-
HMW we facilitate finding locations?
-
HMW keep user informed on test results?
-
HMW make it easy to book multiple appointments?
-
HMW reduce wait time at locations?
-
HMW make users feel at ease with contact tracers?
.jpg)
Brainstorming
Sketching Initial Ideas
During the ideation phase, I set out to solve some of the HMW questions. Questions like How might we inform the users of the wait time, How might we reduce the uncertainty of the end of the line at testing locations. Below are some of my sketches during the brainstorming session.
Information Architecture
Site Map
After sketching out some ideas, I created a Site Map to help me to visualize the various pages that I would need to design for my app.
User Flows
With the site map complete, I created user flows to help me identify the critical paths users will follow when using the app. Since the app's main focus was to search for locations, book an appointment or get inline, and contact tracing, these are the flows I focused on. The first flow shows how the user might search for a location. They might decide to go directly to the map and search on the map, or maybe they have some specific requirements in mind, so they use the filter option. At first glance, I thought this would be a simple task, but when I moved on to booking an appointment and submitting contact tracing, I realized just how much goes into these tasks.
_Page_2.png)
03
Develop
After conducting research, synthesizing my findings, and brainstorm I started prototyping. I first started by sketching, then testing and redesigned the sketches. I then moved onto creating a styleguide including logo, color, typography, and design elements.
Wireframing
Iterating User Interface
As I moved on to designing the application interface, I wireframed all the UI screens and conducted an initial user testing session.
Testing
-
I conducted five guerilla usability tests. They had to complete three tasks.
-
The first task they had to complete was to search for a clinic.
-
The second task was to book an appointment for themselves.
-
The third task was to book another appointment for their child.
-
-
All tests were at different locations. Some at a home, some at a gym, and after work.
Findings
-
Users felt the personal section should inquire about their insurance and also their address.
Recommendation: Change the insurance section to the personal section.
-
At the beginning of the book an appointment route should allow you to book multiple appointments, instead of having to wait until the end of the process to book another appointment for someone else.
Recommendation: Add a feature for adding user profiles for those in a household. That way information would already be pre-filled in the personal section, a survey taken, and managing multiple appointments would be easier.
-
Users did not like the word cancel on the filters and did not know how to exit out of the filter.
Recommendation: Change cancel on filters to "x"
Visuals
Branding
Having a brand platform makes up a corporation's image and defines how a customer will perceive the company; that’s why I carefully chose Coroway’s brand colors, typography, logo, and iconography.
Coroway’s mission is to relieve, help, and navigate people through the Covid19 process. With this in mind, I decided on Coroway's brand attributes. When a product embodies trust, friendly, and transparent attributes, people are more likely to use the app and input certain information to make the app successful. The app must be simple to take away from the stress and chaos surrounding Covid-19.
Logo
Color Palette
Typography
The Coroway logo is clean and simple. It is easily recognizable. The heart represents our brand personality; Reliable, caring, and honest. The arrow inside the heart represents our mission to help people navigate through the COVID-19 Process.
Our Color palette is bright and bold while remaining approachable. Coroway's colors represent trust, friendliness, and care. Blue is often equated with trust and honesty. The yellow tone represents friendliness. The peach tone color represents care.
Implementing the Styleguide
04
Deliver
As I moved on to designing the interface of the application, I wireframed all the UI screens and conducted an initial user testing session.
Testing Round 1
After creating the high-fidelity screens, I had to test out the design. During testing, I found three main issues: contact tracing and then booking appointments and the results page.
Contact Tracing
Booking an Appointment
Results Page
Contact tracing caused a lot of frustrations to users. They felt it was information overload and would take a long time to complete. A lot of them would skip contact tracing if this was in real life.
They felt it was too intrusive and was not sure why they were asking for things like, race, age, and gender.
Users were confused as to whom the
pre-screen pertained to since they were booking multiple appointments.
Users did not like the order of the red route. After the confirmation page following the calendar screen, users felt that was the final step.
The users were unaware they could book multiple appointments, as it was not stated on the clinic page.
Users could discern what their results were, but most were distracted by the circle at the top or were unable to locate the results.
Users wanted to know the day their results arrived and where they were tested.
05
Evolve/Final
After completing the first round of tests, I rearranged the red route for booking an appointment. Before starting contact tracing, the app now asks how they would like to complete contact tracing. There is also more information on contact tracing before beginning the form. I also broke down the information so that it was not too much at once. Finally, I redesigned the results page to make their results more visible.
Contact Tracing
Users now have the option to complete contact tracing through the app or over the phone with a health professional. Some of the forms have been broken up, so the user is not overloaded with information. I also added information about contact tracing so users are not confused as to what it is and why it is asking for certain information.
Booking an Appointment
I rearranged the red route to book an appointment. I divided the segment into who's information is needed first so there would be no confusion.
Results Page
I redesigned the results page so users were able to easily recognize their test results. The test results were now higher up on the page and highlighted. I removed the circle which was drawing attention away from the purpose of this page.
After
Before
Testing Round 2
After completing these changes, I conducted five more moderated usability tests. During this round, I uncovered some minor issues but overall received positive feedback.
-
Users felt that contact tracing now had fewer questions, was more organized, and condensed.
-
Once they arrived at the results page, they immediately knew their results and felt the new results page was guiding them through their next steps.
-
They also felt the new route for booking was more organized and liked that it was separated into two separate profiles. A feature I noticed they wish they had was to be able to see reviews or ratings.
Conclusion
Reflection & Next Steps
After making changes to the design, the app was pretty well received. With more time, I would keep in mind the second round of usability tests, add ratings and reviews, and then re-test to uncover more insights.
With this being my very first project, I definitely learned a lot, but one thing that stuck out to me was how valuable conducting tests are. I had been designing this for 7 months, so I was an expert at the app, and it felt easy to use for me. Seeing it with fresh eyes was difficult after some time. Conducting the usability tests was very eye-opening and really showed how people work differently to complete the same tasks and what needed to be improved.
During the usability tests, I felt at a crossroads, especially when it came to contact tracing. I wanted to make contact tracing easier for contact tracers, but knowing that every user felt frustrated completing it, this would not be a possibility. I researched the information that contact tracers had to gather to see if there were any questions or steps I could omit, but it was all necessary. I talked to my mentor about my dilemma, and together we were able to brainstorm some ideas. I learned it’s important to reach out to others and work together to generate new ideas.