Pitch Piano

Design Process for creating new feature - Practice Mode

title.png

Overview

Role:

Product Designer (Worked with another designer)

Timeline:

8 weeks

Tools:

Sketch, Principle.

Methods: 

Brainstorming, Personas, User Story Mapping, Wireframing, Prototyping, Usability Testing, Mobile UI Design

| Piano beginners need more help practicing the song.

I designed the Practice Mode, a progression learning function for Pitch Piano to help our users succeed in their piano learning. Practice Mode recreates the traditional learning process to guide our users to learn a song with our new UI. Users learn the piano by practicing short verses with individual hands first, and then gradually progress to playing in both hands. 45% of the users use this function for initial practicing. The new Practice Mode help users learn to play a song without frustration and easily complete a full learning circle.

Pro​cess

process.png
 

Discover Problem

Pitch Piano is served as a learning tool to help users learn to play piano songs without learning the sheet music. We offered two ways for users to play the song, Auto-Playing Mode and Manual Mode. Our users would like to practice the piano using the app, but it seems like the current modes did not fulfill their needs for repetitive practicing.

Observation & Interviews

Survey

 

We put up the survey in the beta version app and collected customer feedback on the main features and see if the app fulfill their needs, and what can be improved.

auto mode.png
Auto-Playing Mode

Pros: 

Users can practice with both hands.

There’s playback music to follow.

 

Cons: 

Users have to practice the song in playback music speed.

Manual mode.png
Manual Mode

Pros: 

Users can play at their pace.

 

Cons: 

Users can only play with one hand.

Usability testing

I conducted an in-house usability test to observe first-time users' behavior and their interactions with the current app. We found 5 testers who are highly interested in learning piano, 3 testers never-played before and 2 testers are beginner level. 

Testers share similar goals: play a song for fun and get some basic piano skills. And here’s a summary of an observation that’s related to the problem:

#1 Users prefer to learn a song knowing there’s a break and maybe start over again. 

#2 Initial hand position is important to know before users start playing. 

#3 Users tend to manually scroll to view the song while practicing.

#4 Observations between current modes:

In-person interview

 

I interviewed people who are interested in and actively learning the piano to better understand their needs when trying to learn. Meanwhile, I am curious about the piano teacher’s teaching process, so I interviewed them and trying to understand their teaching method and the challenge they are facing. The goal was to understand both students' and teacher’s journeys of learning and teaching a song. With the background knowledge, I have a better understanding of the problem I am solving.

Group 7.png
Group 6.png

Takeaways

#1
It takes efforts to recognize and fix the errors while playing the piano, and customers are most likely to give up when they could not figure it out.
#2
When it comes to self-learning and practice after class, the feeling of achievement is important to customers. 
#3
Repetitive practice is the key to success

Empathize

User Problems

  • Some song length is too long for one practice timeframe. 

  • Users have limited time for each practice.

  • Users forget their previous practice progress. 

  • Users need some upfront information, hand position, and finger numbers, before start practicing.

 

I want to solve these problems for users because once we eliminate these barriers, users will find the app is easy to use, and practice is systemized. Once the practice is systemized, it will also benefit us to expand content in the future.

User Problem Statement

I am a beginner to the piano, learning piano on my own with limited time and resources.

And I’m trying to practice one song correctly.

But I found it hard to keep up my practice progress
because I got overwhelmed by the length and the complication of the song.
Which makes me feel frustrated and stressed when I start my new practice. 

Users Personas

I developed two distinct personas to synthesize the previous research and to highlight my target users' goals, needs, and pain points.

persona 1.png
persona 2.png
 

Goal

Help users practice one song correctly and keep up their practice progress without getting overwhelmed by the song's length and complication.

Ideation

Explore Solutions

To improve the app, we did a brainstorming session using “Jobs To Be Done” methods. By using this method, we can pinpoint some desired outcomes that are not yet fulfilled. 

We think five major needs are important to our users, Emotional, Encouragement, Practicing, Learning, Hand/Finger Placement. To start, we focus on generating ideas for Practicing first. 

ideas.png
 

Solution

We decided to move forward with the idea of piano lessons. Essentially we want to divide the song into sessions and verses with the default settings in easy. Users can control their practice progress and schedule a practice reminder ahead. The app will also provide tips and motivate users for continuing practice. 

 

Why?
1. Lessons and modules are widely used in other competitors. 

2. We want to create a framework system for future content expansion.

User Story

user story.png

Hypothesis and Success metric

Suppose we launch the new progression learning practice mode. We hope that our users will actively use it when they open a new song to learn. We will measure by the practice mode active rate and practice success rate. This function's success will be function active rate of 30%, and the practice success rate for a song is above 20%. 

Design

Research and Inspiration

To start the design, I looked into some competitors and research their design flows and UI for practicing. 

research&inspiration.png
 
After the initial research and meeting with the producer and engineering team, we decided that the development process will have to be separated into 3 phases. For the following process, I am only going to demonstrate the Phase 1 process. 
 
Phase 1 Goal:

Help users practice the songs by breaking down the song into sections. No finger or hand placement instruction at this version. Basic setting: Start with the right hand only and the speed will set to 50% as default. (Users can adjust speed.) 

Low-fidelity Mockups

Role-Playing Method

Before I dive into the user flow design, I want to make sure the instruction and tips work for the beginners, so I use the Role-Playing Method to test out the instructions. And I made some modifications according to the test result.

lofi.png

Mid-fidelity Design

Some design keys I set up to help me focus when designing.

 

1. Experience should focus on the song part.

2. Keep Progress bar design lowkey.

3. Keep in mind that users are sitting in front of the piano.

4. Keep it simple.

mid-fi.png
Exploring UI Style & Layout

For the practice mode, we decided to move forward with a dark theme to distinguish from the regular playing mode. When it comes to the button style, I make sure I inherited the design system button style throughout the app. For the progress bar, I explored several looks and play around with the layouts, my goal by the end of the day is to make sure the content is delivered clearly and the UI looks clean. 

Progress Bar​

       Challenges

  • The progress bar needs to have a new layout while integrates existed functions, ex: speed, R&L hands…etc.

  • Show users their current progress clearly. 

  • Minimized the space that is used on the header.

progress bar.png
Popup and Tips

       Challenges

  • Popups' timing is important and the content should be short. 

  • Tips have to be noticeable, but not interfering with users’ practicing experience. 

popups.png

Prototype

Prototype:

Practice flow. 

Prototype:

Practice section ending. 

Testing and Iterations

To make sure the design is working, I built a clickable prototype using Principle to test it out. The goal of the test including usability testing, and concept validation. After the test, we got constructive feedback and suggestions on the UI designs, interaction, and the concept.  

testing.png
UI design:
  • Users mentioned the hints work for them, also mentioned the progress bar didn’t draw their attention, so it wasn’t clear for them to know they are only practicing a section now. 

  • Improvement: Instead of making the progress bar obvious to the users, I decided to make small changes to the progress bar UI to make it pop a little more. Since the main focus for users is the song part, the progress bar is supported so I want to add some design details on the song part to make the experience better. I came up with the idea of adding a song section tag at the side of the song to make a clear indication. 

ui improvement.png

Song section: 

Work the same as the current app, tap on the screen to start. 

  • Grey label(transparent 60%): label the start of each section. (Scroll with the whole song)

  • Blue+purple label: (fix on the tap position on the screen) change label text when scroll passed the grey label.

Interaction:
  • Multiple testers showed that they want to go back and forth between lessons to practice different hands. 

  • Improvement: Before the test, I wasn’t sure about allowing users to proceed to the next lesson without finishing the current one. And the test result shows that users like to have the options and freedom to set their own practice pace. As a result, I took away the restrain of the practice progress, but in a way that still encourages them to finish the current lesson before moving forward.  

Interaction:
  • Multiple testers showed that they want to go back and forth between lessons to practice different hands. 

  • Improvement: Before the test, I wasn’t sure about allowing users to proceed to the next lesson without finishing the current one. And the test result shows that users like to have the options and freedom to set their own practice pace. As a result, I took away the restrain of the practice progress, but in a way that still encourages them to finish the current lesson before moving forward.  

interaction.png
To make the practice flow fluently, I redesign the UX flow. And the logic graphs also help me communicate with engineering team. 
Practice Flow
practice flow.png
Concept:
​​
  • Through the test, I found out some testers have difficulty distinguish the normal mode and the practice mode. They are not sure the difference between and the timing to use each mode.

  • Improvement: To solve the confusion between two modes, I know we need to advertise them in a different way. We know the scope problem is not the main focus for this phase so we decided to tackle this problem in the design phase 2. The good thing is once we explain the difference between two modes, users can understand and think both modes can serve their needs. 

Delivery

Group 31.png

Phase 1 delivery  (build out the flow only)

I left out the instruction and tips design for phase 1 because I want to make sure the flow is delivered correctly, adding popups will distract us from the fundamental experience. 

#1 Start the practice

Tap the screen to start the playback as normal mode, when the song reaches to the end of the section, the Ending bar will show up. 

Group 32.png

#2 Progress bar (Section selection and Speed): 

After finish practicing a section, users will earn a checkmark.

Tap to expand sections: More than 5 sections, scroll to view more.

progress section.png
Group 33.png

#3 Practice from the beginning of the song: 

After the Intro section, when users practice toward the end with both hands, the “start from the beginning of the song” button will appear. Scroll back up to the intro of the song. (both hands)

Group 12.png

#4 Finished the Lesson: 

At the end of the entire practice, users get confetti celebrating their achievement!

Reflect

Product Impact

Even though this is the phase1 of the product development, and we are still polishing the design, The new function did gain some recognition from the users. According to the bata testing result, 45% of the users use this function for initial practicing. As a designer, I am glad that the new design is helping users achieve their practice goals. 

 

Future Design planning

Knowing the fundamental of the function is working correctly, we are planning to add more polished designs onto the product. Next step, we are planning to: 

  • Elevate emotional support: Adding popup for tips, instructions, and encouragement. 

  • Hand placement: Integrating hand placement tips and finger number functions.

  • Practice Mode Integration: Explanation for modes, users flow. 

  • Learning: Adding more content for piano learning: chord introduction, fingertips…etc.

Thank you for reading