UI/UX Case Study : Helping users to be able to do activities outside the home comfortably & anti-complicated without worrying too much with the Covid-19 virus.

Image from Unsplash

This new year is no different from last year and 2 years before, the pandemic is not over yet. Covid-19 is still ongoing today. The majority of companies in the capital and in the suburbs have been affected by the pandemic. The company is taking action to hire its employees from home. There are even some offices that lend office facilities to their respective homes. The purpose of this is to survive the pandemic, save the company from bankruptcy. The term used is Work From Home (WFH).

When employees work at home, they feel a lot of different Pain Points than when working in the office. From the fear of being fired from the office, to the fear of leaving the house. Therefore, our group took the pain point as an important aspect to complete the task at Binar Academy.

Market

Employees who work at home, aged 20–30 years. Located in Greater Jakarta, namely Jakarta — Bogor — Depok — Tangerang — Bekasi.

My Role

Our team consists of 4 UI Designers & UX Designers. We discuss and argue to determine the Point Of View. The final result of our Pain Point is an application, for each application we make each one.

The Process

1. Research Plan

The purpose of this research is to find out the condition of the user’s feelings when traveling during the pandemic.

2. Survey

In the respondent search process, we conducted a survey method to get respondents who matched the target user that had been approved in the research plan.

3. Interview

We also take the process of collecting qualitative data related / direct interaction with users.

4. Transcript

We also take the process of collecting qualitative data related / direct interaction with users.

5. Problem Statement Quote

Pictures of teamwork

In compiling quotes we try to find important sentences or statements according to the topic we are doing. The step taken after searching is to put it in a column for each member’s name.

6. Problem Statement Synthesis

This stage is the next stage of the quote search process, when all the quotes have been collected, we classify them into sections related to the topic.

Pictures of teamwork

7. Point of View

At this stage we put ourselves in the story or the way the author views the story.

Pictures of teamwork

8. Persona

At this stage we describe the user as the artist Adipati Dolken.

Pictures of teamwork

9. User Journey Map

At this stage we describe user interactions with the product in context.

Pictures of teamwork

10. How Might We

• How can we help users reduce their worries before they travel?
• How can we help users get information on the number of visitors before the user leaves for their destination?
• How can we help users get information on the maximum number of visitors at their destination?

This is our PDF team. The first step to step ten is done with the team.

And here’s they are Fauzan Adiem, Adyan Aqil, & Jacinda Valentina.

Visuals and Design System

In this process I made on my own.

1. FlowChart

In this process I identify the user to complete a task/goal visually. Chart links https://www.figma.com/file/71T5X9BCYM24qOVVXZZmCd/FINNAL-WireFlow-%26-Hasil-Challange-5?node-id=0%3A1

2. WireFrame

The next process is the organization of the content layout. In this process I try to be as detailed as possible to achieve the goal of making this application. Link

3. User Interface Style Guide

Afiat is a COVID-19 contact tracing app for Indonesia. afiat/afi·at/ according to the Big Indonesian Dictionary (KBBI) means healthy. Therefore the purpose of this application is to maintain the health of the Indonesian population.

The typography uses the Open Sans font, where the font is bold and pointed on each side. Illustrates that Brand Afiat does not play with its tagline / motto, namely maintaining the health of the Indonesian people.

The Color Palette used is a variant and derivative of 3366FF

4. User Interface

This is the view before Usability Testing & Feedback

5. Feedback from Team

The first revision came from our Facilitator, for wireflow it was wrong to have branch 2 in the wrong place, and for the colors on the chart were still wrong because they were different from each other so that it misinterpreted the purpose of making the application.

For team feedback none of the wireframes have been fixed.

For wireframes, the button placement still feels inconsistent, there shouldn’t be too much distance between the content. For a boarding page, you don’t need a lot of sentences, just 2 lines. The password does not need to be divided by 2 because it is too narrow in the filling section so only 1 line is needed. Then for the home page only the icon appears so it will look more ideal.

The first feedback for the wireframe came from our Facilitator. For button coloring to make it look more beautiful, it is expected not to use shadow. There is also consistency in the size of the writing so that it feels more consistent with the brand image. Then for colors to pay more attention to the color palette, don’t let anything come out of the palette. There is another entry regarding the home page because it has not progressed, so it needs to be done quickly. This feedback is live in our Forum Discussion Group with the facilitator.

6. Usability Testing

To identify problems in UI design that have been designed, I did the Usability Testing stage. Below is a video link of the results of 5 people who are willing to Usability Testing.

This is a video link of usability testing.

7. Feedback from UT

Here’s an Excel link, the results of the Research Scenario & Usability Testing conclusion.

This is feedback from Usability Testing

8. Revision UI

English version

Indonesia version

9. Mock Up

Conclusion

During the Design Thinking project process, I got different experiences and thoughts about the COVID-19 tracking application. During the discussion process with the team, there were bright ideas, moreover, they were added to the process given by the facilitator. Making this project structured and relevant to the needs of the community. After starting the usability testing process I got some interesting feedback. Various inputs make this project even more complete. I am very aware that because of the limited time and ability that is still very lacking, I need to learn a lot again. I hope that this project can be the beginning of my other projects that can answer and help the community.