Dr.Vacin App — Ideating the solution and User Interface Design

7 min readApr 26, 2022

This article aims to show more details on the Solution ideation process and the UI design used to build the App Dr.Vacin

Considering all the information gathered during the first part of the discovery phase, such as the personas and their journeys, it was time to ideate the solution.

Alternatives and Solution:

I used the Impact x Effort Matrix and the “How Might We” technique to search for alternatives that could better respond to the users’ needs and guide the focus to be given to the solution.

From the opportunities identified in the previous phases and from the construction of the matrix, I verified several possibilities that could be developed, as shown in the image below:

After brainstorming and identifying ideas with greater impact and less effort, I grouped the similar conclusions and chose which ones I would focus on to reach the solution, they are:

The Solution

I decided that at this moment the solution should focus on creating an application, adopting the Mobile-first approach of responsive design, leaving the website elaboration for a later time.

This approach is also justified by the fact that in Brazil there are more than 234 million smartphone-type devices, which allows for greater dissemination of the service to be provided in this way.

As essential, the solution should contain:

the vaccination booklet for records;
the option to create reminders;
information about vaccines, side effects, contraindications, number of doses, among others;
space for the dissemination of national vaccination campaigns and news on the subject;
space for information about health care

Sketching

I continued adopting the Sprint Methodology with the steps of annotations and free design. I switched to the Crazy 8’s technique to put ideas on paper quickly and without questioning to give more fluidity to the creative process. With that, I was able to prepare the first sketch of the project that served as the basis for the application’s low-fidelity prototype.

Below are some images of this process:

Low Fidelity Prototype and Usability Test

The first prototype of the solution can be seen and tested on the link below.

https://www.figma.com/file/h7LDKO6yZxxDPNSTCIVxgt/Wireframe-Baixa-Fidelidade?node-id=0%3A1

The usability testing of this prototype resulted in the need to make changes concerning the task menu, arrangement, and configuration of additional profiles and proposed features.

I felt the need to do a benchmarking studying and redesign the low fidelity prototype before continuing the next steps.

Benchmarking

I felt the need to know more about the market in which the solution will be put into operation. This step was important not only to seek sources of inspiration but also to serve a deeper study about the interfaces and what would be working well in them, as well as what should be avoided.

I found several applications related to vaccination. After testing some, I opted to further benchmark the apps: Minhas Vacinas, Dr. Luke, and VacineMe. I evaluated their user flow and design choices, but always keeping in mind the needs found in the surveys I conducted previously.

In addition, I analyzed the functioning of the ConectaSUS application, since the solution designed here aims to be part of the same ecosystem.

This benchmarking analysis can be accessed here!

Wireframe and User Flow

With the result of the low fidelity prototype usability test in hand and the benchmarking research, I started to redesign the prototype as well as define the user flow.

Organizing the flow of tasks was an essential step in understanding the “paths” within the application and identifying the functions and elements that needed to be elaborated for each step. From this mapping, it became easier to separate each stage of development from each functionality.

Now we reach the Design phase.

UI DESIGN

Style guide

Since this is an application provided by the Ministry of Health, there was a need to observe the Design System from the Brazilian Federal Government. The briefing was clear that there was freedom to use it fully or to propose changes. In this case, the Style Guide was used as a basis with some changes as will be shown below.

Colours

The selection of colors was made from the colors available in the design system.

The choice of black and white to compose the color palette was due to a concern with accessibility existing in the government’s design system. When using these colors in typography, it is possible to work with a high contrast ratio with type AA and AAA compliance, as proposed by the WCAG guideline.

The chosen blue tones are part of the design system and were complemented by green tones. Blue and green are colors normally associated with medicine, as well as tranquility, cleanliness, and health, and that is why they were chosen.

Typography

The font suggested by the government style guide is Rawline, which is nothing more than the Raleway font with the alignment of its asymmetries. It is a sans serif font with good readability and readability.

However, although it has a wide variety of styles, the rawline font when used alone seems to generate some visual discomfort on the mobile screen in certain segments, which requires testing with users with low vision.

Therefore, I used the Rawline font only in its Regular and SemiBold formats, choosing to combine it with the Source Sans Pro font to establish hierarchies and contrasts, making the reading experience light and fluid.

This issue will be tested in a future stage of the development of this application.

The scale followed was the Minor Third (1.2) with a weight of 400 and 14px base, the same suggested in the design system of the federal government.

Buttons

With the colors and typography defined, I started to elaborate on the Buttons and Menus for the app.
Considering that the solution at the moment is focused only on a mobile product, I chose to create buttons with active and deactivated states, following the sizes proposed in the wireframe. The development of buttons such as hover pressed, and other states will only occur in a later step when creating the website.

Forms

Icons

The design system suggests the use of Awesome font to choose icons however this font is not available in the free version. Thus, the icons presented below were developed:

Illustrations

In addition, I created lustrations to give a playful tone to the application and create an emotional bond with the user. Are they:

Dr. Vaccin Character: created with rounded lines to give sensations of proximity, sympathy, affection, and security, being the main face of the product.

Virus, Bacteria, Protection Shield, and Clouds: in a cartoon style to break the seriousness that public agencies including hospitals are used to and that can be explored in a fun way within the application with animations and mini-games.

Images for the vaccination booklet: Adults, Elderly, and Children

The rest of the illustrations used in the prototype were generated using the open library “Blush” on Figma.

Other Elements

I highlight the use of components and variants in Figma in the creation of various elements that allowed the prototyping process to become more efficient.