Covid19Care

As the Covid-19 pandemic affects and changes everyone’s lives, I embarked on a UX design journey and designed a product that I believe would make lives easier during the pandemic. Covid19Care is a responsive web app that aims to help individuals better manage their and/or family members’ health and wellbeing during the Covid-19 pandemic.

The challenges

• Lack of Covid-19 professional health support especially during Covid-19 surges

• Difficulty finding and booking a Covid-19 test particularly while traveling

• Disorganized Covid-19 related documents

• Difficulty managing all family members’ health

The solution

• One-stop digital platform that helps individuals manage personal Covid-19 health issues (Covid-19 self-assessment, Covid-19 test and vaccination booking, and Covid-19 symptom monitoring)

• Safe and secure storage for all Covid-19 documents (e.g. test result, vaccination card, and appointment details)

• Ability to add and manage profiles for family members in one account

1. Understand

1.1 User research: surveys & interviews

I conducted user surveys and interviews to learn more about how people manage their health during the Covid-19 pandemic, so I could develop a digital solution that helped addressing user needs and goals as well as solving real world problems. The research participants were recruited online from around the world. I received 52 survey responses in total and interviewed 3 participants.

I investigated their...

• behaviors, beliefs, attitudes, and feelings of managing their health during the pandemic

• fundamental needs and goals

• health challenges and pain points

• frustrations with the existing digital solutions for Covid-19

• types of tasks they would like to perform using a Covid-19 personal health app

Some of the questions I asked...

• What have been your main needs and concerns regarding health and well-being during the pandemic?

• Tell me about your experience with Covid-19 infection, isolation, and recovery. What was it like for you? Who were involved in your recovery? Did you have any worry or face any challenge?

• Have you used any website or app to assist you with Covid-19 recovery, or to stay on top your health during the pandemic? What was your experience of using it? What did you like and didn’t like about it?

• What features do you think would be most useful to help you manage your or your household members’ health and well-being during the pandemic? What would you gain from those features?

1.2 User personas: who am I bulding Covid19Care for?

The research participants were recruited online from around the world. I received 52 survey responses in total and interviewed 3 participants.

With data from the user surveys and interviews, I created two user personas based on two target audience groups, those who try to avoid getting infected with Covid-19 and those who get infected and do home isolation. 

User personas gave me a clearer picture of the users that I was designing for, including their attitudes, behaviors, needs, and frustrations. They helped me establish empathy with the potential users and make decisions with their needs and goals as the top priority. With the user personas in mind, I designed a product that tackled Covid-19 related issues most relevant to them.

1.3 Competitive analysis

As I gained more insights about the potential users and their needs, I conducted competitive analysis to investigate Covid-19 personal health apps that were already in the market. I was fully aware that there were already many Covid-19 related websites and applications out there, so I would not be building a product that targets a new market but would be improving from the existing solutions.

The competitive analysis on NHS Covid-19 (England and Wales) and Stop Covid ProteGo Safe (Poland) was summarized as a SWOT profile.

The insights from the competitive analysis allowed me to create a product that answered user goals and needs that were previously unmet by the existing products.

Strengths

• Contract tracing technology

• Credible as government-owned apps

• Useful Covid-19 health tools (risk alert, self-assessment, and test result reporting)

• Strong data security and privacy

• Free to use

• Available in several languages

Weaknesses

• Some may be put off by contract tracing as they don’t want to be “tracked” or don’t have any incentive to use it

• Miss other relevant features like Covid-19 vaccination booking or Covid-19 vaccination card

• Room for UX improvements especially in the areas of usability, accessibility, and navigation structure

Opportunities

• Covid19Care web app can satisfy a different function and mainly focus on helping individuals to address their and/or their family members’ Covid-19 health needs

• Ability to add and manage other profiles for family members in one account

• Opportunity to leverage on better UI

Threats

• Users may rely on other platforms for their Covid-19 health needs

2. Ideate

2.1 User journey map: Covid19Care visions

Using what I learned from user research and competitive analysis, I created a user journey map for each persona. A user journey map is a narrative document that conveys a visual story of the process the persona will work through in a product to accomplish a goal. This helps to ensure that everyone involved will share a focused vision for the project.

2.2 User story, task analysis, and user flow

I crafted and continuously revised 3 sets of user story, task analysis, and user flow that represent 3 main features of the web app as I’ve made my way through the process and discovered new learnings and insights.

User stories

Each user story explains a specific action a certain type of user can take within the web app. They help to distill the product requirements down to small, readable, manageable, and executable parts, and provide a bird’s-eye view of the work scope.

“As a fully vaccinated millennial, I want to sign up and take a Covid-19 self-assessment, so I know whether I should go get tested for Covid-19. I am aware that being vaccinated does not make me immune.” – Frederik

“As a fully vaccinated millennial, I want to book a Covid-19 test appointment, so that I can go get tested and learn whether I have Covid-19. “ – Frederik

“As an under quarantine mom, I want to log my and my family members’ symptoms, so that I can monitor of our current conditions and take appropriate actions accordingly. – Siripa

Task analyses

For each user story, a task analysis further explains a set of steps required for users to complete one specific goal.

User flows

Also for each user story, a user flow visually shows the path that users might take as they navigate through the web app to complete that goal. User flows helped me to identify different points of interactions within the web app while ensured that the personas’ needs have been satisfied at each point. No matter what a persona may need, there will be a screen or page to accommodate them.

All in all, the user stories, task analyses, and user flows, together with the personas and user journey maps, helped reveal a clearer and more complete picture of Covid19Care users, their beliefs, behaviors, needs, and goals, while allowed me to communicate those nuanced details more easily to others.

2.3 Sitemap

To generate and evaluate ideas for the information architecture of Covid19Care, I conducted 3 rounds of online card sorting studies (2 open card sorting studies and 1 hybrid card sorting study) via optimalworkshop.com with separate sets of participants.

The goal of the studies was to see how the potential users interacted, categorized, and labeled the information I was considering for the project. For the open card sorting studies, participants were asked to group product contents into their own categories and then named those categories. For the hybrid card sorting study, participants were asked to group product contents into either predefined categories or categories they created themselves. 

After the studies, I used the insights to develop a sitemap, an organizational map that outlines the hierarchy of a website or an application. I developed it in a way that ensured a good flow of information and an intuitive navigation experience for users.

3. Prototype

3.1 Low-fidelity paper prototypes

I hand-sketched the low-fidelity paper prototypes for onboarding, sign up/sign in, home, and the 3 core features (Covid-19 self-assessment, Covid-19 test booking, and Covid-19 symptom diary) in black and white. The prototypes were meant to highlight only the high-level functionality of the design as well as display the interactions that I had in mind for the web app. Starting with low-fidelity prototypes allowed me to focus on the core structure and navigation of the app rather than on pixel-perfect visual design features and complex functions.

3.2 Mid-fidelity ditigal prototypes

After the basic functionality of the product was discussed and agreed upon, I translated the low-fidelity paper prototypes into the mid-fidelity digital prototypes using Figma. The mid-fidelity prototypes were created to show off basic placement, form, function, shading, as well as spacing, sizing, and specifics of UI elements. I also worked with real texts and began to incorporate colors and icons. 

Overall, I made the designs cleaner and further reduced cognitive load for users by hiding some content and options under a menu or “More”, removing unnecessary texts and wordings as well as decluttering the space in general.

4. Usability test

After I came up with the prototype which was an initial hypothesis on how I hoped to solve real user problems, I turned to usability study to test the most important features and functionality and gather user feedback.

Objectives

The goal of this study was to assess usability for new users interacting with Covid19Care for the first time on mobile, with a focus on learnability, efficiency, error correction/prevention, and satisfaction.

• Assess how easily participants can accomplish each task the first time (learnability)

• Observe how quickly they can perform each task (efficiency)

• Evaluate how many errors they make, how severe these errors are, and how easily they can recover from the errors (errors)

• Determine if they are satisfied with the web app (satisfaction)

Usability tests

I conducted moderated remote usability tests with 6 participants in total, consisting of 5 female and 1 male with ages ranging from 25 – 48 years old. All the usability testing sessions were video recorded.

Affinity mapping & rainbow spreadsheet

After that, I reviewed the videos and conducted affinity mapping to organize all the information and look for emerging patterns. Then, I organized the research findings into a rainbow spreadsheet listing all the main errors, positive quotes, and negative quotes from the usability study as well as possible solutions and next steps.

In summary, the usability testing revealed that more than half of the participants failed to locate the onboarding process from the introduction screen, while all participants missed the adding and switching profile feature on the homepage. After the initial struggles, the participants were then able to successfully take a Covid-19 self-assessment, book a Covid-19 test, and log Covid-19 symptoms despite some minor issues. In the end, participants found Covid19Care easy to use and expressed having positive experiences with it.

Prototype iteration

After I finished analyzing the data, I created a usability testing report to summarize and prioritize usability issues and come up with suggested changes. Then, I revised the prototype accordingly. The new iteration ensure a smoother and more user-centered experience. 

Visit the mid-fidelity prototype here.

5. UI Design

After I refined the prototype based on user feedback, I started to add visual design to the prototype. Visual design focuses on the aesthetics of an app and how that aesthetics can be used to enhance the user experience as well as enable users to perform tasks more easily. 

I dealt with selecting colors, typography, and styles, and applying them to a user interface to make it sleek, stylish, and visually appealing. I referred to Gestalt principles, Gestalt laws of grouping, and principles of design as well as adopted Material Design patterns of buttons, chips, and dialogs into the design.  

I selected blue as the primary color for the web app as the color is usually associated with stability, trust, credibility, competence, and calmness. While working with colors, I adhered to the accessibility guideline in making sure that the color contrast between text and background was stark enough and reached at least AA-level for accessibility.

Lastly, as I was wrapping up the project, I created a design language system which is a set of overarching rules and standards that help maintain consistency in design. The design language system document consisted of rules for colors, typography, iconography, common UI components, grid/layout, and tone of voice. I kept the document simple and concise to make it easier for others to follow the guidelines and reuse the designs.