Terappie —Easing the patient’s access to remote therapy

Tatiana Sant Ana
10 min readJun 11, 2022

--

How we applied the UX design to help psychologists and patients break geographical barriers with the support of the technology.

Terappie App

The group formed by Isabelle Colares, Jair Prado, Juliana Prates, Paulo Almeida and Tatiana Sant’Ana, with the purpose of acquiring experience in UX design remotely, accepted the following challenge:

“How to take advantage of the remote consultation opportunities to improve the health of Brazilians who need psychological help, without leaving home and in the palm of your hand?”

The Current Scenario

It is known that the mental health of Brazilians was already among the worst in the world before Covid-19. Brazil leads the ranking of depression cases in Latin America, with more than 11.5 million people affected by the disease. It is also the most anxious country in the world and the fifth most depressed, with almost 19 million people with the disorder, according to the World Health Organization, and the pandemic has only worsened this scenario.

Business goals

To better understand the business goals we used the SMART methodology, so that it would be specific, measurable, attainable, relevant, and time based.

Create an application for mobile devices to help patients find psychologists taking into consideration approach, cost, suitability, and experiences, without geographical barriers, within 5 months.

If you want to better understand the goals of the business, access the case below.

Personas

We identified two users for our product, the therapist and the patient, and after that we were able to visualize their personas to better understand their profile, their pains and needs.

Personas

User Journey

The patient and the therapist will be the users of the product. So we created the journey mapping of each one so that we could understand the experience of each stage of the journey, seeking to identify solutions along the way, because every path has a beginning, middle and an end. So if we understand this path, consequently it becomes easier to build the interfaces, because this mapping is something alive and dynamic.

Customers Journey Mapping

Pixar Storytelling

We use the pixar storytelling technique to create stories to illustrate the day-to-day lives of our personas and further understand their context.

Pixar storytelling→ Gabriella — Patient

Once upon a time, Gabriella , a newly graduated lawyer who shares an apartment with a colleague.

Every day she wakes up early to study, because she is attending an online postgraduate specialization, and then she starts to work at home on her clients’ cases. One day she had a lot of things to do, such as a meeting with her professor, a meeting at work, and a scheduled appointment with her therapist, and she ended up missing the appointment because she would not arrive on time.

Because of this, she started looking on the internet to see if there was a possibility to do her therapies online.

Because of this, she discovered that she could make her appointments through an application without leaving home.

Because of this, she started her appointments online and realized that this would help her save time, money, and less stress of not having to face traffic.

She was finally able to organize herself better on a daily basis between her study commitments, her work, her personal life, and was completely satisfied with the therapy, because in addition to all of this, she was able to acquire more clients.

Pixar storytelling→ Emma —Therapist

Once upon a time, Emma ,a psychologist who had been married for three years, and had her professional life turned upside down with the arrival of the pandemic.

Every day she wakes up early to try to promote her work through social networks, because due to the pandemic she had to close her office and started researching how she could work remotely.

Because of this, she started searching on the Internet to see if it was really possible to do her therapies online.

Because of this, she found that she could make her appointments through an app without leaving home.

Because of this, she started online consultations and realized that it helped her save time, money, and that she would have the chance to use only a single app.

Finally, she was able to organize herself better on a daily basis between her work commitments and her personal life, being completely satisfied to be working remotely. Through this platform, she continues working with her old patients, acquires new ones, and even has flexibility of schedule, thus improving her quality of life.

First validation step

CSD Matrix

To discover relevant points, pains and needs of our potential customers we use the CSD matrix (certainties, suppositions and doubts) to help us reduce the risk of designing something wrong and to build questions to carry out the research.

CSD Matrix

Research Validation

Quantitative Research

We created a questionnaire on Google Forms, which was answered by 78 people, 28 psychologists and 50 patients. We still had some suppositions, and the main insights we got were:

Quantitative Research

Qualitative research

The qualitative research questions were designed with the objective of clarifying some still existing doubts. So we selected 4 psychologists, 2 patients and 2 people who never had therapy. The interviews took place via WhatsApp and we obtained the following insights:

Qualitative research

Benchmarking

We have also conducted market research with our potential competitors. We investigated functions and options that the app provides and compared it with what we have to offer to the user, so we could understand what already works and what improvements would be beneficial for the user.

Benchmarking

Solution Alternatives

After the research, we applied the “How Might We” technique, to make it clearer which pains and solutions should be included in our platform. Next, we identified the solutions that would generate the most impact for the project and that would have a low effort, so we could apply them to our platform.

How might we?

HMW and Impact vs. Effort

In this step, we have done a Brainstorm of possible ideas that would help the users in their needs, defined in the previous step.
Before starting the product ideation we decided to prioritize the problem to be solved, the solution alternatives and the functionalities, based on the data obtained in our research, using the Impact x Effort Matrix.

HMW and Impact vs. Effort

Ideation

Sketches

To create this solution, we reviewed the case and wrote down points, insights, putting the ideas on paper, creating, sketching and writing down everything that could help us in making the prototype, following the principle, “Pencils before Pixels”.
We did the sketch in 4 steps:
1) We noted down the points that we believe were important.
2) We drew some ideas on paper using freehand drawing.
3) We used crazy 8’s: 8 drawings, 1 minute each.
4) Finally, the sketchesframes.

Some Sketches

First usability test

A usability test was done with 4 people by video call and screen sharing through Google Meet and the tasks were:

Patients

Task 1: schedule an appointment

Task 2: cancel and comment a session

Psychologist

Task 1: sign up

Task 2: log in and create a patient schedule

After the first usability test of the Sketches using Marvel, we saw that some changes would be needed, which were made in the wireframe, such as adding some functionality and making it specific to the 2 personas, and them we could start creating the LO-FI wireframe to get an idea of how the prototype would look like.

Wireframes and User Flow

When creating the medium fidelity wireframe, we decided to focus on the interaction between them and after its completion do the usability test with users.
After the test and its results is that we will start working on the high fidelity prototype, because the cost is much lower if the proper corrections are made before the high fidelity phase.

“It is estimated to be 100 times cheaper to make changes before writing any code, than to apply them after implementation.” — Jakob Nielsen

User Flow + Wireframes

We decided to let users have access to the contents of the app, and also access the list of psychologists, as well as their specialties and consultation prices, to encourage patients to use the app. It has also been proven that many people give up browsing a website or application when there are too many forms and long registrations to fill out, so for this reason we chose to put the registration only after these first two navigation screens.

Second Validation

Usability Test

We asked 10 users (5 patients and 5 psychologists) to test all the available flows in the sketches, in this first test stage we were able to identify some flows that were modified to obtain a better result. We found 2 great difficulties, for both users the great difficulty was to know where to click in the first screen to have access to the registration screen. Another difficulty was in the psychologist flow, in the registration screen, they ended up clicking on the patient’s registration button, because they couldn’t see the phrase “Are you a professional?”, register here, because it was written in a very small font.

Usability test( *it was done in Portuguese)

We also concluded that the screens of the app need to be simple and contain only the information that is useful and necessary to the user.

Style Guide

After analyzing the test results and studying the competition, a Style Guide was created to develop the visual identity of the application.
Our goal was to create an application that would bring tranquility, serenity, and even comfort to the eyes of the users. After studying the Theory of Colors, we decided to use blue because it is used to represent calm and responsibility, it is also relaxing and friendly. We also chose green, which has many of the same calming attributes as blue and can have a balancing and harmonizing effect, as well as representing new beginnings and growth. After choosing the colors, we also checked their contrast to make sure the colors would read well.

Terappie — Colors

Typography

We used the Open sans font, as it is the most widely used font for mobile applications because it has good readability, legibility, and spacing for the user.

Terappie — Typography

Buttons

For the buttons that were elaborated respecting the hierarchy between primary and secondary, we used the standard primary (default), hover (when pressed) and active (active), and chose a rounded shape, because it is more harmonious and pleasing to the eye.We also made the buttons reusable by creating components of the same.

Terappie — Buttons

Forms and icons

For forms and text input, we have added not only the colors known as helpers, but also icons, making them more obvious to color-blind people.

Terappie — Forms/ Menu Bar/ Icons

High-fidelity prototype

Terappie — Hi-Fi

To test the prototype click here.

Future work

  • Continue the research with users, to understand more and more the needs, improvements and opportunities to act; because if the context changes, the user changes and the product changes!
  • Conduct a study focused on UX writing, since even in the most recent tests there are still divergences in relation to the clarity of the terms that were chosen in the prototypes built so far.
  • Perform an analysis of metrics and behavioral indicators, as well as a deeper heuristic analysis of criteria and metrics after the improvements of the last test performed on the high fidelity prototype.

Conclusions and learnings

For sure this case was very challenging for our team members, because the UX world is very vast, and the user experience you are not able to create it, but to make it better, and the more you understand what you can’t do and what you should do, the better the final result will be.

We understand that UX is not an event or a task, but a process (understand, design, decide, prototype and test). It was really rewarding to have participated in each step of this process, from the emergence of the problem, to better understand the current scenario, as well as the business objectives, to the creation of our protopersonas that after the quantitative research we could get to our personas, making sure that the researches are not to show us that we were right, but to help us identify WHERE we can improve.

We would like to thank Leandro Rezende, from UX Unicorn, and Rafael Frota, for all the knowledge they passed on and for making the UX Design journey so interesting and passing on the knowledge so clearly. It certainly brought knowledge that we will take to our future professionals and use as inspiration to grow more and more as UX Designers.
We thank you too, who are reading this far.

Our team:

Want to learn more about us or get in touch? Just follow us on LinkedIn:

- Juliana Prates -UX Research, Mapping, UX Writing, UX Strategy, UI Design and Prototyping.
- Tatiana Sant’Ana- UX Research, Mapping, UX Writing, UX Strategy, UI Design and Prototyping.

- Isabelle Colares- UX Research
- Paulo Almeida- UX Research
- Jair Soares- UX Research

--

--