Fable Music App

Designing an end-to-end gamified music practice app with a friendly frog avatar.
👩🏻‍💻  Role: UX Designer
🔨  Tools: Figma, Maze
⏰  Timeline: 80+ hours (4 weeks)
see prototype ⤴︎
Introduction
Learning to play a new instrument requires dedication, motivation, and enjoyment.
Many of us have been there. Particularly during the COVID-19 pandemic, you’ve decided to pick up a new hobby… perhaps a new instrument? With good intentions, you decide to embark on a musical learning journey!

You purchase an inexpensive second-hand instrument from Craigslist. You line up a playlist of Youtube tutorials, maybe even find a Zoom tutor, and start to play with great enthusiasm. Naturally, however, it’s possible your practice motivation begins to wane. You’re growing tired of the same drills and scales. You want to start playing the “fun stuff,” but your beginners’ skills aren’t quite up to par yet. And gradually, the novel excitement wears off… and your instrument sadly starts to gather dust in the corner of your room.

So in this research, I wanted to learn more about people’s habits, challenges, and motivations surrounding their music practice, particularly for adults who are playing for their own enjoyment. I also wanted to explore ways people stay accountable, whether it is by tracking their progress and goals, or some other way.

The Problem
Declining follow-through with music practice: When the initial novelty of picking up a new instrument wears off, it’s difficult to stay motivated to practice on a consistent basis.
The Solution
A gamified learning approach: By creating a narrative around the music learning process, this could additionally increase the emotional enjoyment of learning music. This would be done by following around a friendly frog character who essentially accompanies the user in their practice journey.
Research
Before I began my conversations with my participants, I had to establish some overarching questions. I also wanted to be mindful of the assumptions I had. 
Questions
• Do they set musical goals? If so, how do they go about achieving them?
• How do they track their progress?
• What are some habits they incorporate into their exercise?
• What are some blocks or challenges they face when practicing?
• How do they keep accountable for their practice sessions?

My Assumptions
• The main challenges would be consistency in practice and finding motivation to practice.
• Setting a strict routine and schedule is the way to foster self-discipline in music practice.
• Writing down and sticking to specific goals are the ways to have the most “productive” or meaningful practice sessions.
Key Insights
These interviews went against some baseline assumptions I had in mind.

Personally, I thought that people would benefit the most from extremely structured, goal-oriented, routine and discipline when it comes to making consistent musical progress. Nevertheless, my participants expressed the most fulfillment and joy in their practice when it was more flexible, forgiving, spontaneous, fun, and tailored to their moods. As a UX designer, it was an important “you are not the user” moment and realization for me. Subconsciously, I already had some design features for the solution space in mind — even before the interviews! (Which was to design a methodical tracker/journal).

However, after these insightful conversations, I found myself pivoting in a different direction. This opened up an opportunity for me to explore gamified options and positive reward-based music lessons.
All of that to say, the participants were adults who play for FUN and ENJOYMENT! 

The love for learning and music were already internal motivations, so routine and goal-setting were not as popular as I thought they would be. This is not to say goal-making is bad or unnecessary, but rather that grown-ups who play instruments don’t face the same structure and pressures from their parents and guardians. (As I have growing up, which may have coloured my assumptions!)
Defining The Problem Space
How can we help our persona, Gabriela, who seems to have lost a bit of her muse lately?

With my research insights in mind, I crafted a Job Statement for Gabriela (or Gabby), a self-taught music enthusiast who’s hit a little bit of a creative and motivational block in her musical practices. 
‍

I wanted to craft a hierarchy of needs that represented a composite of the motivations and wants expressed by my interview participants. Using the job statement, I then generated How-Might-We statements to address the problem space’s features. 
Ideating On The Solution Space
Creating a storyline that would go hand-in-hand with interactive practice sessions.

Focusing on Layer 3 of the Features Pyramid, I thought of ways to  break down the practice sessions into manageable chunks. I wanted to incorporate rewards and progress for positive reinforcement amongst each segment. This would hopefully keep Gabby motivated to maintain some forward momentum.

Naturally, songs are sectioned into organic sections, such as verses, bridges, and choruses. I began to brainstorm a journey with a frog avatar, called Fable who would accompany Gabby on these songs. Fable would have an overall "mission" to complete, which would be broken down into smaller tasks. Each smaller task would be related to a song segment. By completing each segment successfully, Gabby would also simultaneously be helping Fable cross off another task from his to-do list, while eventually working towards the end of the mission!

In order to visualize these steps better, I put pencil to paper and drew some very doodly lofi sketches that would serve as a kind of storyboard in establishing the Fable narrative.

*The app would be called Fable, because Fable quite literally means "a teaching story!" :•)
Branding + Style Guide
Building out Fable's designs with vibrancy and enthusiasm.
‍
I wanted Fable to have a youthful and storybook-like atmosphere, with solid colour blocks and outlines. I also chose Menlo as the font family for the main heading, because I quite liked how it mimicked the look of retro game fonts or a typewriter font, which further amplified the whimsical nature of the app.
The Prototype! Let's Hop To It.
With these style decisions in mind, it was time to start building out the hi fi prototype.
The main actionable items were centered around the following stages:
‍
• Onboarding: Meet Fable!
• Dashboard: View Your Stats + Song Library
• Get Mission from Fable
• Start + Complete a Practice Session
• Viewing Achievement on Level Map after Successful Mission
see final prototype ⤴︎
Onboarding: Meeting Fable
Assuming Gabriela (Gabby) is a first-time user, this is where she will be meeting our frog avatar, Fable. During onboarding, we’ll introduce the app’s concept, indicating how Fable’s missions coincide with the songs that Gabby decides to practice. This is also where she will select her instrument to practice, which can be changed later.
Selecting Songs
If Gabby is a returning user, she’ll see some motivation stats on her dashboard, such as streaks, hours practiced, and number of completed missions. She’ll also see songs she can resume. Gabby can keep track of how far along she got on Fable’s missions and pick up on those missions again. Songs are categorized into genre tiles for greater organization. 
‍
For our particular case, Gabby will choose to practice the song “Tonight You Belong To Me.”
Begin Mission 1: Deliver Strawberries to Harper The Hedgehog!
This grand mission begins as soon as Gabby begins to practice the first verse of "Tonight You Belong To Me." This first verse is only Task #1 on Fable's to-do list. Gabby first has to help Fable find his fruit basket before setting out for the strawberry field. The chords will advance automatically if Gabby plays them correctly.
Success: End of Mission!
Provided that Gabby has successfully trucked through all four tasks, she will have completed the entire mission and one whole song! Now, she can navigate back to the home screen and view the level map, where she can unlock more levels by helping Fable on more missions in the future.
Try out the full prototype below.
Usability Testing
All three of my participants were able to complete the tasks with 100% success rate.
I conducted two remote usability tests (via Maze) and one in-person test of version one of the Fable prototype. All three of my participants were able to complete the tests successfully! These were the main points I gathered from their feedback.
‍
Success points:
• Straightforward and clear onboarding process. They were able to grasp the app’s concept quickly.
• All three participants found Fable’s initial mission very easy to understand.
• Cute, pleasing visuals that were consistent throughout the screens.
‍
Food for Thoughts + Areas of Improvement:
• Two out of three participants were not sure where to tap at the initial Missions Screen to proceed to the Playing Screen.
• Songs would be more accessible if they were sorted by some genre or category. The meaning behind the hand icon and play button is unclear in the playing screen.
• Purpose or the meaning behind the level map is unclear. More personalization is desired on the dashboard for returning users. 
• One participant remarked how the app would appeal more to a younger audience.
With these helpful points in mind, I made improvements for version two of the prototype.
Closing Thoughts
The greatest lesson I learned during this endeavour is that it’s totally okay to shift directions, particularly after the research reveals sharper insight into user wants. Before I began the ideation exercises, I had indirectly proposed a solution for more methodical music practices, such as a minimalist goal tracker or a colour-coded journaling app.

While valid and functional designs exist around these concepts, they weren’t necessary ideas that my participants talked about with enthusiasm. Hence, the pivot into a gamified and more enjoyable approach!
‍
Though I feel satisfied with the gamified approach within the scope of this project, I feel as if there are more exciting areas of improvement. For example, if I were working with a team of designers, it would be wonderful to brainstorm greater gamified designs for fostering motivation, encouragement, and consistent dopamine hits with live feedback. Micro-interactions, refined animations, and more complex character development could also make a world’s difference in turning this personal project of mine into a fully-fledged shippable product. Speaking of which, though it isn’t entirely a UX/UI discipline, it would also be interesting to tangentially delve into market research to investigate what kind of audience or demographic profile Fable would appeal to!
‍
Thank you for sticking with me this far. You’re toad-ally awesome! 🐸

↑