Add a feature. Personalizing music for a more engaging and dynamic experience for users when exercising.
Nike NTC x Apple Music
Role: UX/UI Designer
Timeline: 80 hrs
Type: Mobile App Feature Integration
Tools: Figma, Maze, Miro, Figjam
Deliverables: Competitive Analysis, User Interviews, Persona, Task Flows, Sketches, Wireframing, Usability Testing, Mockups
Music & exercise have long gone hand in hand. For some athletes, it’s an essential part of peak performance.
BACKGROUND
Today, fitness classes have become more accessible for everyone- but I wanted to learn how to improve this experience for NTC users by looking into what music features help users stay motivated throughout a workout.
Workouts are less effective for users when they can’t listen to music that motivates them.
PROBLEM
As a fitness lover and part of a running group, I’ve curtailed my own favourite playlists, and know how important it is for me and my group to have our own music for our runs. This had me ask the question, how can we better personalize online fitness classes on NTC’s app with music?
Music controls are key.
SOLUTION
Have music controls.
Allow users to personalize their music in a workout by controling through “liking”, “skipping” or “repeating” songs.
View workout playlists.
Users can view the workout playlist to see if their favorite artist or genre is included.
Users can engage more by seeing which songs will be upcoming throughout the class.
Search workouts based on music preference.
Users can stay motivated by searching workouts based on playlist and genre.
Favourite trainers or themed classes can be easily found and saved.
Making the most of a workout through listening to music…
WHITE PAPER RESEARCH
To better understand the importance of music and exercise I began my background research by drawing upon information from various studies, when I found an eye opening statistic published by reknowned sports psychologist Costas Karageorghis in
The Sports Journal.
“When listening to music while exercising, endurance increases by 15%.”
NONE of the competitors had music controls for users to personalize their workout.
COMPETITIVE ANALYSIS + THE GAP
Keeping my white paper research in mind, I analyzed three of the most popular fitness apps, and found that although volume controls were available for users, none offered customized music controls.
Peloton
Alo Moves
Yoga Glo
Having a favorite playlist when working out improved ALL of my interviewees workout experience.
USER INTERVIEWS
I learned from my research how important music was for motivation when working out, but I wanted to learn from users on their live experiences with music and working out, and what challenges they faced in crafting or staying motivated with a specific playlist during a workout.
Interview Questions:
Can you tell me about a time when you worked out and listened to music?
Tell me about your experiences working out solo or in group classes.
What’s your process in making a workout playlist?
Major Insights
Motivation
Users that felt disengaged by the music were less interested in participating in the class.
All interviewees felt that selecting workout music was a personal experience and users had different preferences.
Challenges
Nearly half of interviewees wanted a specific artist or genre for their workout playlist
Creating a custom workout playlist is time consuming for users to craft and organize according to workout.
Key features for the most popular music app all my interviewees used…
SECONDARY RESEARCH
I learned from my interviewees that they all used Spotify to craft and personalize their workout playlists because it was the easiest to use. I sought to investigate which aspects made Spotify favoured for users.
Major Insights
Intuitive
Users receive suggestions based on songs or playlists they like.
Customization
Users can craft custom playlists by using music controls.
Convenient
Viewing playlists enabled users to decide if the music selection fit their taste.
The Workout Lover Persona
Visualizing the flow & design…
SKETCHES
After studying NTC’s app and looking in depth at Spotify, Apple Music, and hundreds of references online, I began to formulate my vision of the design and started sketching out various screens and flows.
Possible Playlist Screens
Considering completion of a task flow
2 Key improvements to my design…
ITERATIONS
After conducting user testing with 5 of my peers, I iterated on my designs with 2 major improvements.
Relocating “Music” Category for easier search function.
3/5 of my testers had a difficult time locating the music category under the browse section.
Increasing visibility to enable users to utilize the music search features.
Highlighting the music genre for an improved search function.
Users felt that locating a specific workout by music genre was difficult without seeing details about the playlist in the search feature.
Final Designs & Prototype
Thoughts & Take Aways
Go the extra mile. Adding videos to my prototype and Figma file was a new challenge for me and after I spending hours trying to figure out how to replicate NTC’s app, I learned through this project how to add more interactive elements for a dynamic feel.
Designing within constraints forces you to think outside of the box. Having to work within NTC’s design system took out many possibilities in designing completely new screens. Staying with the theme of integrating a new feature required me to look at their current flows and create a seamless experience, while staying true to the task!
For more work inquiries, or to grab a coffee email me at mandysoetopo@gmail.com ✨
Thank you for reading!
More Projects
Web & Mobile Design.
ABLE COMMUNITY
End-to-end mobile app.
TREVA