Methodology

Atomic Design is right at the intersection between design and development.  Atomic Design comes to unite both disciplines under one concept: design by components. It is a set of standards to manage design in a scalable way, reducing inconsistencies while creating a unified visual language.

Getting to work

To overcome these challenges and streamline the decision-making process, we made a squad for this project which consisted of a graphic designer, front-end developers, and UX Designers.

We defined asynchronous work and specific tasks for each person, as well as weekly to be able to see the progress within the project.

Research

Component inventory

• Aims to identify the following:

• Determine if something is obsolete or does not meet its functionality.

• Evaluate perceptual and functional inconsistencies to correct them.

• Make decisions on which elements to redesign.

• Document all this information so that it is accessible to the entire product team and for the following stages.

In this first phase of the UI, we focused first on identifying the elements and components in the web channel, since it is the one with the largest number of users.

Online survey

A survey was conducted to find out what their perception of the brand is. It included the following questions:

• How do our users perceive Terapify?

• From which devices do patients take therapy?

• Do you have the Terapify app installed?

• Why do our users prefer Terapify?

• What colors do they most associate with Terapify?

Laying the foundation

Before we started designing the components we created a guide that included colors, typography, branding, icons, and illustrations. In this way, we felt that we were working together on the same idea.