How do you improve the musical experience at the gym?

NikeBeat is a concept fitness mobile application that allows users to control their music and track their gym workout in a non-distracting way. The app uses GymTracker equipment (concept) and bluetooth connection to detect and record fitness activity.

Role: I created this app from concept to prototype, including research, user flows, wireframes, personas, storyboarding, prototyping, and presenting.

* This project was completed through the SVC UX Design II program.

Project Approach

The project had three requirements: address the problem of listening to music at the gym, design for users like Kanye West, and create with Nike as the client.

  • With an open-ended project brief, I began the ideation process with user research. To design with Kanye in mind, I first identified three personality traits: Angry, Busy, Hungry. I then interviewed four people within my network who I thought had similar traits, using their professional occupation as a measure for their busy-ness and ambition. These users also regularly visited the gym.


After recording interview notes on blue post-its, I grouped the data into themes (noted in yellow post-its). These patterns ranged from the physically tangible to the psychological.

I then translated themes into insights (in pink) by asking, “What does this mean for the user?” These insights were a look into current behavior, and set the stage for designing without preconceived barriers. By plainly seeing what people care about and use, I identified needs that became opportunity areas for my solution.

I worked with three designers to identify assumptions about how people currently listen to music at the gym, and used a provocation exercise to re-imagine the experience. By removing an assumption or exaggerating others, I came up with some blue-sky solutions.

Initial Idea

I imagined a digitally-integrated gym with equipment that could utilize location-based and bluetooth technology to keep track of user workouts and music preference.

  •  Bluetooth headphones would monitor the wearer’s heart rate, and match music according to pace.
  • A Nike Fuelband would serve as the trigger to access a music player and workout counter via augmented reality-- just swipe the band over a “swipe pad” on gym equipment to show the interface.
  • Users could safely store and charge phones at the front counter or in charging lockers.

Storyboarding and Wireframing

I created a storyboard to demonstrate the NikeBeat gym ecosystem, focusing on the major interactions between the user and the equipment. I presented this to a class of 7, along with specific questions I wanted to gather feedback on. Some of the critiques I found most helpful were questions that made me consider environmental and technological challenges. My current design did not answer the questions of why a gym would want to implement this technology and how to keep the phone with the user if they so desired it.

I created wireframes of the AR music player, examining the iTunes and Spotify platforms to understand the necessary buttons required for an audio player. I presented this in a 60 second lightning round to two individuals, and found that some elements were unnecessary (i.e., heart rate). We also discussed ideas I hadn’t originally considered, such as location or equipment sensors to automatically log a workout once a user stopped an action.

Understanding the User

To ensure I was designing with the right audience in mind, I created a fictional profile of the user based on the initial information gathered. Doing so made sure that I was not designing for a “hypothetical Kanye,” but for a user demographic grounded in real research. I also created an empathy map to gain deeper insight into what drives the thoughts, actions, and feelings of the user.

Final Idea

Since it is unclear how soon AR technology can be implemented, I opted to build a mobile app prototype and introduce the idea of GymTracker technology.

  • Gyms would install GymTracker equipment that can register who the user is, the amount of weight they are using, and how many reps they log in a workout.
  • Users would continue to utilize bluetooth headphones that can log heart rate.
  • To use the app, users need to carry their phones with them to the gym. The NikeBeat app gives users the option to enter ‘Do Not Disturb’ mode to encourage focus.

Wireframes and Prototypes

The wireframes outline the main views and functionality for the product. The app lands on a single screen to track workouts, designed to encourage direct usage upon opening the application. I was inspired by the Jefit Workout app when designing the interface of workout routines. The media player at the bottom is inspired by the minimized Spotify player.

I created a prototype to test user flow and interaction, and gauge what user reactions were to the amount of information displayed. It was a bit difficult to demonstrate how the app would work without the actual GymTracker technology, but I used animations and in-person explanations to stand in for the workout.

User Testing

I conducted user testing where I was able to observe the actions and hear the thought process of three users. Here’s what I found:

  • The iconography was confusing
  • The single workout screen is distracting. Certain elements could be filed under a separate menu to simplify.
  • The amount of introductory text can greatly affect whether users will read it or not.
  • It’s not enough to rely on memory for in-app actions. There needs to be a visual indicator of the possible actions available.

I presented my findings to a class of seven individuals, and received lots of feedback on both my presentation style and the design of the app. Here were a few of the things they said...

The good parts...

... and the room for improvement!


  • Starting with user research can help guide the ideation process. User personas and empathy maps can inform the product design throughout the build, not simply to confirm a direction
  • Identifying opportunity areas by analyzing behavior patterns can broaden the scope of the solution-- never be afraid to be “blue sky” 
  • Matching the fidelity of the prototype to the stage of development can influence user testing, and should be very carefully considered!