Solving the problem of Brazilian vaccination control

How I used UX Design to propose improvements in the vaccination system and facilitate the control of vaccines by Brazilian families.

Wagner Germany da Silveira
10 min readOct 3, 2021
Mockup showing 5 high-fidelity screens in an “exploded” presentation.

The Challenge

Through the UX Unicórnio program, it was chosen to solve the problem related to the vaccination card as it is done today (2020), on paper, confusing and highly prone to losses and eventual bureaucracy. My challenge was to design all the processes, from the business objective to the high-fidelity prototype.

How to transform physical vaccination cards into a digital, informative and secure platform?

The Current Scenario

Today (2020), if someone loses their vaccination card, it is necessary to go after all the places where the vaccines were applied. But hardly a person had all the vaccinations in the same state, in the same city, in the same place…

In short, it is not always possible to retrieve all vaccines and other medical history. Generating a nuisance for the citizen and a difficulty to control the vaccines taken.

Another important factor is the fact that there are spaces that require an updated vaccination card to allow access, such as schools. Certain countries also require vaccines to allow entry into their territory, an example of a vaccine is yellow fever in some South American countries.

In addition, with the growing number of myths and misinformation related to vaccines, informing the importance of each one of them and helping the population are goals that the government is trying to achieve, preventing eradicated diseases from returning. Through vaccination, diseases such as smallpox and polio have already been eradicated in Brazil.

The Goal

Develop a digital platform that allows access to the history of vaccines and informs their importance, within a period of two months.

User Research: Desk Research, CSD and Knowledge x Impact Matrix

After studying the subject through news and secondary research information, proto personas and proto user journeys were drawn up to try to understand what the end users of the vaccine platform would be like. At this point we have identified two groups of possible users, parents who have to vaccinate their children and people in general who have to manage their own vaccines.

Thus, the information was organized in three sections using the CSD Matrix: Certainties, Suppositions and Doubts. The most important assumptions and questions for the business would need to be clarified to better understand our users. To assess which of these assumptions and which of these doubts would be more important, the Knowledge x Impact Matrix was used.

Image showing the information from the research organized in 3 rails: certainties, suppositions and doubts.
CSD Matrix.
Knowledge x impact matrix, showing the most important suppositions to be clarified.
Knowledge x Impact Matrix.

User Research: Quantitative survey

With a greater focus on assumptions that had the most impact and that we had the least knowledge, a quantitative survey was designed to obtain data from potential users.

Since two groups of users were identified previously, the survey needed to be shaped in a way that was as short as possible, without people having to answer questions irrelevant to their group:

Image showing the survey’s question flow.
Quantitative survey question flow.

The parameter used was that an assumption would need at least 30% of affirmative answers to be considered validated. 55 responses were computed through the survey, so it was possible to identify some response patterns and generate the following charts.

Pie charts showing the results from the survey.
Pie charts for some quantitative survey questions.

From the information received, applying the previously defined parameters, it was possible to verify which of the five main prioritized suppositions were validated:

  1. “People are not sure where their vaccination card is”: VALIDATED, given that 38% of the people who responded to the survey did not know where their vaccination card was.
  2. “Some people do not know how to retrieve the vaccine history, in case of loss”: VALIDATED, since 79% of all participants would not know how to retrieve the vaccine record from the lost vaccination card.
  3. “People are unsure whether they have had all the vaccines”: VALIDATED, because 41% of people did not know if they had taken all the vaccines for their age group and 39% were not sure, totaling 80% adding those who do not know and those who are not sure.
  4. “People call to see if vaccines are available”: VALIDATED, knowing that 44% of people called to the vaccination post when they were getting the most recent vaccine.
  5. “Parents have difficulty planning their children’s vaccinations”: NOT VALIDATED, only 6% of parents had difficulty planning vaccinations for their children. The same percentage (6%) does not know if they gave all the vaccines to their children.

User Research: Interviews

As two groups of potential users had been created at the beginning of this project (parents who vaccinate their children and people in general) and, with the parents’ supposition not being validated, it was necessary to interview some parents who were responsible for vaccinating their children in order to have a final decision.

A semi-structured interview was elaborated, having some essential questions but prepared to be as open-ended as possible, allowing the interviewee to talk more about them. The focus of these interviews was to speak 10% of the time and listen 90%, obtaining more insights and clarifications on the subject.

Some of the questions designed for the interview can be seen below:

  • How was the process of vaccinating your children? What difficulties did you face?
  • How was the hospital’s support during this period? Was it enough to clarify your doubts at the time?
  • Did you receive any kind of support material? Which? How did they assist in the vaccination process?

After a few rounds of interviews, it was noticed that the children’s vaccination had not been an obstacle for the parents. And with that, it would not be necessary to elaborate the product/solution for one of the user groups that had been defined previously.

Concluding that, thanks to research and interviews, it was possible to save both time (which would have been spent on the design process) and money (which would have been spent developing an application that would have no audience).

User Research: Problem Statement and Persona

Wesley Xavier is a food engineer that lives in Minas Gerais/Brazil who needs to retrieve the vaccines from his vaccination card because his parents lost his old vaccination card, and he needs it updated for his new job.

Persona: Wesley Xavier.
Persona: Wesley Xavier.

User Research: Pixar Storytelling

Once upon a time, there was Wesley Xavier, a food engineer from Brazil.

Every day, he goes to work by car in the city of Varginha/Minas Gerais.

Then one day, he was selected for a new job in the food industry, which required a series of vaccines taken. But he doesn’t remember if he took all of them and doesn’t find his vaccination card.

Because of that, he had to look for his vaccination card all over the place, including his parents’ house.

Because of that, he had to call every health center he could think of to try to retrieve his vaccination history.

Because of that, he needed to get some vaccines again as he couldn’t recover all of them.

Until finally, thanks to the federal government’s Caderneta de Vacinação Digital app, Wesley has access to his vaccination card digitally, without the risk of losing his vaccine history ever again.

User Research: User Journey Map

Based on the Interviews, Surveys, Personas and Problem Statements, the User Journey Map was elaborated in order to understand the user’s routine with the problem and what insights could be obtained at each stage of the process.

User journey map Persona Wesley Xavier.
Wesley Xavier’s Journey Map.

Ideation: How Might We and Solution Prioritization

Some of the identified opportunities can be verified using the How Might We method:

How Might We make the vaccination card unmissable?

  • Create a digital vaccination card linked with government data.

How Might We inform the availability of vaccines at health posts?

  • Create a system to show availability of vaccines at health centers.

How Might We remind people when a vaccine will be available?

  • Create a medium for vaccination reminders via email/sms.

After coming up with several ideas, it was necessary to select which ones would generate the greatest impact for the business with the least effort to be carried out. For this, the impact x effort matrix, seen below, was used.

Impact x Effort Matrix, showing the 5 ideas that have the most impact with the less effort to be implemented.
Impact x Effort Matrix.

Paper Wireframes e first Usability Test

With all ideas generated, prioritized and selected, the following steps were applied:

  1. All the information generated so far was organized in the same place, notes were made with the main points relevant to the design of the solutions.
  2. Sketches were made freely, without following aesthetic standards, just to exercise creativity and possible ideas.
  3. Crazy Eights was used to generate some alternatives for certain screens and solutions.
  4. Finally, the Paper Wireframes were designed.
Sketches and notes from the ideation process.
Some notes and sketches from steps 1 to 3.
Refined paper wireframes.
Paper Wireframes.

With the paper wireframes finished and, using the Marvel App, a “paper” prototype was created.

Paper Prototype.

A UX Research study plan was created to organize a usability test with users. Some of parameters can be checked below:

  • Study type: Usability Study Online — Moderated.
  • Location: Brazil, In person and remote (Using Marvel App and Zoom).
  • Participants: Five (5).
  • Lenght: 15–20 Minutes.
  • Metrics (KPI’s): Conversion Rate and User Error Rate.

The main insights are shown below:

  1. Add new inputs: When using some features, users did not have the option to filter vaccines by age group.
  2. Change quick actions header: Some users did not understand the concept of “quick actions”. So the header was changed to “services”.
  3. Add a shortcut in services to the draft vaccination card: Users had some difficulty finding this function.

Low-Fidelity Prototype and second Usability Test

The next step was to make a transition from paper to digital wireframes.
Using Figma, with the adjustments applied after the previous usability test, the low-fidelity prototype was created:

Low-fidelity prototype.

With a working lo-fi prototype, another UX Research study plan was created to organize a second usability test with users. Some of parameters can be checked below:

  • Study type: Usability Study Online — Unmoderated.
  • Location: Brazil, Remote (Using Maze).
  • Participants: Five (5).
  • Lenght: 10–15 Minutes.
  • Metrics (KPI’s): Conversion Rate, User Error Rate, Time on Task and System Usability Scale (SUS).

After conducting the usability test with the lo-fi prototype, it was necessary to organize the information obtained. For this we first used a note taking spreadsheet. With the organized data, the analysis was done in order to filter and find patterns among user feedbacks, the main insights are shown below:

  1. Add shortcut to search for available vaccines: Test participants performed the task in indirect ways, causing some confusion.
  2. Text consistency: There were important texts that were written in different ways but that meant the same thing.
  3. Vaccine list view mode was difficult to interact with: The layout was confusing and made scrolling difficult.
  4. Add a shortcut from profile photo: Some users clicked on the avatar photo (check image below) on the homepage when asked to find their profile data.
Image showing the heatmap of the home screen. It is possible to notice that users were clicking the avatar icon trying to go to the profile data.
Fourth insight: Some users clicked on the avatar photo (first circle in the upper right corner) to try to find the profile data.

Style Guide

After laying out the structure of the app and testing it with users twice, the next step was to include the visual identity. Visual elements like colors, typography, buttons, inputs, illustrations and icons.

Knowing that this project would be a partnership with the brazilian authorities, the government’s design system guidelines had to be followed.

Project’s style guide showing the visual elements implemented: Colors, buttons, inputs, elevation, typography, icons and components.
Project’s Style Guide based on Government’s Design System.

Hight-Fidelity Prototype and third Usability Test

With a defined visual identity, it was time to create the mockups and make their connections to generate the high-fidelity prototype (hi-fi prototype, for short).

Following the same steps as the other prototypes, a UX Research Study plan (which you can check in detail here) was prepared to then carry out a third and last usability test. The parameters used can be seen below:

  • Study type: Usability Study Online — Unmoderated.
  • Location: Brazil, Remote (Using Maze).
  • Participants: Five (5).
  • Lenght: 10–15 Minutes.
  • Metrics (KPI’s): Conversion Rate, User Error Rate, Time on Task and System Usability Scale (SUS).

The main insights obtained are described in the sequence:

  1. Adjust hierarchy on the vaccination card page: The colors that differentiated the official and draft vaccination card were confusing users, so the colors were adjusted.
  2. Make “False Floor” more intuitive: Some users didn’t realize that cards were scrollable horizontally. So their size was changed (see image below).
Image with 2 screens comparing the difference between the “false floor” change implementation.
Second Insight: “False floor” before (left) and after (right) the adjustments.

Based on the second and third usability tests, there was an increase in the SUS score from 88.5 (lo-fi) to 96.5 (hi-fi).

There was a reduction in the average time needed to complete the following three tasks measured, based on comparisons between lo-fi and hi-fi prototypes:

  • Reduction from 9,7s to 9,2s (5,15%) to add a reminder if a vaccine is unavailable.
  • Reduction from 22,3s to 16,5s (26%) to add a vaccine to the draft vaccination card.
  • Reduction from 47,7s to 15,6s (67,3%) to search for vaccine availability.

Some transformations from sketch to high fidelity mockups:

Image comparing the evolution of the home screen in 3 screens, paper wireframe, digital wireframe and high-fidelity mockup.
Home screen transformation from sketch to high-fidelity mockup.
Image comparing the evolution of the login screen in 3 screens, paper wireframe, digital wireframe and high-fidelity mockup.
Login screen transformation from sketch to high-fidelity mockup.
Image comparing the evolution of the vaccine schedule in 3 screens, paper wireframe, digital wireframe and high-fidelity mockup.
Vaccination schedule screen transformation from sketch to high-fidelity mockup.
Image comparing the evolution of the draft vaccination card in 3 screens, paper wireframe, digital wireframe and high-fidelity mockup.
Draft vaccination card screen transformation from sketch to high-fidelity mockup.

Takeaways

  • In order to get feedback from more users, the MVP (Minimum Viable Product) of this project should be made available to the population. Being implemented and optimized using user data as a metric of success.
  • Three usability tests were carried out in three distinct stages in this project, using the concept of High Tempo Testing, performing as many tests as possible in the shortest possible time.
  • During the development of this case study, the government launched a platform to digitally display the vaccines that each citizen took (we use a bit of the style of the ConnecteSus app as a reference for ours). Which shows that the project’s objective was and is very relevant to brazilian society.

--

--