Mood frames hero card

Project Overview

My Roles

UX Design, Visual Design, Brand Identity

Tools and Deliverables

Using Figma, InVision, and Usability Hub as tools I produced a user survey and analysis, three user personas, competitive analysis, user stories, user flows, wireframing, prototype(s), prototype testing, preference testing, and created a cohesive brand and logo for the project.

The Challenge

In today's world a significant amount of our lives are spent interacting with technology to better ourselves and our lives yet when it comes to managing mental health there is a complete lack of minimalist options in the market today. Noticing this absence we wanted to change that and create a visually appealing, minimalist app to help its users track and record their moods to help identify trends and help improve its users mental health.

The project also had no brand identity.

The Solution

After extensive user research, personas, wireframing, testing, prototyping, countless iterations, and branding the concept of Mood was born; a free, easy, and colorful way to track and record your moods and emotional health throughout the year. Featuring daily reminders with a customizable time so you never miss an entry, the ability to analyze yearly mood summary to receive a detailed breakdown of your emotional health, exportable journal for personal records or sharing with a mental health professional, and a short and sweet journal prompt so you end every journal on a happy and positive note.

View Final Prototype

User Survey Research

We crafted a user survey and sent it out to fellow designers, friends, family, and a few subreddits to give us the broadest possible pool of surveyors and responses to help identify and learn more about potential target audiences and their wants and needs. Through the analysis of the survey results these key findings were discovered and used to guide the design process:

  • 57% reported being aware of mental health/mood tracking and journal apps
  • 29% have ever used a mental health / mood app yet only 11% still use one.
  • 54% reported having concerns over mental health tracking and journal apps
  • Privacy, Security, and Anonymity were the top three concerns.
View Survey Analysis

User Personas

After analyzing the discoveries from the user survey, we discovered three user groups and created user personas for them.

PersonasView Personas

Competitive Analysis

After completing the user survey and analyzing the results three main competitors became apparent; Moodnotes, MoodTrack, and a Year in Pixels. After discovering the main competitors a competitive analysis was completed on them to discover more about the competition, the market, and how we needed to position our app to be successful in such a saturated market.


Key Takeways

During this section of the process a lot was learned about what current apps are doing well and what they are doing very wrong. It was discovered that while Moodnotes was the most user intuitive and well designed app the paywall barrier was a huge setback and turnoff for many users. Year in Pixels had the best concept for a free app but the poor font choices and the constant adds at the bottom and throughout the app coupled with a poor UI were a huge problem. MoodTrack was not much better with an outdated UI and everything posted is public unless it was paid for.

View Competitive Analysis Summary

User Stories & Flows

After the creation of user personas, the research previously gathered was used to create a list of high, medium, and low priority user stories. Then these user stories were utilized to create user flows to help map out what screens would be needed to satisfy the main needs of the different user personas.

Sign-up User flow diagram

As a new or returning user, I want to sign up for an account

Sitemap & Content Strategy

We then drafted the sitemap and content strategy doc to detail how the pages within the application are going to be laid out as well as detail what is going to be on that page.

sketches 1 thumbnail sketches 1 signup

Wireframe Sketches

Before committing wireframes to Figma, wireframe sketches were created on paper to aid in rapid prototyping and allow quick iterations.

sketches 1 thumbnail sketches 1 signup sketches 2 thumbnail sketches 2 signup

Wireframing

Upon iterative sketching and moving onto wireframing it became clear that something was missing. After some additional confirmatory feedback it became clear that adding a series of on-boarding screens would ensure the most user friendly experience; and so on-boarding screens were added to explain the features of the application before signing up.

onboarding
summary
new entry
mood analysis
drawer
View Wireframes

Testing the Wireframes

After the completion of the digital wireframes we did some quick informal user testing to assess the app’s usability. We tested the following tasks: sign up for an account, record a new journal entry, analyze summary, view settings, and add new mood. After usability testing the following iterations were made and the mockup revised.

There was some commented and visible confusion on how to navigate the on-boarding besides “skip”, so a "next" button was added.

Before and after img

Additionally, due to user comments, the drawer was also redesigned to be full length instead of half-screen coming from the top.

 Drawer Redesign Before and after img

Branding & Identity

Mind Map & Thought List

We created a mind map and thought list while brainstorming the branding for this project to help visualize and create the Mood brand.

Branding mind map & thought list

Brand Ideals

  • Modern • With a minimalist interface, recognizable fonts, and a refined color palette Mood is a modern app built for the 21st century.
  • Secure • All your private emotions and journals are stored within the application but your data never leaves your device so your private data stays private.
  • Motivational • Motivates you to journal daily to record, analyze, and manage your emotional health.
  • Colorful • Using preset or custom colors to represent associated emotions; visualize your moods in your yearly summary, monthly analysis, or daily journal.
  • Calm • The use of a dark background and non-aggressive color scheme invoke calming feelings.

Colors

brand colors

Using color palette of a soft rainbow gradient of colors for the logo and a bright turquoise as the highlight color paired with dark grays and white It gives the feeling of security, creativity, and refinement to the brand and app.

Logo Design

Logo Sketches

After creating a mind map and thought list we settled on the name "Mood" for the project and started sketching out logo designs. After sketching out ideas we digitally re-created a few of the best ones using Figma. Then, a quick preference test was done to determine which logo style would be further refined and developed to become the final Mood logo.

mood full logo

Hifi Mockup

After gaining feedback during wireframe usability testing a few key changes were made. First, a landing background gradient was added to make the landing page look more unique and modern to better fit the feel of the app. Then, images were changed to have the same highlight color to have a cohesive look and skip & next buttons were placed at the bottom so they are easy to find. Finally, the drawer was also changed back to a long drawer but it now takes up over 60% of the screen for better readability and usability.

onboarding
summary
landing
mood analysis
drawer
View Hifi Frames

Hifi Revised / Prototype I

While we liked the look of the previous mockup, it didn’t invoke the feelings we wanted it to; something was missing. After some rethinking and brainstorming; an idea was had and Mood got a darker color scheme with a whole new feel. By eliminating the bright landing screen and changing the majority of the screen backgrounds to dark Mood took on a more sleek and modern look all while reducing eyestrain for short or extended periods of time. These frames would also go on to make up our first prototype.

onboarding
summary
new entry
mood analysis
drawer
View Prototype I

A/B Testing

During the creation of our clickable prototype, we were conflicted on the colors for the splash and landing page designs. So, we created and deployed a quick A/B preference test to get some feedback and guide our design choices. The results? 75% of people preferred the colors of option B.

Option A

A

Option B

B

Prototype II

After the creation of a clickable prototype, formal in-person usability tests were done on two different types of potential users utilizing the same testing script and tasks on each user to test the product usability. The feedback was majorly positive with only one minor complaint; users want a demo version. Keeping this feedback in mind, a more detailed prototype was created; now with a demo feature to try the app before signing up and set daily reminder interactivity.

prototype 2 signup frame
prototype 2 summary frame
prototype 2 new frame
prototype 2 analysis frame
drawer
View Prototype II

Final Design - Prototype III

After finishing the changes from the user testing the opportunity arose to further refine and develop an interactive prototype. This time around both the frames and the prototype were made using Figma to help aid in rapid refinement and testing. This additional time to refine and prototype immensely benefited the project and lead to changes in button coloring, new entry process, and app-wide interactivity.

View Final Prototype

Design Progression - Onboarding

These onboarding frames show the design progression from the initial wireframing concept to the final prototype design.

wireframe initial thumbnail wireframe initial signup wireframe revised signup thumbnail wireframe revised signup Wireframe hifi initial thumbnail hifi initial Wireframe hifi revised thumbnail hifi revised Wireframe Final design thumbnail Final design Wireframe

Takeaways

A lot of things went really well with this project and I am super happy with the result; it has come a long way. The logo and the color scheme for Mood perfectly represent what I wanted Mood to feel like. One of the things that clearly worked well on this project was changing the background color to dark; it gives it a more refined and modern feel. The user survey I crafted for this project was a big improvement in utility over past user surveys. One of the main things that I wish I could have done differently is fully record all of my user testing completed. Many of the earlier tests I did without recording or taking many notes; just using the feedback. This saved me a little time initially but in the long run a recording could have been a much better asset than some scattered notes. I also wish I would have completed more preference tests because the few I did helped me immensely. Throughout the duration of this project I kept a design journal to help record and organize my thoughts and documents. That journal became an invaluable resource not only throughout the project but also the creation of the case study. I fully intend on keeping a design journal for all my future projects as well. Throughout the course of this project we had a lot of successes but also some failures but in both some important lessons were learned.

Key Lessons Learned

  • You can never do too many preference tests
  • Record every usability test
  • Keep crafting good surveys
  • Keep a design journal for every project