Golf.com

I redesigned the online experience of golf's most premium publication and hub.

WHEN
August 2019 - May 2020
WHAT
Product Strategy, UX
golf-1

THE CHALLENGE

Founded in 1959, GOLF.com is a premium resource for all things golf. Beyond providing the latest news, GOLF.com has a lot to offer: gear, instruction, travel, and shopping. All of these are hallmarks of the golfing experience.

I served as the lead/sole UX designer and product strategist on a team that was tasked to redesign the entire experience of GOLF.com. I developed the overall product strategy that would drive the vision for this project and created the interaction designs and layouts for GOLF.com’s editorial content and ProShop (their e-commerce site). The online experience aimed to engage golfers at all skill levels, integrate editorial and e-commerce content to drive revenue, and create a scalable platform that could not only accommodate but also showcase different media types in an immersive fashion.

How can we bring together all types of golfers in a way that is engaging, educational, and experiential?

researcharchetypes
Mapping each behavioral archetype with observed traffic and patterns on GOLF.com

BEHAVIORAL ARCHETYPES

To create an experience tailor-made (or should I say TaylorMade) for the user, I had to get to know the user: golfers.

I interviewed golfers of varying skill levels and handicaps and analyzed user behaviors based off GOLF.com’s data analytics to create the following behavioral archetypes that extended beyond their demographics. Below are the different behavioral archetypes I created. Each archetype maps to a set of unique objectives, needs, analytical frameworks, and user flows.

archetypes

INFORMATION ARCHITECTURE

A driving force of the product strategy was how to take GOLF's colossal amount of content and create a scalable content architecture that promoted discoverability.

This meant addressing the following challenges:

  • There is a staggering amount of content living on GOLF.com (including 10,000+ tags), but most of the content was not properly surfaced or organized, making it difficult for users to find what they wanted or discover new content.
  • The templates are geared toward static text and do not do justice to GOLF.coms recent content expansion into video, podcasts, and galleries or their high-quality editorial photography.
  • More and more of GOLF.com’s users are viewing the site through a mobile device, but many GOLF.com users are print subscribers and are used to the highly editorial and visual look and feel of the magazine experience.
sitemap

Above: The first sitemap draft, which was driven by our findings. To accomodate and provide for the large-scale volume of GOLF.com' editorial offering, we needed an architecture that was adaptable and allowed for multiple methods of surfacing content, such as categories on a navigation menu, search, and the use of tags.

These challenges made it difficult for our behavioral archetypes to fulfill their needs. I did a deep dive of Golf.com’s web analytics such as the most visited pages, most used search terms, pages with the highest engagement rates, to determine which content was most resonant.

WHAT I FOUND:
  • While news was heavily visited as expected, users were interested in the lifestyle and celebrity culture of golf, according to search activity.
  • Bounce rates were highest when users were “dead-ended” (unfortunately, there were many dead-ends) and unable to find what they were looking for.
  • Instruction did not receive much engagement, with many users dropping off at the landing page and not bothering to read any of the tutorials.
  • The ProShop, despite being hosted and linked on the Golf.com navigation, was siloed from the rest of the site, with few visitors navigating to the shop, let alone buying the products.

WHAT THIS MEANT:

  • Orient and recirculate the user where necessary. Navigation needs to be intuitive and make it easier for users to find what they need, whether that is through surfacing more relevant content on category landing pages, creating a much more robust tag system, and organizing the navigation based on the users’ needs.
  • Instruction needs to be interactive. Instruction needs to be interactive and targeted toward specific skills. Because beginner golfers do form a sizable chunk of the Golf.com readership, they need to feel confident about seeking the golfing help they need instead of being forced to find the right article without help.
  • Editorial and e-commerce go hand-in-hand. The Gear section needs to establish a symbiotic relationship between e-commerce and editorial, by creating “shoppable” moments in editorial and recirculating editorial content in e-commerce.

NEWS

Because most mobile users check the news articles, the GOLF.com article templates were optimized for mobile. Furthermore, these templates needed to (1) accommodate different mediums, like video and podcasts, in a way that felt immersive and visual and not like an afterthought, and (2) introduce more recirculation opportunities to prevent dead ends, as there were high bounce rates on the article pages.

golf-homepage-mobile
golf-homepage
golf-homepage-mobile-live
golf-homepage-live
golf-top100-mobile-1
golf-top100
golf-top100-live-mobile
golf-top100-live-1
golf-video-mobile
golf-video-1
golf-video-mobile-live
golf-video-live-1

INSTRUCTION

Instruction needed to be more interactive. It needed to be more than text articles categorized under an Instruction category. GOLF.com attracted a wide demographic of golfers, from those who were "beginners" to those with extremely low handicaps. However, the articles weren't organized or presented in a way that necessarily matched the user's skill level or the problem they wanted to fix. Furthermore, the Instruction section absolutely needed to be mobile-friendly, as users would likely be using their phones to follow the tutorials on the golf course.

fixfinder

I created and designed the Fix Finder module (left), a filter system that curates Instruction resources based on selections that a user makes. The user answers a series of questions about their golf skills and problems. The questions form a decision tree (below), which determines which articles and videos are displayed to the user.

fixfinderbrainstorm
videotutorial1-static
videotutorial2-static
videotutorial2

The issue with video tutorials is that users have trouble remembering and referring to multiple steps. Furthermore, any tutorials need to be mobile friendly, so a user can follow along on their phone as they golf. As the user scrolls, the corresponding step updates with an anchor link, making it easier for a user to follow along.

LEADERBOARDS

Because users check the latest tournament stats and rankings on mobile, it was important that leaderboards and rankings were designed with mobile-friendliness in mind. This was especially challenging, especially given all the stats associated with each player, such as the number of holes per round. I used a horizontal scroll and an accordion-style mechanism to display a large amount of data in one mobile viewport, in a way that did not feel overwhelming.

Content-Type-Landing-Leaderboard
leaderboard
Content-Type-Landing-Leaderboard-Expanded
leaderboardexpanded-2
leaderboard-mobile-home
leaderboard2
leaderboard

Left: Displaying a dense amount of information, such as mulitple rounds for each player, proved to be a challenge on a mobile viewport. Horizontal scrolls and accordions were used to accommodate multiple statistics within a leaderboard structure.

GEAR / PROSHOP

The Gear and ProShop sections were designed to feel highly shoppable. This translated to large visuals and shoppable modules that recirculated products in the ProShop section.

Right: Large shoppable modules interspersed in articles allowed GOLF.com to increase its e-commerce sales.

shoppable
shoppablelive

OUTCOME

GOLF.com launched in May 2020. Not only did GOLF.com experience its highest ever user engagement metrics, but since the new redesign, GOLF.com has led its competitive set (e.g. all golf sites) every month in terms of audience size, unique visitors, traffic, and user engagement.

COLLABORATORS

Leon Farrant, Dongkyu Lee, Edgar Angel Gomez, Marc Cracco, Jason Bailey, Jaimie Geier, Sarah Ramanuj, Kevin Blanco, Stefan Kaltenegger, David Pflasterer, Rodrigo Ovares, Esteban Cairol, Kareem Taftaf, Thomas Sarek, Tom Royer, Aaron Miller, Sam Hernandez, Sebastian Zamora, Cristopher Sanchez