Magika
A mobile app that combines music, mood, and location to help people discover and create memorable moments
THE INSPIRATION
The idea for this project started where a lot of interesting ideas tend to start- over a few drinks with friends at a restaurant. My friend Eric Thompson and I were talking about those magical moments when you find the perfect song for a particular time and place- the way those moments transform the world around you into something ephemeral and special, as if your world was a movie and you discovered the soundtrack.

People turn to music to be lifted up, to be inspired, to reflect, to make them feel understood, to have a source of strength in difficult times. These powers are amplified when the right song reaches you at the right time and place. Capturing that experience was the inspiration behind the Magika App.
PROJECT OVERVIEW
This project covers the research, design, and testing of a mobile app. The work was completed over a 10-week period for a class in Computational Creativity that I took as a HCI Master's Student at Georgia Tech. I was responsible for all the UX Design components of the project, from initial architecture through interface design to interaction design. My partner, Bradlyn Walker, took on the role of UX Researcher, leading the research and usability testing. We collaborated together to build personas, synthesize research, and discuss usability issues. We were also fortunate to have two other HCI Master's students with whom to consult and develop ideas.
TEAM
Team of 2
  • 1 UX Designer (me)
  • 1 UX Researcher
TIME FRAME
Feb. - Apr. 2017
    MY ROLE
    • UX/UI Design
    • UX Architecture
    • Strategy
    DESIGN PROCESS OVERVIEW
    One of the most exciting things about this project was the getting the chance to go through the cycle of design, testing, and iteration several times. Too often, grad school projects end before there's time to fully integrate the feedback from usability testing into the next design iteration. Instead, the hard work of reimagining an experience is relegated to a discussion of 'Next Steps'. There are, of course, always 'Next Steps' to consider, but it was a great learning experience to push this concept a few steps further than time normally allows as a student.
    RESEARCH
    + SYNTHESIS
    Literature Review
    "Quick + Dirty" Interviews
    Personas
    Key Task Flows
    ITERATION 1:
    WIREFRAMING
    Ideation/Sketching
    Architecture Mapping
    Wireframing
    Low-Fidelity Prototype
    Expert Evaluation
    ITERATION 2:
    DESIGN
    Interface Design
    Interactive Prototype
    Usability Testing
    Design Implications
    ITERATION 3:
    REVISION
    Re-Sketching
    Interface Design
    Interactive Prototype
    Flow Diagram
    Style Guide

    Research

    With ten weeks to finish the project, we were only able to allocate two weeks to conducting background research. That's not a lot of time-- especially when you have three or four other class projects to manage. So, it was important to select methods that gave us the maximum value in our limited timeframe. Here are the most critical questions that we wanted to answer:

    My partner came up with a great strategy that allowed us to get a jumpstart on our research right away- looking into relevant studies and academic literature, particularly on the interaction between music, mood, and memory. By leveraging preexisting research, we were able to gather a great deal of insight in a very short amount of time.

    KEY FINDINGS
    Music, Mood, and Exploration
    Current Music Discovery Habits
    Spotify's Discover Weekly and recommendations from friends are currently the main routes for discovering music. App should focus on the use case of using music as a connection to certain locations, which is not possible with these approaches.
    Certain Moods are More Powerful Motivators
    The desire to find music that relates to a specific mood is not one-size-fits-all. Seeking inspiration, reflection, and companionship during difficult times are particularly potent drivers.
    Music as a Cultural Experience
    Users are more likely to seek new music and exploration when traveling to new places. Tying music to location offers a unique ability for users to experience the cultural/historical 'soul' of a certain place.
    Music as Exploration
    Music is used to experience familiar places in unfamiliar ways, and alternatively, to experience the 'soul' of new places.
    User Preferences
    Creators vs. Consumers
    User behavior can be broken down into two key groups: 'Creators', who thrive on adding content, and 'Consumers', who are only interested in using content.
    "Don't waste my time."
    The discovery process is most valuable when the risk of wasting time is low. People know what genres they like and need enough information to seek those types of music.
    Limit Interruptions
    Notifications and alerts can be helpful in moderation, but providing too many is the quickest way to alienate your users, particularly when listening to music.
    Keep it Quick and Simple
    Adding complexity to the process of discovering music is a non-starter. The app should facilitate music discovery and exploration with the least possible friction and time investment.
    PERSONAS

    Since a portion of our research was drawn from scientific papers, we built personas to bring our findings back to a more personal, emotional level. Role-playing as each of these archetypes made it easier to dial in on the app's key value propositions. 

    BUILDING A PRODUCT VOCABULARY

    During the ideation process, we noticed that it was difficult to concisely describe certain features of the app. The concept of connecting a song to a location is unfamiliar to our users, so we needed to develop a quick and easy way to communicate our message. Our solution was to develop a few app-specific terms to make new concepts more approachable and familiar. Settling on the right terms took a lot of discussion-- navigating around the associations and connotations of a particular word can be challenging. We decided to introduce two terms:

    "Moment"
    Describes a song placed at a certain location. Moments can be 'Created' by users when they connect a song to a location, or 'Discovered' when a user is in the location of a previously created Moment.
    "Journey"
    Describes the active state of using the app to discover or create Moments. During a journey, users are notified when they are in a location where a Moment has been placed. Being on a journey also allows the app to store your location and playlist to review at a later time.

    Wireframing

    Before starting the design, we used our consolidated research findings to start building out the features that our app should incorporate. We were aiming for a Minimum Viable Product (MVP), so certain features, like adding a more robust social component, were set aside to focus on the essential functions. We ultimately narrowed the list to these five tasks:

    • Creating a 'Moment' from a song that is currently playing
    • Creating a 'Moment' from a song that played during an earlier 'Journey'
    • Exploring the map and navigating to a 'Moment'
    • Looking back at previously 'Discovered/Created Moments'
    • Rating a 'Discovered Moment'
    HIGH LEVEL ARCHITECTURE

    With the core functions and task flows identified, I was able to start organizing how all of the pieces fit together. I walked through the architecture from the perspective of each persona to make sure that every user had a clear and direct route to completing their most common tasks.

    EXPLORING THE MAP

    While sketching on paper, I played around with several different approaches to the process of creating a Moment. At the time, I decided the best approach was to integrate the feature as part of the media player toolbar. However, our evaluation showed that this design wasn't very discoverable to new users, so it was reworked into a more visible approach in the following iteration.

    RECENT JOURNEYS

    For some users, the idea of interrupting the perfect song to share it with others would defeat the purpose of the app, making it impossible to be fully immersed in that experience. The purpose of these screens was to build in a way for users to retrospectively create Moments by reviewing their previous journeys.

    Key Challenge
    Remembering the right song from a previous Journey can be difficult. There needs to be enough information to cue the user's memory and aid navigation without overwhelming them with information or raising concerns about privacy.
    NOTIFICATIONS

    Notifications can be irritating enough to ruin the entire user experience, so it's something that needs to be carefully implemented. Magika uses two types of notifications: discovering a Moment and rating that Moment after it has been experienced. The purpose of rating Moments is to identify ill-fitting song/mood/location combinations and provide information to users about which Moments are most likely to make an impact.

    To prevent overloading users with alerts, they are only pushed when a Journey is in progress. For those who wish to turn off rating notifications from the in-app settings, rating Moments can be done within the app.

    Design: First Iteration

    In testing the wireframe, we found that the different processes for creating a Moment needed some additional explanation. I wanted to avoid formal onboarding that provides instructions when the app is first opened because it places an immediate cognitive burden on the user. Asking users to learn a new system is not a great first impression. To avoid this, I used the feedback from testing our wireframes to identify three 'hotspots' where more guidance was required and redesigned those areas to offer additional instruction. 

    STARTING A JOURNEY
    Notifications On
    Notifications Off
    SEARCHING A NEW LOCATION
    Current Location
    Searching a New Location
    New Location Info
    EXPLORING NEARBY MOMENTS
    Exploring New Location
    Selected Moment Info
    Multiple Moments Info
    CREATING A MOMENT FROM CURRENT SONG

    Some users want to share a great experience as it is happening, but the process needs to be quick and painless. In the wireframe, this task flow involved the extra step of tapping on the 'Now Playing' bar to reveal a popover menu with a 'Place Song' button. In addition to adding time, this design wasn't very discoverable to new users. By adding a Heart Pin icon-- used throughout the app to designate a Moment-- on the left side of the 'Now Playing' bar, I hoped to make this process more streamlined and immediately recognizable.

    Current Location
    Moment Placed
    Mood Selected
    Moment Created
    CREATING A MOMENT FROM AN EARLIER JOURNEY

    Feedback from the wireframes drove two key changes to the process of creating a Moment from an earlier journey. First, since it was identified as a 'hotspot' for user confusion, brief directions were added to guide the user through the appropriate interactions. Second, the 'Select Mood' modal was integrated to maintain consistency between the two ways of creating a Moment.

    Playlist/Route Overview
    Song Selected
    Song Placed as Moment
    Mood Selected
    Moment Created
    DISCOVERING A MOMENT

    Once a Moment is discovered, the song/artist information is provided and the user can decide whether or not it's something they want to experience. As another way to prevent the frustrating experience of notification saturation, I gave users the option to turn off notifications from these screens without opening the app.

    Moment Discovered
    Notification Options
    REVIEWING A MOMENT

    We developed two questions to help flag problematic content, each requiring only a simple yes/no response to reduce friction. In practice, the feedback generated from these questions would be used to prioritize Moments with predominantly positive ratings and flag/remove Moments on the other end of the spectrum.

    Key Challenge
    Are notifications the most effective way to encourage users to review experiences?

    Many big name mobile services that rely heavily on user input- like Grubhub, Uber, and Google Maps- seem to think so, but it may come at the expense of frustrating users. In this case, despite some reservations, I decided to push forward and see how our users would react to the approach.
    Review Moment Request
    Rating Question 1
    Rating Question 2

    Usability Testing

    To evaluate our design, we created an interactive prototype using InVision. Usability participants were asked to complete a series of tasks and speak their thoughts aloud in the process.  

    A Selection of Usability Findings:
    • The meaning of the terms 'Moment' and 'Journey' are well understood
    • Users want the ability to tune in to specific moods and selectively interact with that type of Moment
    • Users are unclear if turning on/off notifications was the same as starting/ending a Journey
    • Users need more information about a Moment to feel confident that it would be worth discovering
    • Users were confused about whether it was possible to look back at the Moments they've experienced

    Design: Second Iteration

    The second iteration of Magika involved a lot of little changes and a few major overhauls. Many of the smaller issues were related to icon consistency, word choice, and providing additional information within modals. For the more substantial issues, I spent a few days sketching out a variety of different potential solutions.

    REVISED TASK FLOW:
    MAIN MENU AND STARTING A JOURNEY

    Based on our usability findings, I changed the process of starting a Journey to provide more control over the experience. This approach allows users to 'tune in' to specific moods, filter notifications by rating, and fine-tune the frequency of notifications.

    Home Page - Journey Off
    New Journey Options (1)
    New Journey Options (2)
    Home Page - Journey On
    NEW FUNCTIONALITY:
    FILTERING NEARBY MOMENTS

    Almost all of our usability participants mentioned wanting to customize their experience to focus on certain moods. The implication of this finding for map exploration was straightforward: provide filters. Adding the ability to filter by rating gives the discerning explorer more confidence that a Moment will be worth their time.

    Redesigned Map (Default)
    Filter Menu Open
    Map with Active Filters
    ADDING INFORMATION:
    INCLUDING REVIEW INFO WITH MOMENT MODALS

    In the original design phase, I overlooked using the power of ratings as a tool to help users decide which Moments to pursue. One of the ways that I addressed this in the second iteration was to add ratings to the 'Moment Info' modals. 

    New Location Modal
    Single Moment Modal
    Multiple Moments Modal
    EMPHASIZING A FEATURE:
    MAKING CREATED/DISCOVERED MOMENTS EASIER TO REVIEW

    In the first iteration, it wasn't clear to users if they could review the Moments they had discovered or created in the past. To make the feature more noticeable, I created a separate tab in the navigation bar footer and added new screens that made it easier to navigate through past Moments.

    Review Discovered Moments
    Replay a Song in Spotify
    Review Created Moments
    REIMAGINING THE PROCESS:
    A MORE INTUITIVE WAY TO CREATE MOMENTS

    The process of creating a Moment from a recent Journey was visually and cognitively congested in the first iteration. Small text, too many overlapping elements, and unfamiliar interactions created a frustrating user experience. To chunk the information into manageable bits, I created separate screens for navigating between Journeys and categorizing/placing new Moments.

    Recent Journey Overview
    Journey Route/Playlist (1)
    Journey Route/Playlist (2)
    Create a Moment (1)
    Create a Moment (2)
    Moment Created

    Design Communication

    Even though there are still design improvements to be made, the end of our Spring semester also marked the end of this project. As an exercise in communicating design (or, possibly, as a way of passing the project along to another team), I created a flow diagram to illustrate the app's architecture and a set of style guides to facilitate coding the designs.

    FLOW DIAGRAM
    STYLE GUIDES
    Text, Color, and Dimensions
    Common Elements

    Reflections

    The structure of this project created a lot of unique learning opportunities. Since my partner and I created a sharp distinction between our roles as UX Designer and UX Researcher, I was able to practice incorporating research findings into the design of an existing prototype, communicating design decisions, and coordinating research and design phases, all of which helped me to grow as a designer and as a communicator. Effective communication is always important, but it becomes a make-or-break factor when team roles are more segmented.

    Next Projects

    Website by
    Jordan Movish
    © 2018