NYC Marathon App Case Study

MarathonWeek_Expo15_MM-080.png

The 2014 TCS NYC Marathon was an interactive digital experience that encouraged runners and spectators from around the globe to interact with race day stats and track their favorite runners during the world's biggest and most popular marathon.

 
 

Overview

In 2013, ING was the sponsor and sponsored an app to track runners with limited information. My recommendation during the development process was to add instrumentation to track user data and implement a survey.

A few weeks after the ING app launch, I received the Google Analytics and survey data — it was clear that users were most interested in spending time tracking their friends’ and family’s location during the marathon race, driving goals for future apps.

In 2014, the NYC Marathon gained a new title sponsor: TCS. With this major name and brand change, there was an opportunity to re-imagine the marathon’s mobile app. 

The primary goal of the app was to increase the number of downloads from the previous year to 250K. The success of the app was focused on understanding the primary user,
the spectator, and what they were most interested in on race day.

nycmarathon13.jpg
 

Goals

goal-2.jpg
goal-3.jpg
 

Product Design Process

REQUIREMENTS & Information architecture

8.jpg

Requirements of the mobile app changed significantly during discovery due to the new sponsor’s marketing campaign. A challenge was that the branding was worked on in parallel to the app design and caused several more iterations than in the project schedule in order to incorporate the new branding.
In addition to the branding, it was essential to clarify what information and areas would be included in the application. NYRR stakeholders preferred more elaborate navigation

names and requested that sponsor information be included in the application. I was able to recommend to success simpler section names and a creative solution to the navigation in order to succinctly surface the information without feeling crowded.

Even though short deadlines were prevalent throughout the project, I effectively managed the design schedule and delivered the app ahead of schedule.

 

Sketches, Wireframes & iterative design

Screen Shot 2018-07-19 at 8.38.49 PM.png
Screen Shot 2018-07-19 at 8.39.19 PM.png

Once the pages and the required content was outlined, I sketched several concepts for the home screen and then moved onto wireframing. Utilizing previously untapped real-time runner data functionality, I planned to incorporate this information on the home screen. An obvious choice was
to include the leaderboard on the home screen. Keeping the spectator top of mind, I believed that different information would be of most interest before, during, and after the race.

My concept for the home screen included 1 of 3 variations to be surfaced, based on the time frame.

After some iteration and the creation of a prototype in InVision, the prototype was shared with 15 internal NYRR marathon runners not associated with the project. This group validated my assumption about the home screen. A new outcome of these sessions was to put a greater focus on the
user’s tracked runners.

Screen Shot 2018-07-19 at 8.39.19 PM.png
Screen Shot 2018-07-19 at 8.39.32 PM.png
 

HI-fidelity designS

nycfull14.jpg
 

Results

results-1.jpg
 

"App was very responsive to refreshing race data...I like seeing this app get better every year."

- ioS app store user