mobile screens of the Wazi mental health service app

Wazi - Engineers Without Borders

Designing a mental heath service app for users in Africa
UI/UX Design
Front-End Dev

Team project partnership through Engineers without Borders -
5 UI designers/developers, 2 PMs

UI designer/developer

Feb 2021 - April 2021
(3 months)

Date
Role
Project Type

Project Overview

Context

As a part of the Engineer's Without Border's Design Team, we partnered to work with Wazi, a mental health company based in and servicing users in East Africa.

Problem and Goals

There is a need for improvement in the current version of the Wazi tele-counseling web app

Wazi has a web application that helps users browse for, and book therapist consultations. The founders believed that their current UI could be improved to better fit their audience and so wanted to redesign the app and modify its current features.
‍
As a UI designer/developer in the team I was tasked with creating the redesigns and starting their implementation using Vue.JS.

Solution

A redesigned web app experience to create a smoother therapist consultation booking process and increase retention on the app while aiming to destigmatize the topic of mental health.

Filter by availability and speciality to find therapists and learn more about them

Book a therapy session with the therapist and review any notes from previous sessions

Learn more about the topic of mental health and assess your own by taking an assessment.

Finding therapists flowBooking a therapy session flowTaking an assessment flow

Research

How should we best approach this problem based on our limitations with directly contacting participants, and conducting founder meetings with time zone differences?
step 1

Initial User Feedback

Due to limitations with directly contacting participants, the project was kicked off with general user feedback and product requirements already collected and provided by the founders.

Goal:

Improve the web app as much as possible with the current known information.

step 1

Web App Auditing + Interviews

In order to get a deeper understanding of the app and build on the initial user feedback, the web app was audited and interviews were conducted within the team to reveal other pain points or challenges with the current processes in the app.

step 3

Competitive Analysis

Alongside the web app auditing process, competitor apps such as BetterHelp were also reviewed to see what can be improved and what makes the Wazi web app unique.

step 4

Design Requirements

Finally, based on the first few steps of initial research, the team established design specifications that were to be followed when creating our wireframes in the redesigning process.

Key Findings

The current system for finding and booking therapy sessions is time consuming and unclear
There isn’t a way for users to explore the app other than by booking therapy consultations
There is no sense of personalization present in the app

solution

How might we create a delightful user experience that stays true to the original idea of the product but is personalized, easy to use and creates a comfortable space for users to learn more about mental health?

The Process

After defining design requirements and outlining user flows, we went straight into creating mockups. The designs were iterated upon through weekly feedback sessions with the founders and the rest of the team which also included discussions on feature enhancements as well as any new user insights.

Designs

Challenge #1 - Finding a Therapist

The first step to booking a therapy session is selecting the right therapist. To address the current issues and making the search process time efficient and clear, we added the following features:

  • Multi-select filter based on specialty and availability so that the user only has to look through relevant therapist profiles that fit their basic needs.
  • More sections to provide thorough information about the therapist and their background in the therapist’s profile including the price of the session which was previously revealed later on in the process.
  • Ability to view and leave reviews on therapists to get a gauge of how other people’s experiences have been working with them and make the decision process easier.
Comments on additions and changes made to booking a therapist flow

Challenge #2 - Booking a Session

The flow after finding a therapist is booking a session with them. The following features were added to improve this process:

  • Ability to clearly view the crossed-out dates to determine therapist availability.
  • Ability to choose a platform for the call and enter additional notes for the therapist to view before the session.
  • An extra confirmation step summarizing booking details to finalize the booking to prevent misbookings.
  • A new page for the user to manage their session and directly join the meeting from the web app.
Comments and screens for booking a therapist flow

Challenge #3 - Enhancing app features

The assessments flow was created in order to help create a more comfortable experience and destigmatize mental health while allowing the user the freedom to explore the app. This was a new flow added for the users to assess their own mental health levels while connecting to reading articles on the topic they test on to raise more awareness about it.

Comments and screens for taking an assessment flow

Challenge #4 - Personalization

The profile and app settings pages were newly designed to add personalization to the app experience. Further the home page was also modified to have different views for new versus returning users to reflect user activity and add suitable recommendations.

Profile and App Settings
Home page
Comments and screens for Profile and App settings
Comments and screens for home page

The Final Prototype

Reflection

What I learned and what I would improve

Key Takeaways

This was my first time working with a company based internationally. Through this project, I learned a lot about having a critical eye on designs, user-testing, and collaborating with a team to continuously revisit and improve wireframes upon feedback. That is, we truly used an iterative approach to our designs. However, I think something that I took away the most was the cultural differences that needed to be considered when creating the web app. This included the idea that most of our users were used to mobile phones, may not be as technically adept, live in a community that still holds a stigma against mental health issues, and speak multiple languages.

Next Steps

Through working on this project, I was able to go through the design process and even help program some of the website's features using Vue.JS. However, since this collaboration was sped up in three months, there are still some things that could be improved in the final designs and the design process. If we were to continue with this project, I would suggest -

bullet arrow

Conducting user-tests with potential users in Africa and truly check whether our redesign is intuitive and addresses their problems

bullet arrow

Polishing the UI of the designs and making the designs from both the developer groups fit seamlessly

Thanks for stopping by and let's connect!
Linkedinemail