From MVP to Broadway!
Pocket Pitch is an app for singers that I started in 2015. This page gives an overview of the last major update I made in 2022. At the time, I felt like there were some aspects of the design that separated it from looking and feeling like a professional app made by a tech company.
Expanded case study available for interviews.
The previous version.
The app used to have a rainbow color palette and a piano feature that didn’t look like a piano.
Users want a simple, reliable, and familiar tool.
I was able to pool my user research from three sources: user interviews with 10 professional singers, email feedback, and App Store reviews.
Findings:
Users need to identify or play a musical pitch quickly.
Some (mostly non-tech savvy) users are confused easily.
Users prefer features that are familiar to them.
Keeping flows and functionality simple.
The main UX changes were adding a tuner feature and also creating a clear separation between the main features and all the extra settings. I wanted to establish this separation because I felt it could help my portion of users who may be confused by the extra settings and just want to focus on the basic features.
Key notes about the wireframes:
I decided to make the piano horizontal so that it would be oriented in a way more familiar to my users.
I intentionally left the Tuner wireframe simple because I wanted to explore it more once I was working on the visual design.
All the main feature screens (Pitch Pipe, Piano, Tuner) start to establish that separation of main features and extra settings.
A putting together the new look.
My priorities for the UI design were to make everything very easy to scan and understand, while looking bold and consistent. I kept a simple color palatte with a very legible font.
Key notes about the UI designs:
I made the piano keys as realistic as possible while matching the aesthetic styling of the rest of the app.
I created multiple states for the new tuner feature: on pitch, flat, and sharp. I also ended up introducing a new green color for being on pitch. This may be something I change in the future since it is a bit of an outlier from the rest of the color palette, but for now it’s a safe choice for users to easily understand.
The overall visual hierarchy prioritizes the main features and keeps all other settings secondary.
Pocket Pitch made it to Broadway!
At the end of 2023 when I was contacted by the Broadway show Harmony to do a partnership for the remainder of their production’s run through early 2024! I believe this happened because Pocket Pitch looked like a professional product, which was my original goal for this update.
Reflection.
There were a couple of things I learned from this update, but one to call out is about color. In the past, Pocket Pitch used a rainbow color palatte, and then I narrowed it down to the pinkish/red gradient you see. Once I added the tuner feature, I realized that using my own brand color to indicate success may look similar to what many apps use to indicate an error (red). Also, there may be future features where I need a distinct error color (likely red for familiarity) and it will be problematic if it’s too similar to my brand color.
So, I think it will be in my best interest to continue adjusting my brand color, and try to slowly bring it to more of a purple color that will visually separate from the future use of success and error colors (green and red).
(This must be one reason why so many tech companies use a blue brand color!)