UI/UX Case Study — Info COVID: a COVID-19 News Mobile App
During the pandemic situation, a lot of people are overwhelmed so much causing tremendous stress. And managing the stress becomes challenging. This case study is about designing a mobile app that will help them to solve the problem.
Introduction
I got this case study when I took a UI/UX Bootcamp held by Binar Academy, it’s my first challenge at the Bootcamp. The problem that Binar Academy gave me is:
“Help the user to not be overwhelmed by COVID-19 informations”
Binarians (Binar Academy students) have the authority to find their own solutions. So, this design process will explain how to solve that problem on a mobile app based on my version. This challenge is my first project in UI/UX Designing, so any feedbacks are welcomed!
Note: All of the processes are done by myself, except for research and defining the problem.
The Problem
The year 2020 is a ‘special year’ with the coronavirus. Every day we spend our time checking the global and local COVID-19 numbers (especially the beginning of the pandemic). Not seldom we are feared with the news and make us being overwhelmed. People are increasingly reliant on their phones for any COVID news from various credible sources. These circumstances are enough to make us struggle. So, I just created “Info COVID”, a COVID-19 mobile app for making the pandemic less overwhelmed that has some useful features like personalized COVID-19 news, a sentiment of the news, update statistics based on location, education of COVID-19, and a fun quiz about COVID-19. Target users of “Info COVID” are all Indonesian citizens.
A. Empathize
Before I designed the mobile app, my team and I researched the real problem based on users’ insight. So, my team and I did a user interview with six users who had a pain point while getting COVID-19 information. The range of users is so diverse, which is 17–57 years old. The questions are used to help us find the main problem based on the insight of Indonesian citizens about COVID-19 that then will be focused on designing the mobile app.These are the insights that my team and I need to know behind the questions:
- The reason for receiving the news;
- Frequency of reading news every day;
- Kind of news;
- Source of information and the reason;
- The reason the news is read is credible;
- COVID-19 information that needed;
- The expectation for the news;
- Pain points while getting the news;
- The feeling after getting the news;
- The action after getting the news.
B. Define
After we got the users’ insight, we started defining the problem. With a lot of questions, we need to group some questions like the image below.
After we did the grouping to five groups, we found some findings, they were:
1. Users’ Motivation
- Users follow COVID-19 news every day. Although not as often as before, users still follow COVID-19 news at least once a day;
- The news immediately is appeared without being searched for on their device;
- They follow news such as number of patients, zone affected, impact on society, vaccines news, etc;
- For self-awareness and making decisions;
- The news appears on TV and social media without they’re looking for it because of the frequency and the algorithms on the internet that have known user behavior;
- By following the news, users can be more vigilant in order to avoid the spread of the coronavirus.
2. Users’ Point of View
- Users choose trusted news from various sources;
- Users trust the news they got from official sources, verified accounts, or any sources that they’ve filtered first;
- The news source is from official government news, news platforms, certain Instagram accounts, or health workers.
3. Users’ Feelings
- Negative news and excessive delivery make users anxious;
- News delivery that is too dramatized makes users even more anxious, even though the news is so-so;
- They tend to feel worried when they receive negative news close to them from where they live, such as a patient or who has died because of COVID-19.
4. Users’ Reactions
- Users tend to share information that they think is important to their friends and family;
- Users often share information such as patients, vaccines, affected zones, and other educational information to their friends and family;
- One of the six respondents said the news he received influenced him in making various decisions related to the activities he’ll do.
5. Users’ Expectations
- Users hope that the news is delivered more informative and specific;
- Users expect that the news is delivered more actual, reliable, educational, and geographically specific. The news should expose the areas that are close to them, such as the zones affected by COVID-19, infected cases data, danger zone warnings, and others in their area.
- The news delivery is hoped that won’t be excessive or dramatized because it has a negative effect on users.
C. Ideate
From those findings that we found above, I decided to focus on solving users’ problems in getting credible COVID-19 information. Indonesian citizens need credible information, clear source, not hoax, not dramatized, informative, geographically specific, actual, and educative. I saw an opportunity from this problem to make an information platform that can provide information about COVID-19 that is actual, specific, reliable, and educational. I designed a mobile app that I named “Info COVID”. Here are the key features of my mobile app.
Key Features
- Government’s daily update about COVID-19;
- There are “For You”, “Latest”, and “Trending” on Home Page;
- The sentiment of the news;
- Hoax news;
- Personalized the news as desired by users;
- The COVID-19 statistics update based on the location that the user wants to know with a distribution map;
- Education about COVID-19;
- A quiz about COVID-19;
- Sharing feature.
User Flow
D. Prototype
Wireframe
These wireframes were the first steps to help me visualize my app.
Hifi & Prototype
These were the last steps of designing before I did usability testing. You can try the whole experience using the prototype below or click here. If you have any feedback, please let me know.
Sign-Up
User is given some options to sign-up from Twitter, Facebook, Gmail, email, or user also skip this sign-up. Signing up will help the system to recognize the user’s behavior to give some personalized news. Moreover, this step is needed because there is a quiz that needs to recognize the user to input the points.
On Boarding
On these pages, the user will be introduced to some features of this app.
Input Favorite Topics, Muted Words, and Sentiment Activation
In these steps, it is hoped the system will recognize the user’s behavior for giving the right news to the user based on which news that user wants. Also, the user is requested to activate the sentiment of the news or not. So if the users wanna see an initial indication (the sentiment of the news) before they read the news in more detail, they can activate it. Otherwise, they can inactive it.
Home Page
On this homepage is given information related to the best features on this app that is put down on the top. There are “For You”, “Latest”, and “Trending”, but the default mode is in “For You” because I hope the information that will be appeared is personalized with the users. Then, there is the government’s daily update about COVID-19 that will always be updated every day. Then, there is some news that is personalized with the users based on users’ input previous. Then, there are tweets related to COVID-19 that are filtered. So, the tweets that appear are just from a verified account or trusted public figure. Other than that, there is a column that containing COVID-19’s hoax information. Every news is given a tag like “POSITIVE”, “NEGATIVE”, or “NEUTRAL”. This tag aims to give an initial indication to the user to know the sentiment of the news before they read the news more detail so that if the users don’t wanna read the “NEGATIVE” news, they can delete the news from the homepage with tap “X”. This feature can be realized with Natural Language Processing (NLP).
This is how it looks when users read the news. Users can bookmark, like, and dislike the news. Also, users can comment on the news. The reason why there is a comment section is that some users said the comment section on the news article is so important to know some perspective of other users. Users can share the article by tapping the icon of Line, FB, Twitter, WA, or others to their friends or families. Also, there is recommendation news related to the news.
Statistics
When the users tap the carousel on the top (on the homepage) about statistics or tap “Statistik” on the navigation bar, then it will be requested to input which location that the users wanna know the statistics. Then the user can see the national COVID-19 case data and the daily update. Also, the user can see the distribution map of the active cases and the zoom in/zoom out to see more specific. So, the hope is that by knowing which locations have active cases, so users can be more careful.
Education & Quiz
To see the education page, users should tap the carousel on the top (on the homepage) about education or tap “Edukasi” on the navigation bar. On the education page, there are some COVID-19 educations which are symptoms, how to spread, prevention, and call center. So, users can learn those categories according to what the user wants. After that, user can test their knowledge by trying a quiz.
To see the quiz page, users should tap the carousel on the top (on the homepage) about the quiz or tap “Mulai Quiz” on the education page. On the main quiz page, there are some categories that can be chosen by the user. When the users choose the category, then pop the popup so that the users are not shocked if the quiz is started.
The quiz is so funny and fresh. The hope is it can entertain the user also increase knowledge about COVID-19. At the end of the quiz, there is an option to share the result. It can be encouraging one another with the points.
E. Test
To validate the design I made, I then conducted usability testing with five users to know which part I have to improve.
Here are the tasks of this usability testing:
- The new user goes to the homepage;
- User deletes news that they don’t like on homepage;
- User reads the government’s daily update about COVID-19;
- User shares the article;
- The user goes to the COVID-19 statistic page;
- User goes to education page;
- The user takes a quiz.
After the user did the tasks, I gave some questions about their experience, and I asked for feedback. Based on the results of usability testing, the feedback is just minor things like the contrast, consistency of font, color variations, padding, and margin, or something like that. So, I just iterated a minor part.
Reflection
From a realist standpoint, this project will need a great deal of time, effort, and teamwork. The research is essential, but diving deep into the user’s point of view by asking the right questions is a must. After I did it, I feel happy when I did a user interview. I like diving deep into the user’s point of view. Because of that, I can see another side and learn something from that. Overall, I love this design process, especially user interviews and usability testing. Hopefully, my app, “Info COVID”, can be helpful for you guys. Also, I hope this story will be helpful for you guys and see you on my next project!😁
Hope you enjoy reading it!
You may want to check my other projects on:
