OneHealth: Style guide (case study)

Rafael Lima
3 min readFeb 7, 2021

On my previous article, we talked about user research. Now, I’m going to show the style guide and talk about some design decisions.

Splash Screen

Logo

The logo should carry a message about care, healthcare, and medicine. After research, the following concepts were defined:

  • The logo must have a heart to represents care,
  • Lines to represent electrocardiogram and stethoscope to reassemble medicine,
  • To represent healthcare I decided on a cross image.

With those concepts in mind, I exchanged ideas with a graphic designer who helped me to create the logo.

Logo

How to use:

  • Splash screen: Slow heartbeat animation with the last heartbeat containing a pulse effect while the logo is fading out.
  • Should always be present at the login screen and success screen.

Recover account interface

To recover the account the user will need to enter his CPF. This is a unique number that each Brazilian citizen has. This is to prevent the user to register another account.

To make this section looks more friendly an image was added. In this image, we can see a person(representing a receptionist) and a laptop with a face(representing a chat-bot). The receptionist is the first face-to-face contact between the health testing center and the user.

She usually deals with most user’s inquiries about test procedures and appointments. Providing a great first impression since the reception is crucial to establish a strong bond with the user. Therefore, increasing the users’ confidence in the company.

The chatbot is to represent that the user can find help online. It will change colours depending on the action that is being performed.

  • Inserting CPF: Primary -1
  • Searching user’s data: Primary -2
  • Success: Primary -3
Recover account CPF request interface

Success interface

The success interface should inform the user that his request was completed, whilst carrying company values.

To achieve this the success interface should have the logo, brand name, and image representing the team.

The team will be animated. They will nod their heads up and down to transmit a confirmation message accordingly to the Brazilian culture (if you want to read more about body language).

Success interface

Style Guide

Colours
Headings
Body and others
Buttons
Icons and Avatar
Selectos
Grid system
Images

Current project status

The next step will be the recruitment process for the new usability tests. The goal is to check if the user can complete the tasks using the current version of the project. This process will occur in February.

Special thanks to

Guilherme Neptune who participated in the logo creation and also provided advice about UI.

Hey! Thanks for getting this far! If you want to discuss more or have feedback please drop me a message on my Linkedin.

--

--