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.
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.
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:
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 THIS MEANT:
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.
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.
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.
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.
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.
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.
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.
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