ANTHEM Case Study | Ux Design Portfolio

ANTHEM

Project Type:

Mobile App Concept

My Role:

Tools Used:

UX Researcher, UX Designer, UI Designer

Pen and Paper, Google Suite, Figma, Affinity Designer

ANTHEM is a conceptual mobile app designed to integrate music seamlessly into workouts, enhancing the user experience by reducing distractions and improving focus. This project addressed a common issue: the interruptions caused by managing music, playlists, and phones during exercise. Our solution was a mobile app that generates playlists tailored to users’ preferences, activity levels, and workout plans, allowing for a more immersive, distraction-free workout experience.

Skip to Final Design

Picture this: you’re in the zone, pushing through your workout, only to be jolted out of your rhythm by a song that doesn’t match your pace—or worse, no music at all. You fumble with your phone, skipping tracks, scrolling through playlists, or creating one on the fly. Suddenly, your flow is gone, and your focus is shattered. Sound familiar? For so many of us, managing music during workouts is a constant source of frustration, turning what should be an energizing escape into a series of annoying distractions.

ANTHEM was designed to solve this all-too-common problem. It’s a mobile app concept that seamlessly integrates music and workouts, enabling users to stay in the flow. By generating personalized playlists tailored to activity level, preferences, and workout goals, ANTHEM eliminates the need for manual adjustments, no interruptions, no fumbling with your phone, just you and your workout.

Research

Our research uncovered two pivotal insights that shaped the foundation of ANTHEM:

Music is essential for exercise.
- Music isn’t just background noise, it’s a driving force. Every respondent (100%) reported listening to music or media during workouts, with many emphasizing its role in maintaining motivation and focus. For solo exercisers like Keiko, music is crucial for pacing and staying engaged.
Phone use is a barrier to productivity.
- Despite its benefits, technology often interrupts the flow of exercise. Over three-quarters of respondents (76%) admitted to checking their phones multiple times during a workout, primarily to adjust media (68%). These interruptions can derail focus and motivation

"I probably check my phone too much. I stop to pick a better song or look at texts, which distracts me from actually doing the workout."

Allie

"I do a lot of solo work outs so music is a huge factor when keeping myself motivated and on pace."

Keiko

"If your training hard and a bad song comes on it takes you out of the zone."

Aiden

"Music helps me drive myself forward towards accomplishing my goals. It's an encouragement to work harder"

Michael

To better understand these challenges, we conducted a survey of 25 participants aged 17–51 and five in-depth interviews with users aged 18–30. Our research aimed to:

Explore the relationship between phones and exercise.
Identify user needs when playing music during workouts.
Understand the decision-making process behind music selection.

From Insights to Action

Using these findings, we developed a user persona to encapsulate the common frustrations and goals of our audience. This persona became the cornerstone of our design process, guiding us to empathize with user needs and refine our solutions. ANTHEM’s mission is clear: to deliver a seamless music experience that eliminates distractions and empowers users to stay in the zone.

Define

To understand the landscape and uncover opportunities, we conducted a competitor analysis of existing music and exercise apps. Most competitors specialized in one area—either music or fitness—but rarely bridged the gap between the two. This distinction became ANTHEM’s unique advantage: a seamless integration of music and workouts designed to enhance the exercise experience in ways competitors couldn’t.

User Flows

Building on the insights from our research, we paired user flows with user stories to define how users would interact with the app. This structured approach allowed us to map intuitive, efficient pathways that cater to specific user needs, forming the backbone of ANTHEM’s design.

Quick Start Workout:

As a user who doesn't have a lot of free time to build my own music playlists, I want a quick way to get my workout started so I can get going as soon as I arrive to the gym.

Plan A Workout:

As a user who enjoys various physical activities, I want to be able to have custom workout plans with different types of music paired to them.

Create A Playlist:

As a user who enjoys exploring new music in my free time, I want to be able to incorporate all of my new findings into my workouts.

These scenarios guided us in crafting streamlined, distraction-free workflows to ensure users can easily achieve their goals, whether starting quickly, planning ahead, or personalizing their experience.

Ideate

With a clear understanding of user needs and flows, we began translating our concepts into visual designs. Our goal was to design interfaces that felt familiar to music app users, reducing the learning curve while maintaining simplicity. Each screen was crafted to balance functionality and ease of use, allowing users to quickly set up and dive into their workouts.

We started with sketches to visualize the core structure, focusing on intuitive layouts and user-friendly navigation. These evolved into low-fidelity wireframes, where we prioritized functionality, removed dead ends, and ensured a smooth user testing process. This iterative approach allowed us to refine the app’s flow before moving into high-fidelity designs.

Validate

User Testing Plan

To ensure ANTHEM met its goals, we conducted one-on-one user tests to evaluate the app’s usability and effectiveness in achieving its key performance indicators (KPIs). These tests were centered around four critical questions:

Does the app reduce time spent on the phone during workouts?
Is the playlist-making process simpler?
Does the app motivate users to work out?
Do the features positively impact workout habits?

Key Findings and Adjustments

Refining Quick Start Functionality

One early challenge was confusion surrounding the “Quick Start Workout” button. Sixty percent of users were unclear about its purpose and how it differed from the “Workouts” option.

To address this, we overhauled the functionality:

The “Quick Start Workout” button and the Start Workout screen were removed entirely.
Quick-start functionality was integrated into all workout plans, which now provide a detailed breakdown of associated exercises.

These changes simplified navigation, and in subsequent testing, 100% of users completed tasks with ease. Users appreciated added features, like the ability to customize the length of each workout phase, making workouts feel more tailored to their needs.

Enhancing Workout Plan Customization

Users questioned how they could differentiate between multiple workout plans or browse options within categories like cardio. In response, we introduced exercise tags for each workout plan. These tags allow users to filter and select plans based on specific activities, making customization intuitive and the selection process quicker.

Our initial design included a BPM toggle to dynamically queue songs, but feedback highlighted its redundancy as a separate step. After reconsidering its purpose, we reworked the feature:

Dynamic song queuing now operates by default, paired with the shuffle toggle in the “Now Playing” screen.
This streamlined experience ensures that users enjoy seamless transitions without unnecessary setup steps.

Simplifying Playlist Creation

While 60% of users successfully created playlists without help, several struggled to locate the save button. Some found the icon unfamiliar, while others misinterpreted its function.

To resolve this, we updated the save icon to a classic floppy disk, a universally recognized symbol. When editing playlists, the icon toggles to a pencil, ensuring users interact with the same interface element for both saving and editing tasks. These changes improved usability and aligned with user expectations, reducing friction in playlist creation.

Visual Design: Bold and Energizing

Red and black were chosen as the feature colors, imbuing the app with a fast, iconic, and energetic vibe. Red, often associated with strength, energy, and passion, is a motivational color frequently seen in the sports industry. It was paired with black, a grounding and sleek tone, to create a dynamic yet focused aesthetic. These colors encourage users to push themselves and foster a sense of empowerment.

The logo seamlessly integrates headphones, a dumbbell, and heart rate monitor waves, two symbols that embody ANTHEM’s core values of fitness, music, and personalization.

Black
#191414

Red
#BB0202

Black
#191414

Primary

Secondary

Gradient

White
#FFFAFA

Lt Gray
#D2D2D2

Med Gray
#888888

Drk Gray
#363636

The high-fidelity wireframes brought together the streamlined user flows developed during earlier phases. Consistency was maintained through reusable components, ensuring an intuitive and cohesive experience across the app.

Final Iteration

The app opens with a visually engaging splash page, setting the tone for ANTHEM’s energetic branding. The onboarding process highlights the app’s core features, giving new users a clear understanding of how ANTHEM enhances workouts.

We prioritized simplicity for users who want to start a workout with minimal effort. The Quick Start Workout feature allows users to get music playing within two taps from the home page, delivering an effortless experience.

The Workout Plans feature offers a tailored approach to exercise, giving users control over:

Workout types (e.g., running, weights, cycling).
Intensity preferences.
Duration of workout phases.
Specific playlists synced to their activity.

This bespoke experience ensures users stay focused and motivated, turning workouts into fully immersive sessions.

The Playlists menu empowers users to manage and discover music in new ways:

Create or import personal playlists.
Explore public playlists shared by other users.
Discover app-generated playlists that match workout preferences.

By integrating discovery with customization, ANTHEM becomes not just a tool but a source of musical inspiration.

Splash Page and Onboarding

Quick Start Workout

Workout Plans

Playlists

Reflections & Future Opportunities

As the ANTHEM project comes to a close, it provides an invaluable opportunity to reflect on lessons learned and envision paths for future growth. This project was not only a creative challenge but also a stepping stone in my UX journey, revealing the intricate balance between user needs, design efficiency, and business considerations.

Successes: Building a Foundation of Consistency
One of the most rewarding takeaways was mastering the incorporation of components into wireframes. Centralizing assets brought both speed and consistency to the design process, allowing for seamless updates across all pages. This approach not only streamlined revisions but also reinforced the polished, unified feel of ANTHEM's interface—a crucial element for user trust and satisfaction.

Opportunities for Growth: Striking the Right Balance
Throughout the testing phases, I grappled with designing user paths that felt “just right.” At times, the choices were too numerous, leaving users overwhelmed; at other points, they felt restricted. Moving forward, I aim to deepen my understanding of how to balance freedom and guidance, creating experiences that empower users without burdening them with unnecessary complexity.

Another area for growth is expanding my expertise in advanced design tools. While I utilized Figma and Affinity Designer effectively during this project, diving deeper into these and other tools could unlock even more creative possibilities and efficiencies.

Future Directions: Imagining What’s Next for ANTHEM

Integration as a Spotify Feature
If ANTHEM were to evolve, my first step would be to reimagine it as a feature within an existing brand like Spotify. By adapting ANTHEM’s user flows to fit within Spotify's existing UI, the app could leverage an established platform while reaching a broader audience. This integration would also eliminate the need for users to juggle multiple apps, further aligning with ANTHEM’s goal of reducing distractions.
Continued Research and Feature Expansion
User needs are constantly evolving, and ANTHEM’s growth would depend on staying ahead of these changes. Conducting additional research would uncover emerging trends and untapped opportunities. For example, exploring features like AI-generated workout playlists, gamification elements, or integration with wearable devices could further enhance ANTHEM’s value.
Exploring Monetization Strategies
To bring ANTHEM to market, determining a sustainable revenue model is essential. Conducting market research to identify the ideal subscription rate or exploring alternative monetization methods—such as premium features or partnerships with fitness brands—would ensure the product’s long-term viability.

Conclusion

The ANTHEM project exemplifies the dynamic nature of UX design: a balance of creativity, user empathy, and practicality. It challenged me to think holistically, from understanding user pain points to refining visual details. As I look ahead, the lessons from this project inspire me to continue growing as a designer, embracing new challenges, and always striving to create experiences that truly resonate with users.

Cover images generated by Midjourney AI and Unsplashed

Onboarding clipart created by Alraun from Shutterstock

Workout vector images created by Hey Rabbit from the Noun Project