Findmybeat.png

Find My Beat

Find My Beat

Category:
UX/UI

Role:
Student in Interaction Design 2: Mobile class

Duration of Project:
1.5 Months

For our final project in our mobile UI/UX class, we were tasked to propose and design a mobile experience that solves a problem.

I was in the process of obtaining my cycling instructor certification and realized that there weren't many apps pertaining to the group fitness industry. Group fitness is a popular form of exercise where you work out with a group of people, all led by an instructor. As I found in my training when working with the other students, it can be hard for trainees to know if they are correctly counting song beats as well as finding songs that match the intensity of a workout appropriately. Find My Beat alleviates the uncertainty that comes with counting beats of songs and helps the user form playlists based on songs with similar counts.

Skip to see the Final Product


 

From this design process, I designed the app to have three key features that I thought would best solve the problem that came with counting beats:

1. Find My Beat reads a song’s BPM and RPM and pulls up songs with similar beat counts from your Spotify playlists, library, or the entire Spotify database. 
2. This app allows you to build playlists from the suggested songs and export your playlists to Spotify, as well as individual songs.
3. You can input a BPM or RPM value to find songs within that general range.

Here's how I got there:
 

 

Design Process

Screen Shot 2018-08-27 at 11.25.51 PM.png

Initial Brainstorming

The biggest challenge that came with training for my certification was counting the beats of songs. As a result, I designed the functionality of my app to revolve around the BPM and RPM of songs. 

I mapped out some use case scenarios to get a better understanding of the types of users who would benefit from my solution:

1. As an instructor in training I want to be able to find the accurate BPM/RPM, learn how to count beats, and find similar music in order to create my playlists.

2. As a instructor I want to be able to find songs with certain BPMs easily without having to search through multiple sources.

3. As a group fitness member I want to be able to look up any songs or playlists from the instructor and work out myself.

I ultimately decided that the user I was designing for was an instructor in training. 

 
Screen Shot 2018-08-27 at 11.26.45 PM.png

Sketchin'

I drew out a rough flow of the main functionality to visualize my thoughts:

Here, the app listens to the audio being played and retrieves both the BPM and RPM of the song. From there, pressing the "song" button under the stats will bring the user to a list full of songs with similar beats. The user will be able to add the song to a playlist. This playlist can be exported then duplicated in Spotify.

 

Low Fidelity Wireframes

I wanted to focus on the main reason why I was designing this solution. This is a resource that can enhance their training experience. It is more about the BPM/RPM than the music. Therefore, I stayed away from making music control functionalities that were similar to music streaming apps such as Spotify. The only music control functionalities would be play and pause. If they wanted to shuffle or do more complicated tasks, Spotify would be the answer. This is to help them collect what they need.

 

Main Flow:

  • For my main flow, the user would play a song and press the “tap,” button. From the song, the app inputs back the BPM and RPM of the song. I used a toggle, so the user could switch back and forth to see the two different beats without it taking up too much space on the screen.

  • Recommended songs with similar beats will come down as a down drop list. The songs will be sorted by closest in beat at the top of the list.

  • Tapping the “+” next to each song will allow the user to add it to a playlist that they have created in the app.

 

Finding the beat, selecting a suggested song, and adding it to playlist.

Playlist Detail:

  • Going into the playlist tab, the user can tap into a playlist (in this case, “Playlist 1”).

  • User can export playlist to their Spotify playlists with the button at the top.

  • (User can also tap on the “more” icon next to a song and either delete it or move it to another playlist)

  • Exporting the playlist will give a progress bar, and then Spotify will automatically open after export.

 

Playlist navigation- Exporting to Spotify.

Additional Feature: Finding a song by inputing beat

Many times in training, I would want to find a song with a certain beat range so I could use the song for different stages of the workout. For example, typically a warm-up song should have a lower BPM than that of a high-intensity training song.
I created a feature where the user can manually type in a beat, and a list of songs within a ± 20 range of that beat will be generated.

  • User types in beat

  • Song list with beats in a ± 20 range will appear

  • User can add song to playlist

 

Inputing beat to find songs


Paper Testing! And Feedback

Testing is the best, because it helps me become aware of other directions and possibilities for my projects! I cut out my screens, and let the user determine what step would come next.

I did a round of tests with my classmates, and then did a test with some of my non-design friends. I wanted to get as many different perspectives as possible.

Here are some of the feedback and questions I thought was most significant and helped me improve my project’s experience:

  • “Can you export individual songs to Spotify? Not just playlists”

  • “What if I just want it to search songs in my Spotify playlists, not the whole Spotify database?”

  • “The words, “My Counter,” in the bottom tab feels off”

  • “How do you “restart” the tap button again?”

  • “Show the BPM of suggested songs”

  • “What can you do to indicate that the app is listening?”

 A result of me begging my non-design roommate to test my app :)

A result of me begging my non-design roommate to test my app :)

 

Mid-Fidelity Wireframes- Implementing Feedback

I analyzed my experience again, and with the help of feedback, I added in new capabilities.

Main Flow:

  • Decided to show both BPM and RPM at the same time for easy read. No need for toggle.

  • Knew I wanted animated sound waves to indicate that the app was listening to the audio.

  • Each suggested song would have the BPM under, so the user can know the beat of the music accurately

Finding the beat, selecting a suggested song, and adding it to playlist.

Playlist Detail:

  • Ability to export individual songs to Spotify. Song will be added to user’s Spotify library.

Playlist navigation- Exporting to Spotify.

Additional Feature: Finding a song by inputing beat

  • Wanted to copy the same layout as the home page by having both the BPM and RPM laid out without a toggle.

  • BPM is still listed under every song

Inputing beat to find songs

 

Challenges

 Some initial designs

Some initial designs

A huge challenge for me in this particular project was the visual/UI design. This was the first time I had the freedom to create an app with it’s own “look".
I wanted the main interface color to be blue, because the color represents health. I also found myself struggling to design the tap button to indicate that it was listening to the song.

The goal was the interface to be friendly and clean. There are many numbers and I knew I needed to figure out a way to make the BPM/RPMs distinctive and not get lost in song names. I also knew I wanted it to be visual, because it would be less intimidating-looking, especially because counting beats is rather technical.

Above all, I wanted the visual design to be straightforward.

 

Final Product

How could I make this app look “real”?

  • I went for a soft blue gradient to invite the user.

  • Buttons and icon were made with very rounded rectangles to convey friendliness and fun.

  • The font I chose was Gotham, because of the playful, round edges.

  • Most icons have the same blue gradient as the background so it matches the overall brand.

    See my InVision Prototype for the full experience!

 
 
splash screen.png
 
 

Main Flow:

I added a capability that actually returns the song being played- similar to the Shazam App. I figured that if the user did not know the name of song, they would find it helpful as well.

  • I also used differing opacities of sound waves to convey that the app was listening to the user.

  • Enlarged the beat font so it’s easier for the user to read and process.

  • The button had a drop shadow to make it more “alive,” and the icon is there to indicate “tap,” so I could use less words.

  • Songs are separated out in their own boxes with an album cover. This gives more visual appeal, and also separates the songs so all the names, artist names, and beats do not get all mixed in and hard to read.

  • Added in help text underneath “Similar Songs” button to let the user know where the songs are coming from.

1. Log in • 2. Listens to song being played • 3. Finds played song and pulls up songs with similar beats • 4. “+” option next to song brings user to two options: Exporting the individual song, or adding it to a playlist.

Playlist Detail:

  • Improved the visual design such as adding in an album cover.

  • Listed out the average BPM of all songs in playlist to give user an idea of the general beat of all songs.

  • Once exported, user has an option to tap the Spotify link to open Spotify instead of having it automatically open. This is an option in case the user didn’t want to be redirected automatically.

Search by Beat:

  • Created a toggle for this one because I thought it would be more straightforward for the user to choose. This way there are no empty fields (like in the mid-fidelity) where it might be confusing.

Creating New Playlist:

  • Button is large at the top to promote creation of more playlists.

Navigation Tabs:

  • “Understanding beats” tab is where the user can go to learn about the differences between BPM and RPM and additional information that can help them understand technical aspects

  • “Settings” allows the user to choose where Find My Beat searches songs in. Can be from playlists, their library, or the whole Spotify database. This can be used if the user has a preference on finding songs they already know or don’t know.

Error States and Empty States: