Olive

Olive is a responsive web app that “allows health-conscious individuals to log in to a responsive health and wellbeing portal to record their health and medical information, and access general physical and mental wellbeing features."

Olive

Olive is a responsive web app that “allows health-conscious individuals to log in to a responsive health and wellbeing portal to record their health and medical information, and access general physical and mental wellbeing features."

The Project

The Project

Responsive mental health web app

Role

Role

UX designer

Team

Team

Course tutor and mentor

Duration

Duration

12 months

Dec 2022-Dec 2023

Primary Stakeholder

Primary Stakeholder

CareerFoundry

Tools

Tools

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

  1. Understand

Creating a problem statement.

  1. Observe

User research: surveys, interviews, affinity mapping.

  1. POV

Creating user personas.

  1. Ideate

User journeys and user flows, card sorting and sitemap.

  1. Prototype

Low-fidelity to high-fidelity wireframes, prototyping.

  1. Test and Iterate

Testing the prototype and iterating based on the findings.

  1. 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

People who want to improve their mental health and struggle with stress, anxiety or depression need a way to securely track and monitor their symptoms, because it will help them make positive changes and improve their quality of life.


We will know this to be true when users continue using the app for an extended period of time and report improvement in their mood after using the app consistently.

People who want to improve their mental health and struggle with stress, anxiety or depression need a way to securely track and monitor their symptoms, because it will help them make positive changes and improve their quality of life.

We will know this to be true when users continue using the app for an extended period of time and report improvement in their mood after using the app consistently.

  1. 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

  1. To find out more about user attitudes toward mental health.

  2. To find out if users are interested in using an app to manage their mental health. Why/why not?

  3. 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.

  1. 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.

  1. 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.

Have a Project in Mind?
Let's connect!

I'm open to new opportunities ranging from full-time roles to part-time projects in the Helsinki metropolitan area or remotely.

Have a Project in Mind?
Let's connect!

I'm open to new opportunities ranging from full-time roles to part-time projects in the Helsinki metropolitan area or remotely.