Project Overview
August 2017
Problem
Mental well being is a huge factor in life satisfaction. There are countless variables that play into mental well being and it can be overwhelming to try and understand how to improve it.
Solution
Mood tracking is a strategy suggested by many mental health professionals as a way to provide insights into one's own mental well being. However, acquiring the data is just half of the work. Trying to filter through the information to identify patterns is another beast. Using the statistical magic of key driver analysis, we can quickly identify the major factors affecting one's mood. Feels aims to combine both steps—tracking and insights—into an easy and fun to use app.
My Role
UX/UI Designer
Methods
User research, personas, competitor analysis, user journey map, information architecture, user flow, wireframing, user testing, UI research, UI design, prototyping, and interaction design
Technologies
Lucidchart, Balsamiq, Sketch, InVision, and Principle
Resources
The Noun Project, Material Design Guidelines, and Sketch Together
Research
User Research
I began by interviewing three individuals. I learned about their strategies for managing their mental well being and their experiences with mood tracking.
Questions
Do you directly manage your mental well being?
How do you manage your mental well being?
What methods have you tried?
Have you tried tracking your mood?
Do you face challenges when tracking your mood?
What challenges have you faced when tracking your mood?
Have you experienced benefits from tracking your mood?
What benefits have you experienced from tracking your mood?
Key Insights
All three of the individuals had tried and had success with mood tracking.
Mood tracking helped increase their awareness and change their experience of moods in the moment.
Mood tracking helped identify what activities and conditions help or hinder their mood.
There are a lot of different mood tracking strategies.
Persona
I created a persona to summarize the goals and challenges of the primary user.
Competitive Analysis
I did a competitive analysis of the most popular existing mood tracker apps: Mood Tracker, Daylio, Moodnotes, and Clue. I read hundreds of app reviews and identified the pros and cons of each. I also personally used each for a period of two weeks to better understand the process and features.
Product Requirement Document
I created a partial PRD to help identify the vision, issue statement, method, goals and challenges, brainstorm potential solutions, and document mood factors. I interviewed a Ph.D. data analyst and a Ph.D. statistics student to identify the best way to record different types of data so key driver analysis could be run to provide the desired data insights.
Ideation
User Journey Maps
I created user journey maps to better understand and design towards the user's goals.
Site Map
Once I had identified the user goals, reviewed existing solutions, and brainstormed alternative solutions, I began working on the information architecture by creating a site map.
User Flow
Next, I created a user flow to understand how the user would navigate through the content. Each potential action from each page was outlined.
Wireframes
I began wireframing on a whiteboard and in my notebook. Once I had the basic layout, I jumped into Balsamiq and put together lo-fi wireframes.
User Testing
Using Sketch and InVision, I created a lo-fi prototype for user testing.
Usability Tasks
Task 1: Add a new entry.
Task 2: Identify your average hours of sleep for the month of March.
Task 3: View and edit an existing entry.
Task 4: Identify an activity that lifts your mood.
Task 5: Set a reminder.
Task 6: Add a new activity.
Key Outcomes
Task 1: Some users found the 1-5 variable ratings confusing, particularly for custom variables. I changed the numbers to faces for other all feeling and words for other variables. Users were also confused by the entry prompts. I changed the prompts to be full questions.
Task 2: Users found the 'Stats' navigation confusing. I changed this to an overall dashboard view with the option of exploring each variable in more detail.
Task 3: Some users found the overall 1-5 ratings confusing. These were changed from numbers to colored faces. Some users thought a Hunger rating of '1' meant full while others thought it meant hungry. I changed this from a 1-5 scale to a word scale.
Task 4: Success. Users were unsure what the 'Patterns' section was. This section was ultimately removed for simplicity of the MVP.
Prototype
UI Research
For this app, I decided to explore Material Design. I researched Material Design and read all the guidelines. Then I reviewed the information architecture and existing wireframes and brainstormed which Material Design components would work best for each section of the app. This continued throughout the entire UI design process until each section utilized components that made the content easy to navigate.
UI Design
Staying true to Material Design, I stuck with the Roberto font. I originally used the Material Design Color Tool to select my color palette but moved towards a simpler color scheme so I could better utilize color in the visual hierarchy. I also toned down the colors from the suggested 500s as user testing showed the bright colors were distracting.
User Testing
With over 58 unique artboards created for the final prototype, a few dozen usability and A/B tests were done to identify the most intuitive and visually appealing designs.
Key Outcomes
Changed the UI colors. Users found the yellow distracting and hard to look at.
Added color to the calendar dates to quickly show average daily mood.
Added indicators in daily entries to show which variables are mood lifters and triggers.
Added info icons on selected pages to provide more information to users.
Displayed dates in 'Activity Stats' visualization. Although the visual design was cleaner without the dates, users preferred knowing the dates.
Changed supporting red and blue colors to be less saturated. Users found the brighter colors distracting.
Animations
Recap and Reflection
Lessons Learned
You don’t have to reinvent the wheel. UX design isn’t about creating something completely new. It is about solving problems with empirically supported solutions. If the solution is a matter of reorganizing something that already exists, then it is a success.
Be scrappy. Sometimes you don’t have the resources to do formal and extensive user interviews. I learned how to use the resources at my fingertips to get as much insight as possible.
Use the 80% productivity rule. I am a perfectionist. This can often slow down my productivity. During this project, I learned the 80% productivity rule in which you get your designs 80% of the way there and proceed.
A lot of the big problems are solved before you get into wireframing. Sure, the usability of the solution is huge, but something that is easy and fun to use that isn’t useful is useless.
Key Challenges and Solutions
How do we make an app that is significantly better than existing apps?
I did a competitive analysis of the most popular existing mood tracker apps to determine the pros and cons of each and identify users main goals and challenges. From there, I designed an app that filled in the remaining gaps left by existing apps.
What type of data needs to be collected in order to do key driver analysis and provide desired insights?
I met with a Ph.D. data analyst and a Ph.D. statistics student to understand the needed data input.
How do we meet the business goals of being profitable?
I decided to offer a premium version with advanced features such as CBT evidence-based reflective questions, suggestions for improving mood based on anonymous user data, data visualization that displays changes in the user over time, and voice entry.
How do we get users to remember and want to track their mood?
I implemented features such as custom reminders, fun animations, text in the 'Insights' section letting the user know how many more entries are needed for insights to appear, and advanced features such as voice entry and smartwatch integrations to help users remember to and want to track their mood.