Moodley


Timeline

2.5 weeks

Role

User Research, Wireframing, Prototyping, Visual Design

Tools

Miro, Adobe XD, Figma, InVision

Overview

Moodley is a multisensory app that uses heart rate, color and sound to curate a listening experience that can gradually shift you into different moods.

With the combined efforts of the Apple Watch and its Companion app, users can track music preferences and receive specially catered music suggestions.


The Problem

People are unsatisfied with the amount of effort they put into their emotional wellness. However, they still fail to prioritize setting a plan into motion when actively tackling these issues in their daily lives.

 

How could we make improving mood patterns a more enjoyable and effortless experience?

 

1. Research

 

Our Hypothesis

Initial team discussion set us on the path of investigating mood patterns and behaviors through journal keeping. We hypothesized that an interactive online journal was the most accessible and efficient way to track mood patterns over time. Such apps certainly were already in the market, but many that we encountered seemed visually unappealing and too arduous to maintain.


User Interview & Surveys

We conducted 8 user interviews via Zoom and distributed our Google online survey through various social media outlets. We asked users about their coping habits in dealing with stress and how emotionally reactive they were in such situations.

 
 
 
 

Key Insights

We realized that although people were intrigued by an application that tracks mood patterns in journal entries, they ultimately were uninterested in dwelling on past events. The act of constant journaling also felt cumbersome and would prove to be less therapeutic in the long run. Unfortunately, our data did not support our original hypothesis.

 

However, the recurring topic of music did seem to be mentioned in most of the user interviews. This prompted us to investigate further and put out a second questionnaire focused on music habits.

 

2nd Survey Results

It became clear to us that music was the perfect medium by which people could passively influence their mood patterns without much effort invested. With these new findings, we altered our direction towards the beginning of a music-based app.


2. Ideation

Empathy Map

Defining our typical user was the first step in understanding pain points and needs.

 

Feature Prioritization

Discussion then turned towards key features that we wanted to address and implement based on all the data collected.

Feature Prioritization Matrix collect our thoughts and helped narrow down the most important functions.

Notable key features:

  • Color Picker interface for matching music to color/mood

  • Heartbeat monitor for instant music suggestions

  • Curated playlists based on data from extended use

It dawned upon us that a single mobile device would not suffice. How would a device like a phone track heartbeat signatures in order to give music feedback suggestions? Only a device like a smartwatch could perform such a task. Unfortunately, a smartwatch does not have the real estate to implement all the tracking features we had envisioned.

Our solution: Two apps. Develop an Apple Watch app to monitor heartbeat activity for music suggestion. Develop its Companion app to handle the complex features of playlists and expand on the Color Picker feature.

Storyboard

With these ideas set in motion, I illustrated a storyboard that would best encapsulate the essence of our app experience and give our project life.


3. Prototyping

User Flow Diagram

A precise map of each function within the app was established. With two devices in play, a few user flow diagrams needed to be drawn out to properly illustrate the interaction between phone and watch as well as the watch’s standby vs active states.

These 3 user flows show how phone and watch interact.

 

Lo-fi Prototyping

While my teammate Ana worked on the Apple Watch version, I concurrently worked on the Companion App. Collaboration over Figma was key as the color picker interface needed to look and function similarly on both versions.

Apple watch. The watch’s limited space forced us to focus on heartbeat-to-suggestion flow and simple playlist functionality.

Apple Watch features:

  • Music suggestion prompts based on heartrate activity

  • Simplified playlist options

  • Touchscreen music selection via color picker

Mobile device. 1st iteration flow took the user through sign-in, color-to-mood/music selection, playlists, and calendar tracking.

Mobile app features:

  • Expanded Color/Music picker functions

  • Expanded customizable playlist options

  • Mood tracking and curated playlists based on calendar data


4. Iterations

Testing and changes

First round of testing of the Lo-Fi prototype revealed confusion while navigating the color picker interface. With such a novel approach to music selection, users were unfamiliar on how to proceed with no context readily present.

Lo-Fi to Hi-Fi changes on Color Picker interface

Companion App improvements:

  • Visible text cues would briefly fade in-and-out to show relationship between color, mood, and music selection.

  • The color wheel was adapted into a record player design marrying the themes of color and music.

  • Playlists now contained more color/mood themed listings, and options for tracking moods were elaborated on for a more cohesive experience.

Greater emphasis on a cohesive experience. Themed playlists combine mood with music. A better realized calendar/tracking system for mood tracking.

 

Apple Watch improvements:

  • Larger surface area within the color picker for easier touch access and enlarged text for readability.

  • Mood descriptions and heartbeat reading could now be viewed and accessed giving better context with relation to music selection.

  • Improvements to the task flow made swiping to different screens more intuitive

 

Improved user flow and visual cues for a smoother experience.

 

High Fidelity Prototypes


5. Reflection

Takeaways

  • Keep investigating. Despite our initial hypothesis being disproven, we found a silver lining within our data. Learning to adapt and letting go of underdeveloped ideas is all part of the process.

  • Choosing not to settle. The decision to produce two working prototypes meant double the work, but in the end it proved more fruitful and effective. Some risks are worth taking despite the perceived challenges ahead.

Next steps

  • Develop how the app would curate playlists generated from calendar data.

  • Further expand on the functions of the color picker interface and calendar tracking system.

  • Develop UX writing & language to make the experience more fun and casual.