WENHSIN | UX + Interaction Design
Pitch Piano
Design Process for creating new feature - Practice Mode
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.
Discover the 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.
User research
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
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 participants who are highly interested in learning piano, 3 participants who never-played before, and 2 participants who are beginner level.
Participants share similar goals: play a song for fun and get some basic piano skills. And here’s a summary of the testing:
#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 tried to understand their teaching method and the challenge they are facing. The goal was to understand both students' and teachers’ journeys of learning and teaching a song. With the background knowledge, I have a better understanding of the problem I am solving.
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.
Users 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.
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.
Solution
We decided to move forward with the idea of piano lessons. We wanted 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 exercising.
Why?
1. Lessons and modules are widely used by other competitors.
2. We want to create a framework system for future content expansion.
User Story
Hypothesis and Success metric
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.
Design
Research and Inspiration
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 focusing on the p1 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.
Mid-fidelity Design
Design principles:
1. Focus on the song playing experience.
2. Visual: Keep the progress bar design lowkey.
3. Accessibility: users are sitting in front of the piano.
4. Simple and intuitive.
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.
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.
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.
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.
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 constrain of the practice progress, but in a way that still encourages them to finish the current lesson before moving forward.
To make the practice flow fluently, I redesign the UX flow. And the logic graphs also help me communicate with engineering team.
Practice Flow
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
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.
#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.
#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)
#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.
