Since its founding in 1976, the mission of the Marine Corps Marathon has been to promote physical fitness, generate community goodwill, and showcase the organizational skill of the United States Marine Corps. Holding the capacity for over thirty thousand runners from all fifty states and more than fifty countries, the annual race known as “The People’s Marathon” is the fourth largest marathon in the United States and the ninth largest in the world.
Realizing their current digital experience left users in the dust, the Marine Corps Marathon team approached nclud with the hefty task of a ground up restructure, redesign, and rebuild. This set in motion the year long challenges of elevating awareness of events, embracing the general public for registration, establishing language to help foster emotional resonance, and emphasizing the Marine Corps brand. With the risk of 200,000 users getting lost along the way, we knew the stakes couldn't be higher.
Research and validation guided every step of our process.
The Marine Corps Marathon had traditionally been a single event organization, with their naming and branding reflecting that — however, they now had six additional events that were growing quickly were and in need of better representation and branding on the site. Each event had its own results, images, registration, updates, and details that continually competed with other site content and calls to action. We needed to come up with a solution that allowed users to find the specific event information that they wanted without confusing it with similar information from other events. To start, we compiled all of the existing site content and analyzed what content types fell within each event and where there were overlaps. The messy and disorganized information was confusing to visitors, so we took a step back and visualized the content groupings into an understandable and comprehensive structure that we lovingly nicknamed “The Millennium Falcon.”
With this structure in place, we categorized all of the site content and grouped it by each event as well as content type. This approach allowed the visitor to navigate to the Historic Half Marathon page and find relevant event registration and results, but also navigate directly to general results and registration pages before selecting the Historic Half Marathon. Visitors would have two (or more) paths to the content they wanted without heavily siloing the site. After categorization and mapping visitor flows, we conducted A/B tree tests to see if users could navigate this new structure to determine that it could perform better than the current structure. The results validated our thinking and with a few informed tweaks we had a structure that was intuitive and tested well with target users.
We needed to understand the runners and their goals to create the best user experience.
Utilizing the marathon’s extensive runner database, we interviewed marathon runners of all skill and experience levels from across the country. Signing up and running a marathon is a complicated and often stressful task with many steps, spanning almost a full year. We needed to understand how marathon runners plan, train, and run the event so that we could create an experience on the site that presented the right information at the right time and was adaptable and easy to use for both race registration and for race day content. Over twenty interviews were conducted, resulting in targeted persona maps of characters likely to visit the site. Mapping out these identities was vital to understanding how users would interact with the content. (One of our favorite personas was “Reginald,” a sixty-year-old runner who had completed fifty marathons in his lifetime, answered calls on his flip phone, and was looking to qualify for the Boston Marathon.)
Alongside the interviews, we expanded our research to not only reach existing runners, but also prior and potentially future runners. We sent a survey to all marathon participants from the past year, asking them about their experience with the site before, during, and after the race. Monitoring and analyzing usage of the current site using heat maps, eye tracking, and user analytics, we were able to identify key pain points that visitors experienced when trying to navigate, get more information, and register for events.
|Key Performance Indicators With user research, persona mapping, and visitor testing complete, we distilled the results of our efforts into our Key Performance Indicators that would guide the user experience, design, and development teams to success.|
|Key Performance Indicator 1 Increase visibility of event series programming. Marine Corps Marathon is well known for its namesake event but they also put on seven other shorter distance races throughout the year. We needed to increase the prominence of these events on the site without downplaying the signature marathon.||Key Performance Indicator 2 Quantify sponsorship opportunities through analytics and explicit placement schemes. The current site made it impossible to track impressions on sponsored ads and only had a few limited implementations and placement areas for ads, leading to problems sharing information with existing sponsors as well as gaining new sponsors for the various events.|
|Key Performance Indicator 3 Increase registration rate for women runners. Past race metrics combined with user research and testing showed that often women felt left out of the marketing and community. We needed to make the race feel more open and friendly to women and non-military personnel.||Key Performance Indicator 4 Bring the site to mobile users with a responsive and highly optimized design. The existing site was focused on desktop users and slow to load — both deal breakers with mobile users, especially with the existing stress of registration and planning. Using a “mobile first” process would allow us to focus on those users and their needs before expanding across all devices.|
After determining our Key Performance Indicators, we began the process of reorganizing more than two hundred pages of content and information. The current site was loaded with legacy content and old media without any linking or connection, making it extremely difficult for the user to access relevant information. By breaking the main content areas into their own landing pages, we created a hub for each event that allowed visitors to find content for each race in a predictable and simple manner. The new structure also allowed visitors to easily navigate between the events and access the results or registration information for a specific event without needing to go all the way back to the homepage.
Instead of wireframing all of the pages on the site in a traditional way, we instead chose to approach the entire site from a more modular point of view, creating a series of content blocks and segments that could be reused across the site as well as added and removed during specific event timelines. This allowed us to account for all types of content that may exist (not just what already existed) as well as to focus on the mobile information hierarchy. Only once the modules and content structures were in place did we move into more standard wireframes, using our blocks to lay out key pages and layouts. With the site now pushing visitors towards eight different events instead of having them exist as afterthoughts to the main marathon, the modular structure and lightweight wireframes helped visualize and organize the similar structures between them but also highlight the small differences in content and information.