EM Capstone: PaceJam iOS App Case Study

A comprehensive brand identity and native iOS app that seamlessly syncs running cadence with personal Spotify libraries in real-time, creating a highly adaptive workout experience.

JRMC 7012 | Spring 2026 Role: Creative Director & Product Designer

Project Overview

PaceJam is a mobile app designed to dynamically match music to a runner’s cadence. Our goal was to translate the app’s core promise — a fun, motivating, and seamless experience — into a cohesive visual identity, back it up with rigorous user research, and develop a fully functional native iOS application.

We worked in a team of three to make this product come to life. As the product designer and creative director, Mel brought PaceJam’s visual identity to life with a cohesive branding system, designed an interactive Figma prototype of our app and tested it with real user, sand coded the frontend of the app itself.

There are all the group members: Kylie, Ryan, and Mel

The Stack

• Figma
• Adobe Illustrator
• Adobe AfterEffects
• Adobe Premiere Pro
• Davinci Resolve
• Canva
• Claude
• SwiftUI
• Xcode
• CoreMotion
• SQLite
• Spotify iOS SDK

The Problem

Whether you run marathons or would only run if being chased by a bear, there’s something we can all admit: running sucks a little bit. Maybe it’s too hot outside. Maybe you went out a bit too fast. Or maybe your music just isn’t hitting the spot.

It’s this last experience that our Capstone team just kept thinking about over the summer. We’re all runners who’ve personally felt the surprising impact music can have on a run. It’s an amazing feeling when the perfect track comes on at the perfect moment in your run. But we realized that whether we had that amazing feeling or not was incredibly unpredictable; the fate of our runs was ultimately left up to whether the Spotify shuffle button was having a good day or was in a mood.

The problem isn’t technology itself; people love using apps like Strava and Nike Run Club to gather data on their performance, and nearly every runner loves having their music from Spotify or Apple Music with them as they head out. The problem is the gap between these two worlds. No app exists to deliver a seamless, integrated experience that joins together the data of your runs and the emotions of your favorite music in perfect harmony to help you consistently reach that runner’s high that, even when it’s a little hot out, helps running suck a little less and rock a whole lot more. So, we decided to build it.

The Solution

So… How Will This Work?

The concept was bright and shiny, but figuring out exactly how to implement it brought about some very important questions, like…

• Will this be iOS native or built for both iOS and Android? Will it function on fitness watches?
• What language will this be coded in?
• Will we pull music from a user’s library or a general bank of music?
• Will the music follow the user, or will the user follow the music?

Will the music follow the user, or will the user follow the music?

We were faced with a decision about whether the music would set the pace or the user would… until we realized we could do both. We developed “Responsive Mode”, in which the user runs and the music responds in real-time, and “Target Mode”, where the music changes to certain BPMs to lead a user through a workout as they match the rhythm.

Establishing the Brand Identity

Because PaceJam was a brand-new concept, we defined our personality early: dynamic, innovative, encouraging, and fun. This ethos guided every design decision. We audited competitors to ensure a unique market position, refining our initial color palette into a bright, energetic scheme.

Mel and Kylie conducted an extensive audit of fitness and music competitors like Strava, Nike Run Club, and Spotify to ensure a unique market position. This audit revealed a trend of dark, data-heavy interfaces, leading us to pivot toward a more approachable aesthetic. Our initial color palette was functional but dull; we refined it into a vibrant, high-contrast scheme — imagine the neon, glow-in-the-dark carpets in retro bowling alleys. This shift was designed to stimulate energy and mirror the adrenaline of a successful run, ensuring the app felt alive and motivating.

This is the most up-to-date color palette after our refresh

This was our first color palette

For typography, the selection of Owners Narrow for headings and Owners for body text was a deliberate choice to balance character with readability. We explored various typefaces that all had personality, but the Owners family provided a modern, geometric foundation that felt athletic yet friendly. The condensed nature of the headings allowed for bold, impactful messaging that didn’t crowd the screen, while the body text ensured that complex workout stats remained legible at a glance during high-intensity movement.

This is our design system

The mascot, “Tempo,” was conceptualized to humanize the data-driven experience. We designed Tempo to act as a supportive coach, guiding users through the onboarding process to reduce initial friction. The design process involved blending Mel’s minimalist geometric sketches with Kylie’s more fluid, illustrative approach and Ryan’s cartoon-esque perspective drawings. The resulting mascot is a friendly, abstract form that embodies rhythm and motion, serving as a consistent visual anchor throughout the user journey and celebrating milestones to boost retention.

Evolution of our mascot

The PaceJam design system is the culmination of a rigorous, iterative process that bridges brand identity with functional utility. By merging a high-energy color palette and distinctive Owners typography with a library of specialized UI components, we created a cohesive visual language. Every element, from the “Tempo” mascot to the simplified stats charts, was refined through user testing to ensure it met the practical needs of runners. This system doesn’t just define how the app looks; it establishes a scalable framework that maintains brand integrity while optimizing for a seamless, low-friction user experience.

Prototyping & UI Design

As the primary product designers, Mel and Kylie developed a robust library of key UI components within Figma. This included a custom sliding pace selector for tactile feedback, a streamlined navigation bar, and high-contrast stats charts. We also built specialized media controls that prioritized large touch targets, acknowledging that runners need to make quick adjustments without losing their stride. This pattern library served as the single source of truth, ensuring visual consistency across every screen of the application.

These are screens from the final app

The prototype’s evolution was driven by the need to reduce cognitive load. Early iterations were congested with too many data points and buttons, which felt overwhelming during a run. We refined the interface toward a “clean and bold” aesthetic, using generous white space and larger, high-visibility typography. User testing played a pivotal role in this iteration; by observing how testers struggled with small icons, we transitioned to a more thumb-friendly layout. This iterative process moved the design from a feature-heavy tool to a high-energy, user-centric interface that prioritizes essential information.

This shows the progress from out early wireframe low fidelityt protoype, to the high fidelity figma prototype, to our iOS app interface

Application Development

Building PaceJam required navigating a series of real engineering decisions that directly shaped what we could design and ship. Ryan served as our development lead, responsible for the app architecture, backend logic, and source control. As the UI/UX designer, I worked in close collaboration with him throughout — translating our Figma prototypes into a functioning iOS app and bridging the gap between the designed experience and what was technically feasible.

Choosing the Platform: Native iOS

Our first major decision was the platform. We evaluated Android (Python), React Native (JavaScript), and native iOS (Swift). React Native initially seemed attractive — it promised cross-platform compatibility and used a language the whole team knew from web development. However, Apple’s announcement of Liquid Glass, a sweeping new design language for iOS 26, changed everything. React Native would not support it, and designing for a system we couldn’t implement wasn’t an option.

We committed to native iOS in Swift. This narrowed our potential audience by roughly 30–50%, but it meant we could build on Apple’s latest design system and ensure our UI would feel at home on the devices our target users actually carry. For the design team, this decision gave us access to Apple’s full component library and the expressive possibilities of Liquid Glass — a creative constraint that ultimately elevated the product.

The Core Technical Challenge: Finding BPM Data

PaceJam’s central feature — matching music tempo to a runner’s cadence — depended on access to BPM data for individual tracks. Early in development, we discovered that Spotify had deprecated the API endpoint that provided this data, just weeks before we began building. This sent Ryan on a months-long search for an alternative.

After testing several broken or insufficient options, we landed on a music metadata API hosted on Nokia’s Rapid platform, which provided genre, mood, tempo, Spotify URL, and song ID — everything we needed. A $10/month subscription unlocked enough calls for testing, and within a week of integration, the first working version of PaceJam was running. This resolution directly unblocked the design work: with BPM data confirmed reliable, we could design the cadence-matching flows with confidence they’d actually function.

Workout Data: The Easy Win

While the music API situation was turbulent, workout data came together smoothly. Apple’s CoreMotion and HealthKit frameworks gave us clean access to the iPhone’s gyroscopes and heart rate monitors with thorough documentation. Cadence tracking was built and stable within the first few weeks — giving the design team a reliable foundation for the run screens from early on.

Scaling Up: Building the Database

As PaceJam matured into beta, its JSON-based data caching couldn’t support planned features like workout history and persistent user data. Ryan introduced an SQLite database, packaged locally with each app build. The team held a whiteboard session to map out the full data model together — an important moment where design intent and data architecture had to align. This database became the backbone for intelligent song selection, workout history, Spotify library caching, and persistent user settings.

Implementing the UI: Design Meets Development

Once Ryan established the backend, we implemented our Figma designs into Xcode with Kylie taking the lead. Using Claude Code as a development tool, shefed it our prototype and integrated the frontend against Ryan’s existing structures and database logic. This process involved significant trial and error — hitting usage limits, debugging broken states, and iterating on implementation approaches. Claude Code was also useful as a UX tool during this phase, helping us pressure-test and redesign flows like the run setup sequence and the mid-run Target Mode screen.

Output of our Figma using Claude Code

When Ryan also began using Claude Code in the final stretch, it accelerated feature development — but introduced risk as well. It occasionally broke existing functionality, overrode correct logic, or made changes outside its given scope (including deleting our .gitignore). The most consistently successful use of AI in development was style matching: because our design system was so thoroughly documented, Claude could build new, unprototyped screens that looked production-ready on the first try.

Takeaway for the Design Process

Every technical decision in this project had a design consequence. The platform choice determined our design language. The API battle defined which features were viable. The database architecture shaped what user data we could surface and when. Being embedded in these conversations — not just handed a spec to design against — gave me a clearer view of why each screen looks and behaves the way it does, and made the overall product more coherent as a result.

User Testing & Iteration

To validate our design, we conducted moderated usability testing with six Generation Z recreational runners.

Ryan served as our Facilitator/Interview, Mel served as our Notetaker/Observer and Recruitment Lead, and Kylie as out Data Analyst and Documentation Designer. However, we all helped each other with the user testing process.

The results were highly encouraging: 100% of participants successfully completed the core setup tasks, and the app earned an impressive System Usability Scale (SUS) score of 82.1. Participants noted that the connection to their personal Spotify library, rather than an internal stock library, was a massive positive.

However, the testing revealed crucial areas for improvement, which we immediately iterated on:

• Workflow Restructuring: Users prioritized selecting their workout structure before setting their pace. We split these into two separate screens to better match the user’s natural mental model.

Workflow Restructuring

Clarifying Terminology: Users misinterpreted the “Increase/Decrease” buttons as immediate pace controls rather than split progressions. We renamed these to “Negative Splits / Positive Splits” and designed an interactive chart to select starting and ending paces. Furthermore, we changed mid-run metric labels from “Next Lap” to “Next Interval” to avoid confusion with GPS tracking.

Clarifying Terminology

Reducing Cognitive Load: We redesigned the run screen to create a clear visual hierarchy, grouping interval stats together so runners could scan their data in milliseconds without breaking their stride.

Reducing Cognitive Load

Go-to-Market & Promotional Content

Beyond the app itself, we wanted to ensure our promotional assets reflected the same authentic, minimal yet bold aesthetic we established in the UI. Mel designed the primary promotional poster, intentionally adapting the layout into distinct, optimized formats for both a standard Instagram post and a vertical Instagram Story to maximize social engagement.

This is our final poster design

To bring the app’s energetic vibe to life, we collaborated closely to produce a live-action launch trailer. Ryan led the initial storyboarding to map out our visual narrative, while Kylie stepped in as our main actor and runner. To ensure we captured the perfect balance of active running footage and clear interface close-ups, Mel developed a comprehensive shot list prior to the shoot. During production, Ryan and Mel worked hands-on behind the camera to film the scenes, keeping our creative vision on track from the initial storyboard to the final cut. We added a layer of fun and complexity to the video by bringing in our professor and his professional drone to capture aerial shots.

[embed]

Results & Next Steps

Seeing PaceJam come to life has been incredibly rewarding. What started as an ambitious concept has evolved into a functional, data-driven application. UX research successfully validated our core value proposition while identifying specific refinements that reduced cognitive load and improved the overall user flow.

We learned some key lessons along the way, like the vital importance of iterative terminology testing and the power of a mascot to enhance brand personality. Looking forward, our next step is to conduct real-world field testing with users on live runs to fine-tune our music selection algorithm and ensure PaceJam feels just as motivating in motion as it does on screen.