Ayo Vaksin Online Vaccination Registration

This case study is a final project of UI/UX Design bootcamp from Dibimbing.id.

Ayo Vaksin! is an application for online registration of covid-19 vaccination. The aim of this application is to give the exact vaccination schedule for User and information about vaccination in Indonesia.

Indonesia is currently still facing the Corona virus. In 2020 ago this virus began to enter Indonesia, until now in 2021 this virus is still exist. Since the beginning there have been several efforts made to break the chain of this virus, but this has not been able to break the spread of the Covid-19 virus until a vaccine is issued which is the hope of many people in the world to ward off this virus or at least minimize the danger if attacked by Covid-19 virus.

In Indonesia itself, the Covid-19 vaccination has started in January 2021. The first vaccine in Indonesia was given to the President of the Republic of Indonesia, Mr. Jokowidodo who received his first dose of vaccine on January 13, 2021. Since then the Covid-19 vaccine has been gradually distributed to all regions in Indonesia. However, in its implementation, there are still many things that need to be improved.

Based on a survey of 116 people from different cities in Indonesia, it was found that some pain points in the process of getting vaccinated were felt by respondents for the first dose of vaccination as shown in the graph below:

N = 116

From the survey, there were 62 respondents who had received the second dose of vaccination. There are slight differences in the pain points felt in the second dose of vaccination:

N = 62

From the graph above, it was found that the vaccination locations were too crowded and the vaccine queues were too long are the problems that most of the respondents felt. This is in line with data regarding crowds that occur when respondents are about to get vaccinated, where 61% of respondents feel that the location is too crowded and maintaining a minimum distance of 1,8 meters is not applicable.

N = 116

When social distancing cannot be applied properly, the corona virus will be easier to spread from one person to another. This raises the potential for create a new cluster resulting from the vaccination site. 85% of respondents were afraid of to get infected by corona virus while at the vaccination site because health protocols could not be optimally implemented.

Based of some problems found from the survey results, I want to help to make the covid-19 vaccination system in Indonesia better by designing an online registration for covid-19 vaccination. With this application, I hope that the public can get a definite vaccination schedule so that the number of people crowding at the vaccination site does not exceed the number of people allowed to be onsite so that Covid-19 Protocol can be implemented and no new cluster of covid-19 spread.

User and audience from this case study are men or women in Indonesia, 18–59 year old that already got their first dose of covid-19 vaccination.

In this case study, I’m responsible for the whole process (end to end), starting as a UX Researcher to conduct research in this case study, to as an UI Designer to design the appearance of the Ayo Vaksin! application.

The challenges that I face in working on this case study are the time given to work on this case study is relatively short and the I have no partner to share the ideas with.

In this case study I use design thinking. Design thinking is an iterative process in which we seek to understand the User, challenge assumptions, and redefine the problem in an attempt to identify strategies for alternative solutions that may not be immediately apparent with our initial level of understanding

Design Thinking Process

The fist step I took to understand the problems that occurred in the vaccination process was to conduct a survey. My survey was distributed through several Whatsapp groups and found 116 respondents who met the required specifications. From the survey, I found out the problems that respondents faced in the process of getting vaccinations. To understand more deeply, I also conducted in-depth interview with 5 people who had received at least fist dose of vaccination and came from several different cities. The following is the research plan in this case study:

Research Questions


Because the main purpose of conducting a survey is to find out what problems users face in this process of getting vaccinated, the main question in this survey is “What are the problems faced in the process of getting vaccinations?”

In Depth Interview

1. Mengapa Anda ingin divaksin?
2. Apa ekspektasi Anda terhadap vaksin?
3. Bagaimana proses registrasi untuk mendapatkan vaksin?
4. Mohon ceritakan pengalaman Anda untuk mendapatkan vaksinasi.
5. Apakah Anda pernah mendaftar vaksinasi secara online? Mohon ceritakan.
6. Menurut Anda, apakah vaksinasi ini sudah berjalan sebagai mana mestinya?
7. Dari mana Anda mendapatkan informasi seputar vaksinasi?
8. Apa kendala yang Anda hadapi dalam vaksinasi ini?
9. Menurut Anda bagaimana cara yang tepat untuk menyampaikan informasi seputar vaksinasi kepada masyarakat?
10. Mohon ceritakan mengenai penerapan protokol kesehatan saat di tempat vaksinasi.
11. Menurut Anda bagaimana cara untuk mengurangi orang yang berkerumunan saat vaksin dilaksanakan?
12. Mohon berikan saran untuk perbaikan proses vaksinasi ke depannya

User Persona

To get to know more about the Users who will use this application later, I created a User Persona based on the 5 Users that I interviewed:

User Persona

In this step I create User Journey Map, Impact Effort Matrix dan Competitor Analysis.

User Journey Map

From the results of the interviews that I have done, I created a User journey map. From User journey map I can find out the User’s step by step in getting the vaccine and find the opportunities based on the existing pain points. Opportunities that I found from this User journey map later will be implemented in the application that I design.

User Journey Map

Actionable Insight

  1. Make online registration for vaccinations. This online registration is not a substitute for a form that must be filled out at the time of vaccination, but to set the vaccination schedule and location for the User. This is useful to set which session the User gets the vaccination schedule.

2. Provide the vaccination certificate that can be downloaded.

3. Provide the FAQ about vaccination.

4. Provide the information about what needs to be prepared for registration in vaccination locations, such as copy of ID card and a pen so Users won’t borrow the others’ pen in order to prevent the spread of covid-19 virus.

5. Provide the information about the locations of vaccination and the amount of available vaccine at those locations.

6. Inform the Users if there are any changes in schedule or vaccination location to User.

Impact Effort Matrix

After getting various opportunities from the User journey map, I created an impact effort matrix to consider which opportunities can be implemented immediately in the application that I designed.

Impact Effort Matrix

Competitive Analysis

Competitive analysis is conducted to gain the insights about the application that we will build. In addition, it is necessary to understand the User flow of online vaccine registration. I conducted a competitive analysis on five applications that provide information about Covid-19: Halodoc, Pikobar, EndCorona, MySiloam and PeduliLindungi. Each of the has advantages and disadvantages, but from these applications I get insights about what information I want to display later in the application that I want to build, and I get insight about the User flow of online vaccination registration.

Competitive Analysis

The third stage of design thinking is Ideation. In this stage I create User flow, information architecture, and mockup.

User Flow

User flow is the step by step conduct by User while using an application to finish a task. User flow to do sign up, log in, and registration can be seen below.

User Flow

Information Architecture

After User flow, the next step is to make Information Architecture (IA). IA is a method that used for documented all flows, content, and design requirements in an application or website. With IA, the flow in an application or website will be clearer.

Information Architecture


I made the wireframe manually (pen and paper) by sketching on a paper with a pen. I do this because it’s easier for me before moving to the mock up stage.

Low Fidelity Wireframe

Design System

I made design system to keep the consistency of each component in a design.

Design System

Mock Up


Beranda dan Layanan Utama Pada Navbar

Registrasi Vaksin

After mock up, the next step is to make the prototype. Please access the prototype here.

I conduct Ssability Testing (UT) to 5 participants. Based on UT, there are several improvements needed:

  1. Enlarge the text Daftar ke Ayo Vaksin!
  2. Give the scroll bar when User is going to choose the province.
  3. Change the text “informasi” to “berita vaksinasi”.

Please access the UT report here.

Thank you for reading my case study. As a newbie in UI/UX field I’m sure there are lots of room for improvements. However, I leant many new things when I do the end to end process of this case study myself. In this case study I really implement the knowledge that I received after joining in Dibimbing bootcamp for 3,5 months. I’m very open for corrections and suggestion so I could improve myself in UI/UX field. Once again, thank you!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *