PITTSBURGH MARATHON / P3R

DIGITAL DESIGN SYSTEM

Run the first weekend in May, the DICK’S Sporting Goods Pittsburgh Marathon is not only the largest annual fitness movement in the region but also one of the largest events when combining active participants, volunteers and spectators. W|W’s collaboration with P3R, the engine behind Pittsburgh’s favorite races & runs, including the Pittsburgh Marathon, began in 2018 via the design of the integrated branding campaign to celebrate the race’s 10th anniversary. In the subsequent years, W|W continued creating the branding campaigns for the Marathon while also helping P3R navigate a rebranding initiative for itself, the parent organization.

With the formative branding now on solid footing, the next challenge for W|W to address was the comprehensive P3R digital ecosystem and experience. Key objectives included delivering a consistent user experience across the different race sites while streamlining the Marathon team’s workflow in the management of site content. 

WEBSITES

To achieve P3R's expressed goals, W|W deployed a digital design system. By definition, a design system is a collection of reusable components, guided by clear standards, that are assembled together to build applications, extend visual identities and flex to support evolving brands. W|W migrated the P3R, Pittsburgh Marathon, and 2 other race websites (EQT Pittsburgh 10 Miler and Fleet Feet Liberty Mile) into one digital ecosystem that leverages BlokBlok CMS, a Ruby on Rails + Javascript hybrid content management system. With this systemic approach, the Marathon/P3R staff manages the content for all 4 websites from one admin environment that can share important calendar events and news/blog posts on multiple sites without redundant activity, while providing each site with its unique content, branding, and URL. Each of the individual races continues to build their digital brand equity while maintaining the important connection to P3R. 

The design system for the P3R site includes the capacity to house the organization’s smaller races, such as the Great Allegheny Passage (GAP) Relay and the FlyBy 5K, as well as specialized sets of content, such as Kids of STEEL, an award-winning training program, that previously had a unique site. 

VIRTUAL MARATHON EXPERIENCE

Most runners, athletes, and performers are all too familiar with the pre-race “jitters” sensation on the eve of a big event, and that is certainly the case leading up to the Pittsburgh Marathon. As the COVID-19 pandemic necessitated the pivot to a virtual marathon (when runners chose the day and time in which they ran) from the classic in-person event, W|W was challenged to design and develop an interactive experience that helped replace those lost jitters while connecting runners with their supporters and the race partners & sponsors. Given the on-the-go lifestyle of these runners, W|W delivered an optimized experience on mobile devices consistent with modern web apps. 

Another important part of Marathon Weekend is the Expo where runners check-in, pick up their official race packets, and network with Marathon staff and partners/sponsors. In addition to the Expo, the Marathon Digital Experience helps participants connect with important milestones in their journey to complete their run, from the upfront 'pledge' of commitment to crossing the finish line. View the Marathon Experience. 

PLEDGE TO RUN

With months of training already worn into the soles of their shoes, the runner's Race Weekend journey begins with the Pledge to Run, presented by Brooks, by selecting the day and race they intend to run. The experience indicates how many others will be running with them on that particular day and provides a customized graphic badge for sharing on social media. 

WHY I RUN

Many runners draw their inspiration to run from family members, life events and personal challenges. Presented by UPMC Health Plan, Why I Run provides participants with an opportunity to share that inspiration on the "virtual wall" and generates a customized graphic badge. 

CHEER CARD

One of the most memorable in-person Marathon moments is the adrenaline rush of seeing your supporters lining the streets of Pittsburgh's eclectic neighborhoods, often proudly waving a cheer card with your name. Presented by DICK'S Sporting Goods, the Marathon Cheer Card provides family and friends with an easy way to help motivate their runners. The Cheer Card experience is customizable with different backgrounds and generates a graphic badge for optimized social media sharing. 

VIRTUAL FINISH LINE

Presented by Wall-to-Wall Studios, the Virtual Finish Line leverages AR (augmented reality) technology to let runners simulate that classic photo op and generate a sharable graphic badge. 

FINISHED MY RACE

After completing their race, runners are encouraged to record their accomplishments inside the Finished My Race experience. If logging their best time, the Personal Record experience, presented by Magee-Womens Research Institute & Foundation, delivers a micro-interaction and creates a custom graphic badge ready to share on social media. 

MUSIC, EXPO & MORE

Other key areas of the experience include the Virtual Expo where partners & sponsors are positioned to share tips, videos with messages of encouragement, promotional offers and to connect the running community with their brand.  Presented by PNC, the official Marathon curated playlist is embedded in the app via Spotify making the top tunes readily accessible. Finally, a curated feed of #MOVEPittsburgh is captured inside the experience to share those epic marathon moments.