UI UX Study Case: Help government do contact tracing and notify users if they get a high-risk percentage exposed to covid’s infected people with Trip Tracking Application
Disclaimer: This is a personal project. Here I share the process from start to finish to complete this project.
About
Distance is a trip tracking application to help government do contact tracing and notify users if they get a high-risk percentage exposed to covid’s infected people from the application. There are 4 main services: to see their area’s condition, to search for other areas to know that area’s condition, to track users’ trip, and to check their trips’ history.
Problem Statement
From health.detik online news, Dr. Pane explained that the increase in COVID-19 cases over the past week was related to contact tracing. They’re looking for as many close contacts as possible, then do monitoring within 14 days. Sometimes this monitoring produces new cases, so the increase in COVID-19 cases is quite significant. He warned not to find cases of COVID-19 too late when they had to be treated at the hospital.
Roles & Responsibilities
For this personal project, I make end-to-end processes from UX research, UX design, UI design, and Usability testing. Create user flows (login/register, search other areas, trip tracking, and trip history).
Challenges
The challenge is that it is difficult to find and match the schedule with the participants and with 1-week limited time.
Processes
I applied design thinking in making this project.
Design thinking is creative and collaborative problem solving to produce more empathetic and innovative solutions.
By David Kelley and Tim Brown, IDEO founder
Step 1. Empathize
We empathize with users to give them the solution so they can reach their goals. In this step, I make a research plan, discussion guide, then conduct the research. After that, I make a user persona based on the interview result.
Research Plan
Discussion Guide
A discussion guide helps us to gain more information and insight nicely structured based on the research objective by interviewing users.
Conduct the research
Based on the research plan, I interviewed 5 people. Four people face-to-face and one person by google meet to cut the cost and improve efficiency.
User Persona
After interviewing, I create a user persona based on five participants. User persona becomes a benchmark based on insight from five participants.
Step 2. Define
In this step, I conduct an observation based on interview results with five participants and make an empathy map to define user behavior when going outside. And then create a user journey map to find what opportunities can be implemented in the product. After creating the user journey map, next is to make prioritization matrics to decide what main opportunities to be implemented in the product. To develop the product, I also do a competitor analysis to find more insight that useful for users.
Empathy Map
With an empathy map, we can understand how users’ behavior when leaving their house.
From the empathy map above, the most common problems experienced by participants are:
- Bored because doing the same activities over and over again
- Happy to go out but restless at the same time because interaction with other people
- Insecure when meeting people, because she doesn’t know if other people safe from covid or not
- Uncomfortable when wearing a mask
- Annoyed in a crowded place
User Journey Map
With a user journey map, we can understand how users experience when leaving their house step by step, and we also can define opportunities based on users' pain points that useful to develop the product.
Prioritization matrics
From the summarized opportunity which has been found in the user journey map, I create a prioritization matrix to consider which opportunities will be implemented into the product.
Actionable Insight
- The user knows how many people and the status of people who interact with them
- The user knows how their area condition
- The user knows how another area condition
- The user knows how crowded a place is
- The user knows more about health protocol
Competitive analysis
Peduli Lindungi Application
Insight: Their main features is to tell us how is the condition of the location around us
Other Features :
- Looking for another zone by search zonation: inform you how your destination state
- Real-time map zonation: inform how your zonation
- Surrounding zone description: inform how your surrounding zone
- Vaccine registration: check your turn to get the vaccine
- QR Code scanner: scan QR code
- Teledokter: to self-health check and consult a doctor
- Important information: to notify periodically to always follow the health protocol
- Travel diary: everyday travel diary
- Digital passport: as a certification in QR Code form based on the health test result (rapid test/ PCR test)
- Health services: to help you find the nearest health center or hospital to get treatment
- Covid-19 Talks: inform you latest news about Covid-19
- #Sharingiscaring: invite friends to use this application
- Statistic: inform the growth of Covid pandemic like the suspects, who recover, who passed away
Bersatu Lawan Covid-19 (BLC)
Insight: Their main features is to tell us information around covid pandemic like the progress of patients affected by covid and how to do health protocol
Other Features:
- Questionnaire of new normal
- Health center
- Customer Services
- Consultation
- Personal health diagnosis
Step. 3 Ideation
I start ideate by creating a user flow, information architecture, create wireframes, guidelines, and mock-ups.
User flow
User flow used to describe the user’s steps to complete the task using a product. There is four main user flow: login/register user flow, getting information about the user’s area user flow, getting information at another area user flow, and getting information of how many people user have met in one trip user flow.
Information Architecture
From dibimbing.id Bootcamp class, Information architecture is a method used to make documentation of all flows, contents, and design requirements of an application or website.
Wireframe
I make wireframes based on information architecture. To increase efficiency, I make wireframes on papers with design alternatives.
Guidelines
UI Design (android)
Login/Register
To log in to users’ account, users just need to input their phone number, and to increase security, they have to verify your account with the OTP number that sent to their phone as mail. Same with login, to register users’ account they need to input their phone number, but they have to input their name too. If the user didn’t receive the OTP number, they can send another number by clicking on the “send another” periphery button.
Homepage
On the homepage, users will be shown their area situation (zonation and crowd information). Users can fill on “Search another area” to know other area situations.
Trip Tracking
The tracking feature can be found in the menu bar below. This feature needs Bluetooth permission to track their trip. Not only that, this feature can also help user to monitor their destination before their visit.
Trip History
After users track the trip, their trip history will be shown in the history feature. User can find their specific trip by filling in “Find my trip”. After that, user can see their tracking information (Interaction result, Interaction information, and the summary) each day.
Actionable Insight
Step 4. Prototype
I make prototypes using Figma. There are login prototypes, search other area prototypes, trip tracking prototypes, and trip history prototypes. Please click the italic link below to try the prototypes.
Login Prototype, Search Other Area Prototype, Trip Tracking Prototype, Trip History
Step 5. Test
Usability Testing (UT)
“Usability testing aims to evaluate a solution for a product by testing representative users in order to solve problems effectively.”
By dibimbing.id class
I did usability testing on trip tracking feature by maze.co application with 5 participants.
Test Result
Improvement
Based on the test result, the next improvements are to fix the homepage and trip tracking feature. So, users no longer misunderstood and help users to do trip tracking more easily.
Because of that, I make improvements in user flow and Information Architecture that allow users to track their trips in many ways like from the “Search another area” search box, tracking feature, and “track my trip” button to encourage users to track their trip. After users track their trip, there will be an active trip recap in the homepage, when users want to see the details, they can click on the recap and move to the my trip feature.
To ease user find their trip information, I change “history” with the “My Trip” microcopy.
History
(+) more general so everyone knows
(-) refer to past trips
My Trip
(+) refer to all of the trips that has been made
(-) not as general as history
Closing
That’s all the explanation of my case study project. By applying design thinking end-to-end and many improvements, I got a lot of new knowledge in completing this project, which will be useful for me in the future.
I am very open to receiving feedback and suggestions from all of my friends.
Thank you for your time and attention to read :)
References
Let’s be Friends!
You can find me on Linkedin shintia lim :)
