Adding a new feature to Corona-Warn App—a UX/UI case study
This was my first individual project for the Ironhack UX/UI Design Bootcamp.
Duration of the project: 4-day design sprint
The main tools: Figma, Maze, Google Suite, Miro
Since the COVID-19 pandemic hit in 2020, a number of contact tracing apps were developed in many countries around the world. The Corona-Warn-App helps to trace infection chains of SARS-CoV-2 (which can cause COVID-19) in Germany. As of March 2021, it has been downloaded 26.2 mln. times, making it one of the most widely downloaded contact tracing apps in Europe. However, as the fight with the pandemic continues to this day, Corona-Warn-App could still be improved to assist it even more effectively.
For this challenge, I chose to add a new Regulations feature to the app which allows you to check the latest COVID-19 regulations in your area. Although preventive COVID-19 regulations are extremely important to keep a track of in order to protect each other, I felt that they change frequently and can be very difficult to keep a track of which can be frustrating. Of course, I had to validate this assumption with the users first.
Before jumping into the user research, I performed a competitive analysis to better understand the market. I must admit — it felt slightly unusual since the contact tracing apps are normally not profit oriented, used locally and often interconnected with the national health care systems.
Eventually, I decided to compare Corona-Warn-App both with contract tracing applications and those which provide general information about COVID-19 in Germany, the Netherlands and Czechia. Since the unifying goal of these applications is fighting against the pandemic, I chose to focus on two elements — the number of integrated features and the availability of information about the regulations. I soon discovered a gap in the market — most of the applications do not provide any information about the local regulations and if they do, it is generic and not up to date.
Quantitative and Qualitative Research
I started the user research with preparing the surveys which received 14 responses. This is what I found:
- 64% find it very important to know about the latest COVID-19 regulations in their area.
- 86% of people check info about the regulations at least once in a couple of days.
Ease of access to info about regulations:
49% — 😐 22% — ☹️
“I can’t keep up!”
Since Corona-Warn is a German application, I conducted 3 interviews with people living in Germany in order to better understand what they experience in relation to COVID-19 measures there. These are some of the important findings:
- The majority of people cannot keep up with COVID-19 regulations because the information is inconsistent across multiple sources, is not up to date and differ by municipality.
- People avoid going to cafes and restaurants because the regulations around them are unclear and differ by location.
- People lack up to date information about where and when to wear masks, which areas to avoid, vaccinations (schedule, locations, cost) and travel related regulations.
- The information about the regulations is difficult to access due to language barrier for foreigners living in Germany and sometimes even to the locals due to complexity of terms used in the news.
“I don’t even go to town because the rules change often and it’s so confusing what regulations do I have to follow! So, I just stay at home…”
With all the research data at hand, I started organising it by themes while using an affinity diagram on Miro. It helped me to better visualize the problem.
The User Persona
I created a persona based on the insight from my research to help me step into the shoes of the user.
To empathize with the user even further, I made a user journey map by creating a scenario where I could explore the opportunities to solve the problem.
Additionally, I created a Value Proposition Canvas to synthesize the data even more and identified the main pain points I would be focusing on.
The Problem Statement
After summarizing the research, I came up with the following problem statement:
People need a way to access the latest information about the COVID-19 regulations in their area all in one place without having to browse through numerous inconsistent sources because accessing the relevant information on time will improve their quality of life during the pandemic.
How might we improve the existing Corona-Warn-App so the users can feel confident that they can access all the latest information about COVID-19 regulations in their area on time?
We believe that implementing a new feature to access the latest COVID-19 regulations in the local area on time will help the user to feel less confused, and improve their quality of life, which in turn would make them want to use our app regularly.
We will know that our new feature works if we will see the increased downloads of the app by at least 15% in the next 6 months.
With the statements at hand, I also defined the job stories:
Main Job Story
Wen leaving the house, the user wants to find a reliable and an up to date information about the COVID-19 regulations all in one place, so they can feel confident about following the current measures in their area.
New Feature Story
When leaving the house the user can easily find the information about all the up-to-date regulations in their area and is notified about the regulation changes on time.
Based on the job stories, I created a site map with the new feature highlighted in red.
Then, I proceeded with the user flow showing how they would navigate within an app from Start Screen to exit with a new feature in place.
When the user clicks on the notification from Corona-Warn-App, the home screen opens up. I incorporated a new Regulations icon at the bottom of the screen as well as a button at the top of the screen so that the user could easily access the latest regulations. After clicking on it, the user is asked to allow to send notifications in order to be notified on time when the rules change. The user can then scroll down and browse through the list of COVID-19 regulations divided by topics. The most recently updated topic — hospitality has a bell indication. When the user clicks on it, they can read the detailed regulations and also see the last updated date so they are confident that they are accessing the latest information. After they exit the description, the bell icon is now gone indicating that the user is up to date.
Prototyping, Testing & Iterating
Having the user flow in mind, I started with a low-fi wireframe sketch which was soon followed by the mid-fi.
After testing the mid-fi prototype on Maze, I found that the majority — 91.7% of 12 testers completed my mission via the expected path. Still, I received some valuable feedback from the testers based on which I changed the bell icon for NEW ⓘ when designing the high-fidelity screens.
Before I started designing my Hi-Fi prototype, I looked through the Corona-Warn-App in order get a better idea of the style, elements and the colours used.
Finally, I designed the Hi-Fi screens trying to integrate the new feature into the existing design as accurately as possible.
- Test & Iterate the High-fi prototype.
- Further define the feature by adding the updates history on each of the topic so the user can see the changes.
- Add more features to the app such as COVID-19 hot spots to avoid.
- Testing the prototype is very important to gain more insights into what may not be working well for the user.
- Working alone can be challenging in the ideating stage in terms of deciding about which feature to focus on.
- Maintain a well-organised design system in order to stay consistent.
Thank you for reading! Please get in touch if you have any feedback or comments.