WENHSIN | UX + Interaction Design
Role:
Product Designer (Worked with another designer)
Timeline:
2018 to 2019 (1yr)
Tools:
Sketch, Principle, Illustrator
Tasks:
1. Features improvement
2. Directed UX strategy
3. Prepared app for launch
4. Conducted users testing
Overview
I worked with the Piano team from 2018 to 2019. Team members including PM, engineers, and two designers. My primary responsibilities were preparing the app for launch, which includes refining onboarding flow, UX research, identify product direction, designed new functions, and creating marketing material. The app is launched in December 2019. Currently only available on iOS.
About
| Pitch Piano is a mobile app that helps users learn to play the piano without knowing
sheet music.
Pitch Piano is a mobile app for piano learning. Instead of learning to play the piano from the traditional sheet music, we believe playing the piano should simple and easy.
Our goal is to create a new way for anyone to play the piano. We created a new visual format for music reading, which uses tabs and keyboard shapes. Follow the dropping tabs to play a song, you can play your favorite song in a minute.
What problem we are trying to solve?
#1 We are trying to reduce the learning gap for the beginners to play a song.
Why?
When learning the piano in a traditional way, it requires students to invest tons of time in learning sheet music or music theory before actually playing a simple song. And this time-consuming process makes most of the piano learner feels frustrated and gave up on playing piano, which is a shame.
We believe playing music nowadays should be something that’s simple and everyone can enjoy, and that is why we wanted to help eliminate the learning gap for piano beginner learners.
#2 Provide pain-free learning tools for the piano learner who has limited time and money.
Why?
Learning piano requires tons of time and of course, money. Which are two things that young people nowadays are lacking and we want to provide a tool that is affordable for customers.
Quick view
App Design
1
2
3
Song Page
#1 Functions Nav:
Finger numbers, Right/Left-hand notes, Playback Speed, Song Difficulty
Users can find the functions to support their learning here.
Interaction
Finger number and Hand placement
Options Menu:
Lyrics, Chords, Countdown, Transpose, Share, Like
#2 Song Notes:
Middle C position, Song section, Lyrics
Users view the song notes and play it on the piano.
#3 Mode selection
Melody/ Accompany/Practice Mode
Users choose the mode they prefer to play.
Interaction
Auto Playback: Users tap the screen and piano playback.
Auto Playback: Users tap the screen and piano playback.
Manual: Users scroll the page up to view the notes.
Browse
Song Browse:
Trending Songs, Playlist, Explore, Tag filters.
We offer Freemium and Paid content. Customers can try out the freemium content and decides if they want to subscribe to play more songs.
Users can browse hundreds of songs here, there's playlist for recommended songs and filters to view different genre.
Playlist
Freemium
Search
Search Page:
Search by name, Trending Searches
Users can search songs they want to play, if the song is not in the app, they can request the song.
Profile
Profile Page:
Practice Reminders, My Songs, Recently Played. Settings
Users can manage their practice progress and songs they liked.
Design within the system
Challenges
| New UI/visual design challenge
Pitch Piano uses a new format of UI to showcase the notes and it takes time for users to get use to it. Normally, people read sheetmusic in horizontal, but with Pitch Piano we are aiming to provide a whole different way to view the notes, we want somethings that’s visually intuitive and straightforward. We use keboard keys illustration as the base, and music notes in a button shape to indicate that you should press the keyboard like a button at the right timing. To make the interaction more straight foward by just swiping up or down to view the upcomming notes, our UI is read in vertical way.
For some difficult songs, we sometimes struggled to squiz in all the keyboards and notes. To solve this problem, we came up with design rules with our music export to help simplified the song while maintaining the UI system.
Before adjustment
After
| Design has to work on mobile screen size and users use the app while seating in front of the piano keyboard.
The project leads decided to use iOS devices as the first platform for the following reasons. First, using a mobile device aligned with the project initial goal: Users can play the piano at any time at any location. Plus, mobile devices are easy to carry around and it shares the majority market. Even though I know the mobile screen size will be a big challenge for viewing the UI from distance, because it has to display in verticle, we still manage to find a point that can fit the contents while users can view it comfortably.
| Legal and Music License stakeholders postponed the project development process.
We have struggled with the music license issues for the past two years, and while the legal team is dealing with the contract issues, the development process had come to a point that is ready to launch for beta testing.
But since there are songs that require licenses, we are not allowed to publish full content to the public.
So we realize we need to add more songs that do not require licenses to fill up the content, which takes time as well. Not knowing the content amount is also a big challenge for us, without the information, we can't do marketing material in advance. But thankfully, everything sorted out and we launched the app for beta users.
Retrospective
| It's OK to strip things down.
Sometimes, I had an ideal design that I like to achieve; however, due to limited resources, project timeline, and technical barrier, I need to make decisions for cutting off designs. In the beginning, I feel reluctant to do so, but then I realized this is a good chance to examine and tailer the current design. I can revisit and think clearly through every design decision.
Is this design necessary? How can I make it even simpler?
Through these practices, I learned to make a simple design, not overthinking, essential enough to present the MVP.
By making design simple, it helps me measure success easier. Without the distraction, I can pinpoint the problem accurately and focus on refining the MVP.
Case studies
New feature development - Practice Mode
I designed the Practice Mode, a progression learning function for Pitch Piano to help our users succeed in their piano learning. In this case study, you can view my design process for creating new feature designs.