Olive App

Olive App: Mood Tracking App

About the Project

  • In this project, I was tasked to design a responsive health and well-being app for health-concious individuals skeeing to improve their overall mental health.

My Role

  • UX Design, UX Research

Tools Used

  • Figma, Adobe XD, Maze

Design Process

  • The process I followed for this project was the UX Immersion Course design framework. I identified the problem statement, defined the problem, ideated and come up with solutions to mental health. The process started out linear, then become non-linear during the testing and refinement stages.
Olive App: Mood Tracking App

User Research

A person drinking coffee

Problem Statement

  • There are numerous approaches to addressing mental health concerns as individuals may face a wide range of issues such as stress, burnout, and anxiety. It can be challenging to identify a one-size-fits-all solution. However, studies suggest that honing in on a specific area can foster self-awareness and gradually restore a sense of renewed focus

Solution

  • Olive is a mobile mood/mental health tracking app which encourages the user to track their mood consistently to reduce stress, anxiety, and burnout
  • This single area of focus around tracking mood and creating healthy routines every day will allow the user to feel more calm in their every day and improve their overall mental health
Olive App: Dashboard Sceen

Ideate and Prototype

A person thinking while standing

Sketches

  • After building out the sitemap, I was ready to start my early sketches and ideate the designs. When making the sketches, I often referred back to the user personas and user flows to empathize the path and journey that an Oliver user would take.
Olive App: Sketches

Wireframe and Prototyping

  • From the sketches, I built out mid-fidelity wireframes on AdobeXd and built out the prototype for testing.
Olive App: Sketches

Usability Testing

Two people talking

Usability Test Plan

  • For my usability test plan on the early prototype, I enlisted 6 participants, conducted 3 remote and 3 moderated test. Additionally, I used Figma + Maze design tools to test and see the results
Usability Test Plan

Testing and Errors

  • The usability testing gave me so much insight early on! I saw how I thought my early designs were perfect and easy to complete only to find out that they were confusing and difficult to do. The heat map provided from the Maze platform help me see where users clicked and had the most errors to help me refine my designs.
Maze Error Testing

Analysis and Feedback

  • From the usability testing I used both affinity mapping and rainbow spread sheet to organize common themes to categorize and refine my designs
Affinity Mapping

Rainbow Spreadsheet

Rainbow Spreadsheet

Iterate

  • From the test results, feedback, and research, I iterated the designs to improve the navigation and helped drive my high-fidelity designs
Before and After Iteration

High Fidelity and Refining the Designs

Olive App Routine Page

More Iterations

  • As I moved to high-fidelity designing, I learned the power of color, typography, and design elements that helped me refine my designs and iterate more
UI transformation

Screens