Count off - A UI/UX Case Study
Count Off is a high fidelity prototype of an app that helps conductors of bands and orchestras practice and test whether they are counting off and starting pieces at the correct tempos.
Sole Designer/Researcher: Anika Hagen
Tools: Figma
Timeline: August - December 2022
Problem: Across many different professional and beginner musicians a common problem is being able to count songs off at the correct tempos. Conductors need a better way to test whether they are at the correct tempo because there are currently no easy, solo ways to do so
Research Plan Summary:
Background: This research study is to show whether there is a need for an app that would test and calculate the BPM/tempo a user counted off a song.
Goals: Learn the ways customers currently test whether they are counting off pieces at the correct tempo, learn about the competitors in the market and what is currently missing, discover the real needs of directors and conductors when it comes to learning tempos.
Methodology: My research will be conducted through six 1:1 interviews with different participants. Each interview will last a maximum of 30 minutes. Interviews will be conducted either on zoom or in person depending on the interviewee’s location and availability.
Participant Screening:
- Age range: 16-45
- A music director or drum major
- Must own a smartphone and use it regularly
- Have to be in a position where they regularly count off and establish tempos
for ensambles
- Have experience using some sort of metronome app
Sample Interview Questions:
1. Recall the last experience you had counting off a piece of music at the correct tempo.
2. Do you prefer a metronome in your classroom/practice area or do you
use a phone app when you need a certain tempo?
use a phone app when you need a certain tempo?
3. Have you ever used the tap feature on a metronome app? If you have,
how was your experience with this feature? If not, why?
how was your experience with this feature? If not, why?
4. Do you find it harder to start music off at the correct tempo of end the song at the same tempo as when you started the piece?
5. How of you currently test whether you end a song at a similar tempo as when you started?
User Interviews:
"[Counting off music makes me feel] really nervous beforehand and scared that the tempo would be wrong"
"[The tap feature] is nice to test whether you got tempos correct when you can't use the volume from the app."
"[I get] very nervous about counting songs off at the correct bpm, often I count songs off too fast"
"Every time I practice counting off a piece I use a metronome up until the actual performance. I even will be on the field with a metronome because I get so worried about counting the right tempos."
Below is just a snippet of the various notes I took during user interviews.
Affinity Mapping:
Main Takeaways from Interviews:
After conducting interviews, it became obvious that counting off tunes at the correct tempo was a pain point and a causer of stress for many conductors and drum majors. Many of them expressed that they currently use a metronome app to test whether they were counting off at the correct tempo, but doing so efficiently usually involved having someone else around.
How Might We...
How might we find a better way for people to practice counting off music at the correct tempo?
How might we ease some of the stress behind having to count off tunes at the correct tempo?
How might we integrate all of the users favorite features from other apps into ours?
Design
Problem Statement:
Conductors need a better way to test whether they count off at the correct tempo because there are currently no easy solo ways to do so.
User Flow Diagram:
Low Fidelity Wireframes:
Mid Fidelity Wireframes:
First Round High Fidelity Wireframes
After creating just a few screens of this prototype, I decided I didn't like the dark theme and blocky nature of what I created, so I returned to the drawing board.
I first started by recreating the above screens but using a lighter theme and background.
This already looked much better in my opinion, so I continued to create the entire high fidelity prototype using this new idea. You can see the full layout below.
Evaluation and Results
One of the main pieces of feedback I received on the first draft of my high fidelity prototype was to add more context to a few of the pages. There were also a lot of comments about the size and look of different icons. Using this feedback, I was able to create a much better high fidelity wireframe that was more up to professional standards.
Conclusion:
One of the largest take-aways I had from creating this prototype was just how much work and details go into UX design. It is amazing that items that are off by even a pixel can look so incorrect and how much a difference it can make. I also learned that having thorough low and mid fidelity wireframes is critical to making the creation of the high fidelity wireframes easy and painless. Having everything planned out by the mid fidelity wireframes would have made my life much easier.
Future Plans:
In the future, I plan to further develop this prototype. I would like to make the prototype more interactive and complete more user testing to create a better prototype. For this project, these additions were a little too ambitious, but I do plan to come back to this prototype and add those features in the future.
