MyTherapy is a mobile therapy application that I created as part of my Google UX design professional certificate. As the sole UX/UI designer, I
designed this project from inception to final design through research,
ideation, and UX design principles.
Duration: 2 months
Methods: Surveys, Competitor Analysis, interviews, User Personas,
Wireframes, User Journey Maps, Affinity Diagrams, Design Systems,
Prototyping
Tools: Figma, Photoshop, Illustrator
Whether it’s at home, at work or at school. Life can be hectic and
challenging to the point where often mental health can often be brushed aside. I was tasked with designing user experience for social good.
The goal is to design an app with a corresponding website that will bring relief and advice to users who are struggling in their day-to-day lives.
Competitor Analysis
To get a better understanding of the competitive landscape. I conducted analyses on two of the most popular therapy acts in the market. Whilst both were helpful sources of mental health support, the apps seemed to push certain features that are behind a pay wall which would discourage users because of the multistep process clashing with a busy working
professional/students life.
Interviews
The target demographic for the app is young working professionals/
students aged between 16-35. I interviewed 10 likely users & documented how they interacted with the competitor apps.
Insights
Based on my own personal findings as well as insights from the user
interviews, I discovered user pain points to help solve in my own
designs.
Problem Statement
Young adults that are either working professionals or students need a way to quickly check on their mental health throughout their busy
schedules, because they need quick, professional advice to help them
navigate the stress and difficulty of modern day working life.
User Personas
Since the target demogrpahic is both students as well as young working professionals, two user personas were created. The personas reminded me of the specific needs and frustrations the user faced so the project could maintain a user-centric focus throughout the design process.
Insights
Based on my own personal findings as well as insights from the user
interviews, I discovered user pain points to help solve in my own designs.
User Journey Map
From the user personas, I had a better idea of the users goals and
frustrations. The user journey gives a clearer picture of how the user may want to interact with the app and provide the essential screens I would need to create to enable the user to reach their goal.
Paper Wireframes
Now I had a clearer idea of the users needs and their journey, pen and paper wireframes were created to establish the basic layout of the screens. To arrange the most important components: image, text and icons.
I drew multiple iterations of the screens until I landed on a simple yet
cohesive layout with the ideal heirachy layout for the design.
Low Fidelity Protoype
Once I had decided on my paper wireframe structures, I created a low
fidelty prototype in Figma, including essential text and call to action
buttons so the user can navigate through pages of the main user flow.
Usability Testing
With the low fidelity prototypes now created, I decided user testing was the next logical step. I created four clear and concise research questions to ensure users could complete the main user flow and establish any
problem areas whilst using the protype.
Research Questions
Affinity Diagram
With the user research completed, I compiled all the relative data into an
affinity diagram. From there I organised the findings into four key
areas/emotions: Navigation, Ease of Use, Confusion and Frustration.
Actionable Insights
I organised the relative data from the affinity diagram into three key actionable insights. This provides a clear goal of what design iterations I need to make.
Design Changes
Based on the user feedback and the actionable insights, I made changes to the low fidelity mockups to help improve the user flow. These changes
included: a progress bar, options to navigate back, option to quit the task and navigate straight to the homepage.
High Fidelity Mockups
I created a high fidelity version of the app using the Gestalt Principles, colour theory and the use of grids. Whilst still maintaining consistent branding and conveying the appropriate emotions a user may feel when navigating the main user flow.
Accesibility
Finally I made sure the app met accesibility requirements set by WCAG.
1. Placeholders vs Labels
Originally all input fields within the MyTherapy app were placeholders. After doing some research I decided to alter all input fields to have their own label to provide an example of what the user needed to type in that selected field.
2. Indicator State
Previously, when a user selected a call to action button, there was no way to confirm which button they had pressed. After making the necessary changes, the text and button are now displayed in a higher contrast colour to the background.
Final Product
Now all the design iterations Iset out to alter had been put into place, I feel I had achieved my goal of creating an app for social good. The dseign is simple and easy to use for working professionals and students whilst still visually appealing and conveying the emotions the user would expect to feel whilst completing the main user flow.
Here are the final design mockups for the MyTherapy app including screen sizes for Desktop and Tablets.
​
Thanks for scrolling!
If you have any feedback or want to collaborate please get in touch!