^{My Role: UX/UI Designer}

^{Programs used: Figma, Miro, Zeplin, Lookback, Photoshop, Illustrator}

^{Project Duration: 02/12/21 - 01/03/22}

‍

Project brief

Mood Rec is an app that will provide a complete suite of services for people who would like to track their daily moods in order to expose patterns in their thinking. Some of the services will include a mood rating system, diary, mood data statistics, calendar and an audio wellness page.

Life can be difficult sometimes, and many peoples mental health has suffered more than usual during the COVID pandemic. For those who feel uncomfortable reaching out for help, an app like this can provide an alternate self-help solution.

‍

The Problem

Many of the mood tracking wellness apps on the market currently only offer an expensive premium service with little to no free features, and/or do not provide users with unique solutions to help improve their mental health.

‍

The Goal

The objective was to create a flexible, simple to use mood-tracking app that could be used for free with affordable, additional premium features. It would offer solutions to helping users understand negative patterns in their mood, and what to do about it.

‍

My Responsibilities

Qualitative/quantitative research, UX design, prototyping, visual design, animation, micro-interactions, testing, and logo design.

‍

Process

Every project is different and my process will continue to evolve. It will be determined by the goals of the project, the problem/problems that need to be solved, time and resources.

‍

The process I used to solve this problem was as follows:

‍

Competitive Analysis

In order to understand key objectives, marketing profile, strategy and usability of similar products, I went searching for some.

The applications that I found (see below) are the most successful current mood tracking apps on the market. I analysed the different features, reviews and specs of each and came up with a list of pros and cons.

‍

‍

‍

‍

Research Goal

I was interested in exploring opportunities in mood tracking wellness products. I interviewed 3 people who had used mood tracking digital products, and surveyed a total of 63 adults. The purpose was to find clear evidence backing what users look for in mood tracking apps, pain points, and what current apps may be missing. The results would contribute to some of the final products key features.

‍

User Personas

‍

Research Synthesis: Themes & Opportunities

In order to narrow down some feature ideas for the app, I created an affinity board from the interviews & surveys. One of the most popular themes amongst the users that I interviewed was audio and video self help. 65% of them turned to Spotify and Youtube when seeking self help over other apps/websites. I believe this to be the key gap in the market for a new mood tracking app as none of the current competitors except "Mood Tracker", include any audio or video self help features. In addition, the options that are available for the audio service on the Mood Tracker app are very limited, and only usable on the premium package.

‍

‍

‍

After going through all the data, I produced 12 top features for potential solutions and prioritised them according to risk & value.

‍

Early Proposal

I proposed a design with easy accessibility to all important features & pages (Home, Zen, + button, Calendar, Settings).

^{- Design: emotionally effective (colours, icons).}

^{- Navigation: Easily understandable transitions.}

^{- Personalisation options on home screen (DP, customisable settings).}

^{- Self help audio (Zen): for different purposes (sleep, anxiety, stress)}

“Crazy 8” & UI sketches/ideas

‍

‍

‍

I designed a lo-fi prototype to cover different scenarios and detail out some of the flows. I then used this prototype to gain feedback and insight from users on Lookback & Zoom.

‍

‍

Key Issues

^{- 20% of users had confusion between Login & Sign Up buttons due to arrangement & hierarchy.}

^{- 50% didn't understand what to do once signed in.}

^{- All users thought calendar page was unclear and didnt understand it's purpose due to layout.}

^{- 10% of users thought the enter mood + button was not clear enough - no CTA instructions.}

^‍

The main issue was confusion with the flow. Moving forward with the high fidelity iterations, I would go on to solve these issues with colour coding, CTA buttons/instructions, modals, extra screens and layout.

‍

Inspiration

The colours were influenced by other wellness apps (see below), and were chosen based on what colours generally made people feel at ease. This was discovered in one of the surveys which showed that 73% of 62 participants perceived light blue and green as the most "calming" colours. These colours tend to be used in hospitals and psychologists offices, as they subconsciously help to put people at ease in stressful environments. Naturally, they became the main colour themes for the final UI, and were tested through "Webaim" against darker typography in order to accompany users with colour blindness.

‍

‍

‍

‍

Laying Down The Foundation

I decided that this product should have a clear, wholesome feel: (calming colours, icons, simple flow). It was very important that a wellness app like this wouldn't create any unnecessary frustration to the user, who could possibly already experiencing a mental health issue.

The theme to represent moods would be weather icons instead of faces or numbers. The idea originated from a Steven Fry quote: “mood is like your own personal weather”.‍

‍

Style Guide

This is a style guide for Mood Rec mobile application. This style guide contains colors, typography, buttons, and icons:

‍

‍

‍

After designing the first high fidelity prototype, I performed a usability test on “Lookback”, to test how the designs performed.

‍

Key Finding:

It was highlighted in the tests that there was no option to select which day users wanted to rate their mood I.E. backtracking a missed day(s). The rest of the flow was a great success and revealed overwhelmingly positive feedback!

I solved this problem with a new modal page which would would be presented to users before the “mood review” page. It gives the option to rate for: today, yesterday or any other date. A date selection was also added to the mood selection page to allow users to have as much freedom as possible when selecting.

‍

‍

‍

Animations & Micro-interactions

One of the issues that arose during the high fidelity testing was that users were losing interest very quickly. I solved this issue by adding some animations & micro-interactions to the prototype, in order to create a more responsive and aesthetically pleasing experience.

The changes made would also help to assist people who are colour blind or have any mild issues with their sight. A good example of this is the navbar design, which has an animated underline effect which follows the users selected page. The movement of the underlining element creates a hierarchy that doesn't solely rely on colour. This is also supported by the animated movement of the clouds at the top of the page when switching between the navbar pages. User attention and engagement increased significantly following these changes.

‍

Navbar and page animations

‍

Mood icon selection micro-interactions

‍

Calendar entries & Zen page micro-interactions

‍

Final Iterations

Before iterating on the final design, I first re-worked the user flow & polished the products features.

Below are some flowcharts, which detail some of the key user flows throughout the app, as well as all the potential features. When moving into the development phase of this app, flow charts like this will lower the workloads for engineers/developers & highlight any problems that may be present.

‍

Onboarding

Upon opening the app, users will be guided through a process that explains the purpose of the app as well as some of the features. They are then guided through the “Sign In” &/or “Sign Up” page(s) before progressing to the main default “Home” page. This page contains a footer navbar with five other tab options (including the home screen):

‍

‍

Flow Chart - Splash  

‍

‍

Features & UI elements

I have arranged some of the main feature screens for viewing, as well as the final prototype. One of the features I have primarily focused on improving the user experience for the "Zen" (audio section) of the app. Some of the data from the research indicated that most people turned to Spotify and Youtube when they are feeling down for calming music/meditation audio. This is also a feature that makes this product unique as there are no other mood tracking wellness apps that provide this. Here is a brief description of the 5 main navbar features:

^{Home: Main default dashboard where users can reminders and check out their personal statistics/audio trends.}

^{Settings: Users can use the settings page to personalise their experience and manage their subscription.}

^{+ Button: Users tap this button to rate their moods/write notes in a fast & efficient manor.}

^{Calendar: Users can view, delete &/or edit previous notes/mood ratings.}

^{Zen: Users can listen/download self help audio for different purposes I.E. meditation, a very unique feature.}

‍

Primary Actions Flow

‍

‍

What I have learned from this project?

I very much enjoyed the process of designing this app and thanks to the help of the user interviews, surveys and test participants, I felt that this design was an overall success. The research revealed so much unexpected information, which helped to hold the final product together.

As an artist and a musician, I am naturally drawn to aesthetics of designs, and I often have to remind myself that UX is about understanding the user, their problems and how to solve them with design.

Looking back there could certainly be more iterations/improvements on the final UI and usability. The calendar/notes section in particular could could be clearer, specifically regarding editing entries and having the option to type in an exact date rather than having to scroll.