SHIFT
Increasing emotional intelligence through data visualization and tracking interactions
The Problem
Create a health tracking or wellness product.
Solution
SHIFT is a mood tracker, designed for people who want to increase their emotional intelligence. It allows users to gain insight into how external factors contribute to changes in their mood through mood tracking and individualized reporting.
As stated by Elle Woods in Legally Blonde, endorphins make you happy. The mission at SHIFT is to empower users to find what makes them happy.
How do you create a health tracking or wellness product that stands out in an already over-saturated market?
Responsibilities and Scope
This project was completed single-handedly over the course of eight weeks. Feedback was gathered and analyzed during the initial discovery and research phase, which informed the design and usability phase.
My Role
Project Manager
Researcher
Designer
Content Strategist
Project Duration
8 weeks
40+ screens
Understanding the Problem
The Current Landscape
In order to find SHIFT’s place in the market, I did some research on potential competitors. Bearable is probably the most competitive — it is pretty extensive in terms of tracking factors, and is very customizable to the user. But the interface and experience is more reminiscent of a medical chart than something to help you improve your mood. Mooda only allows you to log your mood once per day, but uses stylized emojis to allow users to see their moods at a glance. Innerself is a combination mood tracker and daily journal — it allows you to indicate mood triggers (like if something made you angry or sad). The overall experience is warmer than Bearable, but it requires a level of awareness to recognize emotional triggers and examine your reactions.
After analyzing the competition, it was easy to see SHIFT’s place in the market as a friendly, approachable mood tracking app that works with users to give them emotional insights into what affects their mood the most.
Bearable
Mooda
Innerself
Proto Personas
Once the market placement was confirmed, proto personas were built — these are based on three ideal users of SHIFT.
Alex
Alex is relatively new to the idea of mindfulness and wants something to help them establish a routine.
Jordan
Jordan has just been diagnosed with a chronic illness and wants an easy way to track their symptoms, medication, and other factors to help him determine what causes his flare-ups.
Casey
Casey is a fitness enthusiast and wants something that can tell him what factors contribute to his recovery.
User Flows
After personas were established, user flows were built out to get a rough idea of how different pieces of the product would function.
Alex wanted to receive notifications to help them establish a daily routine.
Jordan wanted to track their medication easily and get more information about side effects.
Casey wanted to see his mood trends against his training plan to get a better idea of how physical activity affected his mood.
Designing a Solution
The user personas and flows were used to generate ideas and ultimately led to low-fidelity wireframes, where initial branding, color palette, and an icon system was implemented.
Testing the Assumptions
Once the low fidelity wireframes were built, it was time to test the assumptions that were the foundation of the proto personas.
Testing the initial wireframes with a small user group focused on overall usability, features to be offered, visual design system, a user’s behaviors and preferences, and any potential issues or concerns they had.
Assumptions
Users want to keep track of their mental health and daily habits in a quick and easy way. They are frustrated by multiple disconnected tracking systems, making it difficult to analyze or gather insights about their mood or emotions. They would like to receive preemptive emotional/mood triggers so they can prepare an appropriate response to stabilize their mood. They would like to receive reminders so they remember to perform a task that makes them happy each day.
Main research objectives
Key Findings
What was working well?
The casual and friendly tone of voice decreased user intimidation.
Seeing most common mood factors was intriguing and unexpected.
The color palette was calming and serene.
Visualizing mood trends and providing analysis was well-received.
What had to be improved?
The navigation was unclear and did not follow expected patterns.
The monotone color palette was too subdued.
The logo was unbalanced and read incorrectly.
There was no visual separation between the negative and positive mood factors.
Design System
Taking that feedback into account, the SHIFT design system was finalized. The logo was adjusted to be more legible in the icon. Colors were shifted to ensure that all screens across the product met an AA accessibility standard.
The Shift design system utilizes a clean, sans serif typeface to inspire movement and change. Soothing colors complement the simple illustrations found throughout the product.
Product Vision
Find what makes you happy.
People are affected by all sorts of things, from medication to the weather to a movie or tv show. But we’re often so busy experiencing our emotions that we leave little time to analyze their origin.
Shift’s vision is to increase emotional intelligence by providing data and patterns about moods and what affects them to give users the tools to improve their mood.
Product Evolution
Onboarding Process
The initial onboarding process is a survey that leads through initial setup in a friendly and approachable way. Moving from low fidelity to mid fidelity wireframes, additional tones of the main brand colors were used to break up walls of text and create visual hierarchy. And the daily activities screen was redesigned to resemble a daily routine.
The product uses location and screen time tracking to automate as much of the daily processes as possible.
Brand colors were utilized to break up walls of text and create visual hierarchy; the daily activities screen was reorganized to resemble a daily routine.
Low-fidelity Wireframes
Mid-fidelity Wireframes
For the final wireframes, even more brand colors were implemented based on feedback that the process felt really long and repetitive. Each screen and mood factor was assigned a brand color, which carries through the rest of the product.
Daily Routine
To establish a daily routine, the product recommends that you track your mood at least three times per day. This helps determine a baseline of your mood shifts and analyze any activities that you add in between those times.
Moving towards mid fidelity, an illustration style and iconography were solidified. The color shift between screens was more saturated after feedback that it was not noticable. The ability to add a note was also added to each screen.
Low-fidelity Wireframes
Mid-fidelity Wireframes
Continuing on, the colors were refined an additional time. The language was adjusted slightly, and there was a journal prompt that was customized for each screen.
Daily Summary
At the end of each day, users receive a daily summary that shows their average mood from the day overall, a visual progression of their mood throughout the day, and a short summary of what happened. It indicates any activities or items they may have tracked or notes made throughout the day.
Moving towards high fidelity wireframes, the consistent color scheme was implemented, additional activities were added to the daily summary. And then a notes summary screen was added, allowing users to see all the notes they recorded that day and reflect on their day overall.
Home Screen and Navigation
Moving towards mid and high fidelities, a more traditional navigation was implemented. On the home screen, the language and imagery were clarified, and the positive and negative mood factors were treated differently to give the positive factors more visual emphasis.
The navigation was reorganized to be more clear after user feedback found it to be confusing. Brand colors were implemented to provide continuity across the product. Negative mood factors were given less visual hierarchy, and navigational items were edited to include quantifiable factors.
Mood Analysis
After someone has been using the product for about a week or so, they receive their mood analysis, which is basically a snapshot of all the things they tracked over the past week. They can also select different factors to overlay on top of their mood analysis, to get an idea of how a certain factor related to their mood overall.
Getting closer to high fidelity, a weekly summary was added to give users a brief look at their week. Labels were added to the weekly mood analysis chart, brand colors and iconography were confirmed, and the additional insights screen was reformatted to be a modal instead of a separate screen to avoid disruption.
Moving Forward
Medication and Side Effects
Medication and side effects were initially part of the product, but it came with a lot of complications. Privacy and data security was a large concern. Potential issues arose regarding liability around logging medication that isn’t prescribed to a user.
Education and Resources
What happens if your mood isn’t improving? Providing resources for additional help or educational prompts could be helpful. Adding a community connection could also be explored.
Additional Testing
Additional testing is needed to test the viability of the updated product and address the features that have been updated since the initial low-fidelity usability test.
Final Thoughts
What went well?
Product Placement
Research on competitors found a significant place in the market for this particular product.
Process Documentation
Keeping a log of everything week to week helped assemble a larger picture of the entire process.
What would I do differently?
Interviewing
Limit scope of questioning and steer away from discussions about potential features.
Design System
Keep the design system in mind from the beginning to decrease time reformatting.