Responsive mental health web app
UX designer
Course tutor and mentor
12 months
Dec 2022-Dec 2023
CareerFoundry
Figma, Lucidchart, Optimalsort, Google Forms
Challenge
The challenge was to create a prototype for a responsive mental health web app using the design thinking process and following the design brief given by CareerFoundry.
Results
Designed a prototype for a responsive mental health web app.
Process
Understand
Creating a problem statement.
Observe
User research: surveys, interviews, affinity mapping.
POV
Creating user personas.
Ideate
User journeys and user flows, card sorting and sitemap.
Prototype
Low-fidelity to high-fidelity wireframes, prototyping.
Test and Iterate
Testing the prototype and iterating based on the findings.
Understand
Guided by the double diamond strategy, I set out to brainstorm some potential problems and solutions users might face. This was a basis for my problem statement for the project.
Additionally, I conducted a competitive analysis to have an overview of the health app market and see what solutions already existed.
Problem Statement
Observe
In order to learn more about users I conducted a survey and three user interviews. Finding participants was a challenging part of the process and in a larger project more responses would be necessary for more credibility and accuracy.
Survey participants could participate anonymously and were informed of how their answers would be used in the project. Survey questions always had an option of “I prefer not to say” or equivalent. As the topic in questions can be sensitive, I wanted participants to feel comfortable and secure when answering.
Research Goals
To find out more about user attitudes toward mental health.
To find out if users are interested in using an app to manage their mental health. Why/why not?
To find out what tasks users would like to complete using a mental health app.
Research Results and Affinity Mapping
I analyzed the survey and interview results separately and then continued to combine the findings by creating an affinity map.
Research Results and Affinity Mapping
I analyzed the survey and interview results separately and then continued to combine the findings by creating an affinity map.
Findings
Mental health care is generally seen as important and there is interest in an app.
Users feel they have enough tools to manage their mental health, yet experience symptoms very frequently.
Work, and deadlines in particular, seem to be the biggest cause of stress, mainly due to lack of time to maintain a balanced life and having less freedom in time management.
Users struggle with inputting information consistently, but are also concerned about the app being pushy and overwhelming or feeling bad about not keeping up.
Users struggle with motivation, but are also concerned about notifications.
Privacy is a concern for most, especially if the app has forum or any kind of community function or therapy services.
Insights
The tone of the app should be gentle and encouraging, so it won't be seen as pushy, judgemental or overwhelming.
Any notifications should be easily customizable and as non-invasive as possible.
Positive feedback for inputting information could be encouraging.
Ease of use could help users stay motivated to input their information. Making entries should be a fast and simple process.
The privacy policy should be very clear and transparent, especially if there are any sharing functions.
Materials should be from credible sources and this should be clear to the users.
Users need to be aware of the app and its benefits.
POV
Based on my research findings I went on to create user personas. I noticed two categories emerging so I decided it would be best to create two separate personas.
Lauren values high-quality education and sources and is concerned about privacy and about the app being overwhelming. Dylan on the other hand has trouble staying motivated and consistent when trying to improve his health.
Ideate
The next step in the process was to think how Lauren and Dylan might experience using the app when trying to accomplish certain tasks by creating user journeys and user flows.
The user journeys allowed me to get into the user's shoes and see what they might struggle with, while also start thinking of possible solutions the app could offer to their problems. I could really integrate what I learned from the research to make sure it is the basis for the design.
Card Sorting and Sitemap
Based on the user journeys I crafted the first draft of a site map. I then went on to conduct an open card sort using OptimalSort and adjusted the sitemap based on my findings. I conducted an open cart sorting with 16 cards, utilizing terms from my previous sitemap.
As I discovered earlier in the design process, recruiting participants is not an easy task and I only received five responses. However, there were some clear clusters that formed in the answers, so the research was still beneficial. I also noticed how important it is to make sure that all the terms can be easily understood and that they don't include any jargon or vague expressions.
Low Fidelity Wirefrmes
I started with creating digital hand-drawn wireframes in the drawing app Procreate. I found drawing low-fidelity wireframes to be a valuable part of the process, as it allowed for quick ideas and iterations without getting too attached to the designs. In future projects I would place more emphasis on this part of the wireframing process.
Mid-Fidelity Wireframes
I used Figma to translate my sketches into mid-fidelity wireframes. I started with a rough version just to familiarize myself with the program, and then added in more content and some details.
At this point I also created a separate flow for setting appointments to better meet the project brief criteria.
High-Fidelity Wireframes
Going to high-fidelity wireframes was one of the most challenging parts of the process for me, as I was quite new to using Figma.
I decided to use the Material Design Kit as my design framework to provide structure and to familiarize myself with Material Design practices and learn how to work with a UI design kit. I also simplified the user flows, as I noticed they were unnecessarily complicated.
User Testing
Prototyping, user testing and iterating really went hand-in-hand and there were multiple iterations in all the different fidelity levels.
After creating the first high-fidelity clickable prototype, I conducted a more formal user test and prepared a test plan and script. The tests were done in-person.
I categorized the results and grouped them into positive and negative quotes, errors and observations. I then compiled my findings into a rainbow spreadsheet, which worked as the basis for iterations the first round of iterations.
Findings from User Testing
The health data form looked inconsistent and participants could’t find a way to save.
Problems with consistency in UX writing: participants couldn’t find what they were looking for because of inconsistent titles
It wasn’t clear what the app was for: participants though it was for emergencies and acute situations. That is not one of the functions of the app at the moment so that was very important to know.
Participants found the contents of the app interesting and wanted to explore further.
Peer Review
In addition to user testing and a round of iterating, I asked my fellow design students for feedback on my design. They were able to point out some very useful feedback that resulted in significant improvements in the design. I considered the feedback carefully to make sure any change had a justification. I also worked continuously with my course tutor and mentor, who advised me on best design practices.
After integrating and implementing all this feedback I also performed a heuristic evaluation of the app for a final check, and I was able to catch some final inconsistencies.
Final Iterations
Based on the results iof user testing and peer review, I made one more round of iterations.
Next Steps
While I’m happy with the product I have created so far, digital products are always evolving and there are always things to improve or do differently. Going forward I think there are still some features that could be worked on:
Additional security measures, especially for logging in. This would be important considering the research results that indicated users are concerned about their privacy.
Different visual ways to display health information.
More unique UI design and branding
The app could be expanded to include separate pages for different health information, there could be a separate section for meditations and somatic exercises and the possibility to create different folders for saved items.
Learnings
Creating this design project has been an incredible learning experience. I have learned so much about the design process and gained skills that will be the foundation on my quest to become a better designer.
Some key takeaways from the project were:
An understanding of the design thinking process and the various steps that go into creating a product.
Creating the most common deliverables in a design process.
A better understanding of general good design practices and common design patterns.
Understanding the importance of low-fidelity prototyping and early and continuous user testing
The ability to use Figma more comfortably and design using a design kit
In my next project I will have a better grasp of the process and will be able to design higher quality products earlier in the process and have a more organized workflow.