Fitness Music App Design​

Designing a fitness music app for passive music

listeners to eliminate distraction on exercising.


UIUX Design


15 Weeks


Adobe Illustrator, Adobe XD, Adobe After Effect, Cinema 4D


UX Research, UI Design, Visual Design


Fitness Music App




Interviews are conducted to gain more insight into the music app and understand user goals, needs, frustrations, and listening habits to attain an accurate and thorough sense of what users do. I also learned some empathy when asking questions and be humble when doing the interview.

Behavioral Archetype

My reasoning for using behavioral archetypes over personas is that the music fitness app is a customer-centric app, and it represents a typical example of customer behavior or motivation better. What they do, how they do it, and why they do it are the things that I focus on.

Cognitive Walkthrough

I review the usability of Spotify using a cognitive walkthrough. In order to determine whether or not a user is able to carry out tasks easily while exercising. Finding out what the users’ pain points are with their current music app.


How Might We’s

I use how might we because it suggests that a solution is possible and because they offer me the chance to answer them in various ways. Furthermore, it helps me to open up brainstorm sessions and other ideation sessions. HMW questions ignite my imagination and align well with core insights and user needs.



Being overwhelmed by genre options

Song recommendation is repetitive

Not getting the right song recommendation from the playlist


Easily to get new music

No distraction when exercising

Listen to music that meets the user’s music taste


Tempo is a fitness music app that helps its users focus on their exercising by providing a seamless music experience.

key function

playlists based on your listening preferences

synchronize the music with your steps or heart rate

tracking your exercise with a clear visibility dashboard

support gestures to control

Journey Map

To improve the user experience, I use a journey map. By outlining the current processes, I can visualize what users experience at the moment and identify common pain points that need to be addressed. In addition, it allows me to gain a deeper understanding of their needs at every touchpoint of the fitness music app.

User Flow

The user flow enables me to determine how fitness music app users can best reach their objectives and complete tasks. It also let me focus is on the experience and needs of the user but not the design details on the screens.


I use a wireframe to understand how each screen lends itself towards conversion as part of a complete UX.

Inspiration Board​

To make my music fitness app stand out from other music fitness apps, I used 3D visuals as the centerpiece of the composition to catch the user’s eye and convey a sense of “wow, this is awesome!” right from the very first seconds of interaction.

Design System


Your perfect Workout Partner


On Boarding

Differ by countries

Music genres are differed by country, so people don’t get lost in too many options.

Search function

The search function allows users to find the music genre in which they’re interested quickly.

Know benefits first

Lets users interact with the app and learn about its benefits before asking users to grant access for permission and sign up.

Play Music

One-Click Play 

Play the music playlist instantly with just one click.

Like feature

double tap on the album cover or tap the “heart” button to like the song workout.

Dislike feature

swipe up the album cover or tap the “cross” button to dislike the song.

Change song

swipe the album cover left to skip the song or swipe the album cover right to replay the previous song.

Play Mode

Adjustable music 

 adjusts music to sync with your steps or heart rate


Workout Summary

Keeping track of your workout performance in a simple


Workout Detail

tap in to show extra information

Design for Watch

Watch User Story

I describe the watch’s user story to determine requirements and add the human factor to my fitness music app design.

Watch User Flow

Watch Final Design

Play Music

Switch Screen

swipe with two finger to switch to explore screen or workout tracking screen.

Workout Summary ​

What's Next?

I want to consult a developer to see if the app could be implemented into a real app or not. To see the major feature of the fitness music app that can be made true in real life.

Interested in working with me ?