Intro

Site Map

Personas

Branding

Design System

Feedback

Learnings

New York Road Runners is the world's premier community running organization, best known for producing the TCS New York City Marathon and hosting year-round races and programs for runners of all ages and abilities.

Duration

2024 – 2025

1.5 years

Role

Product Designer

Team

4 Product Designers

Product Manager

10+ Engineers

Skills

UI/UX Design

Branding

Stewardship

About

This project was for New York Road Runners, the world's premier community running organization and producer of the TCS New York City Marathon. NYRR hosts year-round races and programs that inspire runners of all ages and abilities. Our task was to design a new app that unified the event experience to allow users to explore races, track friends and family, connect with the community, and capture race-day memories in one place. This project was important to me as I ran the New York City Marathon the same year the app was released.

Target audience

NYRR members/users, and spectators

Project summary

By creating new branding, a fresh visual style, and a robust design system, we gave New York Road Runners the foundation for a unified race app experience. On a team of four product designers (including myself), we collaborated with developers over the course of a year to deliver the app, provide ongoing updates, and ensure smooth integration with multiple APIs. The app reached 1 million+ downloads on race day, with many positive reviews about design.

Design challenge

How can we create a cohesive race app experience that connects runners and spectators while accommodating multiple races and complex API integrations?

● Process

01. Creating a Site Map

Navigating how to combine ALL races into one single app

Previously, each race existed in it's own app, i.e the RBC Half Marathon was on a separate app to download than the TCS NYC Marathon. With the new app proposal, we restructured the user experience to include an Events page, where users can navigate through all races that occur year-long. We also sought to integrate a Community page to encourage users to return to the app, as well as a Profile page for runners to track their race times.

● Process

02. Defining Personas

The Runner

This user has most likely used a tracking app before and understand how they work. They might have frustrations with the app and wants improvements around finding results and tracking on the map.

The Spectator

This user has friends or family who runs but isn't running any races anytime soon. They want to closely support the runners in their life, but might not be the most tech-savvy person to fully understand how to track someone on an app.

This user has friends or family who runs but isn't running any races anytime soon. They want to closely support the runners in their life, but might not be the most tech-savvy person to fully understand how to track someone on an app.

● Process

03. Shaping the Brand

How can we create dynamic brand guidelines that apply to all races?

When developing the brand, our focus was to highlight the runners themselves, bringing emphasis to their experience while also incorporating the visual identity of each race.We began by gathering inspiration from various athletic campaigns, marathon/race promotions, and community-driven branding. From there, as a team we explored different brand directions to give the client multiple options. We ultimately decided on this photography-based direction. NYRR has a huge photo library of runners, and we wanted to create a brand that was dynamic for the client to adjust to over the years to come.

While we had to scale back on directly featuring runners due to legal considerations, we found creative ways to keep them at the heart of the brand, through dynamic typography, bold color treatments, and design elements inspired by the energy of race day. This allowed us to maintain the emphasis on the runner experience, even within the project's limitations.

When developing the brand, our focus was to highlight the runners themselves, bringing emphasis to their experience while also incorporating the visual identity of each race.We began by gathering inspiration from various athletic campaigns, marathon/race promotions, and community-driven branding. From there, as a team we explored different brand directions to give the client multiple options. We ultimately decided on this photography-based direction. NYRR has a huge photo library of runners, and we wanted to create a brand that was dynamic for the client to adjust to over the years to come.

While we had to scale back on directly featuring runners due to legal considerations, we found creative ways to keep them at the heart of the brand, through dynamic typography, bold color treatments, and design elements inspired by the energy of race day. This allowed us to maintain the emphasis on the runner experience, even within the project's limitations.

● Process

04. Crafting the Design System

04. Crafting the Design System

Using Variables & Themes

We created a dynamic design system using race brand's colors that could easily adjust to 40+ races

● Process

05. Gathering Feedback

Vetting participants

We wanted a variety of runners and spectators so that we would receive a range of unbiased feedback. Along with another designer, we came up with criteria to filter out participants. We interviewed 10 people in total, a mix of genders, runner levels, and age groups.

We wanted a variety of runners and spectators so that we would receive a range of unbiased feedback. Along with another designer, we came up with criteria to filter out participants. We interviewed 10 people in total, a mix of genders, runner levels, and age groups.

Conducting interviews

One of our first steps was to create an interactive prototype to simulate a real app experience for interviewees. I helped lead the interview process with one other designer and we wrote a script to introduced the project, wrote unbiased questions to not sway participants, and helped guide users through the app when needed.

One of our first steps was to create an interactive prototype to simulate a real app experience for interviewees. I helped lead the interview process with one other designer and we wrote a script to introduced the project, wrote unbiased questions to not sway participants, and helped guide users through the app when needed.

Synthesizing our notes

We alternated taking notes and leading interviews. In the end, we used Notion AI to synthesize the notes, and find key insights of similarities and differences within users' responses. Notion AI was helpful in pointing out outlier information and commonalities. Post-interview process, we presented our findings to the client and decided how to move forward as a team.

We alternated taking notes and leading interviews. In the end, we used Notion AI to synthesize the notes, and find key insights of similarities and differences within users' responses. Notion AI was helpful in pointing out outlier information and commonalities. Post-interview process, we presented our findings to the client and decided how to move forward as a team.

● Currently

Stewardship & Refinements

Hand-off to dev

Stewardship and refinements are ongoing with phase 2.5 (release of new features like ability to follow runners and log-in) currently underway. We meet bi-weekly with our dev team to go over any technicality blockers and UI updates where we hold reviews in the testflight app and Figma.

Stewardship and refinements are ongoing with phase 2.5 (release of new features like ability to follow runners and log-in) currently underway. We meet bi-weekly with our dev team to go over any technicality blockers and UI updates where we hold reviews in the testflight app and Figma.

● Learnings

Understanding client needs

NYRR's top priority was ensuring that race tracking worked seamlessly, without too many distractions. While we combined all races into a single app, we focused on making navigation intuitive so that runners and spectators could easily find what mattered most.

NYRR's top priority was ensuring that race tracking worked seamlessly, without too many distractions. While we combined all races into a single app, we focused on making navigation intuitive so that runners and spectators could easily find what mattered most.

Adapting to tech/dev limitations

With multiple API integrations powering tracking, profiles, and logins, we had to design in phases to match development constraints. Phase 2.0 launched without login functionality, while Phase 2.5 introduced sign-in and expanded profile features. We always designed for the ideal state, while also designing for a "reduced-lift" version that accounted for any technical limitations.

With multiple API integrations powering tracking, profiles, and logins, we had to design in phases to match development constraints. Phase 2.0 launched without login functionality, while Phase 2.5 introduced sign-in and expanded profile features. We always designed for the ideal state, while also designing for a "reduced-lift" version that accounted for any technical limitations.

Building for flexibility

With over 40 races each year, the app needed to be able to adapt to all of the unique race branding while still feeling distinctly NYRR. We created modular components within our design system that could scale across all events, flex across color schemes, and support new features without compromising the overall system.

With over 40 races each year, the app needed to be able to adapt to all of the unique race branding while still feeling distinctly NYRR. We created modular components within our design system that could scale across all events, flex across color schemes, and support new features without compromising the overall system.

MetLife Design System✦NYRR App✦Mizuho Americas✦American Tire Distributors✦MetLife Design System✦NYRR App✦Mizuho Americas✦American Tire Distributors✦