Case Study — eHAC Indonesia Form Registration Improvement
Part of Binar Academy UI/UX Design Bootcamp Challenge
Introduction
Hello! My name is Dzaky. A newly born UI/UX Designer that came from Indonesia. In this project, I’ve been guided by my mentor in Binar Academy during Bootcamp. I picked interest in eHAC that stands for “Electronic Health Alert Card”, a government application to solve tracing problems during pandemic situations.
So I took this chance to build a case study about redesigning eHAC form registration flow, where users struggle to find eHAC form location on the current eHAC design. This project was done from February 2021 to March 2021 with a hybrid method whereas the research part was done in a team format and the design part was an individual project.
The Challenges
It became mandatory for us to fill it out when we want to travel, either by Airplane or Ships. As offline forms made a long queue in the Airport, the Ministry began to develop an online form for easy access. But the problem still exists as there are some flaws in the eHAC design.
It is hard to find where the eHAC form is on eHAC UI design. This leads to user confusion on how to use the app itself. So I decided to revamp the eHAC registration flow to help users filling out the eHAC form with ease.
Understand
To understand our users, we try to make user point of view (POV) that could help us to know what user feels while interacting with eHAC application. This point of view later could help us in the research stage.
from this point of view (POV) we know that a person that plans to travel around by airplane in Indonesia during this pandemic situation had to fill out the HAC form via eHAC application according to government policy. As there are still some flaws within its app design, the User couldn’t find where the form is, Also, the user found it complicated where they had to fill it manually even after creating an account.
Define
To define what problems that users really experiencing are, we did interview three eHAC users with these criteria:
1. Users had travel these past 3 months (December 2020 to February 2021).
2. Users age around 20 to 30.
3. Users travel using airplanes.
for our interview questions, check our miro board here. So here is what we got after doing the interview.
“the form flow is cumbersome, I don’t know where to start”
“The things that I hate the most is to filling out the form manually”
“I don’t know where to click if I wanted to create an eHAC”
“I think it is better to have information regarding Laboratory test location”
“Laboratory test result integration with an app is a good idea”
this interview is done to validate our hypothesis regarding eHAC UI and UX design problems. We compile our interview results to create the user persona that could lead us to design decisions. Meet Tania Putri!
Design Priority
Based on Insight that we got from the interview, we make a priority on what should we change on the eHAC app design so it could solve user’s problems. Here is our priority:
- Revamping eHAC form design
Users need the eHAC app could fill out personal information automatically to simplified its process
- Revamping eHAC form navigation
Users need to find the eHAC form easily so they could fill it as fast as possible.
- Information for laboratory test location
Users need to know where they should take a laboratory test, especially when on arrival city.
so, How Might We (HMW) …
Let users find and access the eHAC form easily?
Let users filling out the eHAC form with ease?
Inform users regarding available laboratory test locations?
Design
Hand-drawn Sketch
I started with a hand-drawn sketch so I could deliver my Idea faster as it didn’t cover precision and complexity. This also helps me to picture how it would become on the final design.
Lo-Fi Design on Figma
I build my wireframe based on my hand-drawn sketch and user stories where I began to thought precise component placement. I am focusing on eHAC form flow from creating an account, filling out eHAC form, and reserve laboratory tests as my Minimum Valuable Product.
Hi-Fi Design on Figma
I then started to apply my style guides on these wireframes to create a High-Fidelity design before creating a prototype and tested it on users.
Started with Create Account Page
In this section, users either could log in or create an account if they didn’t have it yet. On create account page, I gave a stepper and Information on why users should fill out this form. A stepper could help to make the form feel shorter and gave users feel accomplishment after filling out forms on each page.
Next is Homescreen
After log in to the eHAC application, users could access the eHAC homescreen that shows the latest travel regulation information, an eHAC QR code for fast access if they are asked to scan their QR code, and two call to action buttons that deliver users to Create eHAC page and reserve laboratory test.
The user's name on top of the screen could give confirmation whether it is their account or not their account. Also, it could give a friendly feel to its users. eHAC card with QR code and some user’s information is shown right in the middle of the screen. For eHAC main feature, the “Creat eHAC” CTA is placed on the bottom so it is reachable by the user’s thumb.
Create eHAC Page
Instead of long forms page that users had to scroll down, I decided to divide it into three sections with steppers. Users didn’t need to fill out their personal information except for their origin detail or their departure places.
Laboratory test reservation page
While not only give users information about laboratory test location, it also gives users access to reserve laboratory tests. Users also had information on what these health facility offers, such as Antigen test only or they also had PCR test. It also shows what time it health facility operates is.
Test Result Page
After reserving a laboratory test, users could see its status on the test result page. Whether they are still in queue or their test result already expired. Test results are shown in card format and users could press it for more detailed information. Where test status is shown on small tag inside test result cards.
Testing
After done with the high-fidelity design, I make a prototype of it to simulate how the design works if applied. I tested it on 5 participants that had similar criteria with interview participants. I tested it online using Useberry as my media to see user behavior on my prototype.
disclaimer: The designs that I showed above are the final design that already gone through the Usability Testing stage.
here are the results!
I still using the unmoderated tests as it hard to find a good time with my participants. But I could still learn how users behave with heatmaps provided by my testing media. To cover up unmoderated test weaknesses, I reach my participants on what they feel during the test session.
Thank you for your time to read this far on my case study. I appreciate your feedback and criticism to make a better design for my next case study or even my project. Give claps if you like it and give a comment down below if you had any feedback!
Let’s connect with me on
LinkedIn: andarwaly
Behance: andarwaly
Instagram: andarwalyux
