Role
Golfshot hired me as their Product Design Manager to lead redesign efforts and improve experiences for a golfing GPS, scoring, and statistics mobile app and web platform.
Challenge
My team inherited a legacy product that was significantly lacking in usability, design, and utility. Golfers complained about poor GPS reception, clunky/difficult interfaces, and accessibilty issues while out on the course, leading to poor reviews and high abandon rates.
Process
After defining our KPI's, conducting legacy audits, and running usability testing, my team and I met with golfers to understand their needs, mindset, and behaviors, while drawing themes from their issues. We then ideated solutions via design sprints and brainstorming, prototyped against further usability testing and beta groups, and relaunched Golfshot for continual improvement.
Goals
User: Design and develop an on-course GPS solution that compliments a golfer's round, encourages scoring and sharing, and improves their game.
Business: Continuosly hit our KPI's, grow our premium offering subscription rates, and generate high monthly usage.
| KPI's | 2014 | 2017 |
|---|---|---|
| User base | 1.7 mil | 4.6 mil |
| Store ratings | 4.4/5 | 4.8/5 |
| Net Promoter Score | 37.1 | 51.6 |
| Rounds played | 13 mil | 94 mil |
| Renewal rate | 69% | 80% |
| Monthly active users | 89,000 | 212,000 |
Timeline
4 Years, March 2013 - June 2017
"I never thought of using my mobile phone for golf until Golfshot came along. It helped me find distances, recommended shots, and immediately made a difference in my game. As an older golfer myself, it taught this old dog some new tricks!"
User review
Define Product and UX Roadmap
Business and Guiding Principles
All teams met to discuss the future of Golfshot and form a business plan. We examined our legacy products and their current position in the market, using our findings to put together high level vision, mission, and product values.
KPI's
With consensus, we came up with key performance indicators to track outcomes:
- User base
- App store rating
- Net Promoter Score
- Rounds played
- Renewal rate
- Monthly active users
Define Goals
User: Design and develop an on-course GPS solution that compliments a golfer's round, encourages scoring and sharing, and improves their game.
Business: Continuosly hit our KPI's, grow our premium offering subscription rates, and generate high monthly usage.
Our Hypothesis
We then put together our hypothesis statement:
We believe better on and off-course experiences for golfers can be achieved by providing real-time GPS distances, automated scoring, tee time booking, course management and statistics tools that encourage and improve play.
Audit and Test Existing Products
Visual and Functional Auditing
Our plan led us to audit our current Golfshot mobile products. I took screenshots of each view, laid it all out, and began to note design inconsistencies, confusion points, and accessibility errors.
Field Testing and Q&A
I then held focus groups and field testing with users at local courses. Their feedback uncovered crucial issues and feature suggestions:
- Setting up the round and scoring holes took "forever"
- GPS distances were very slow to update when on the move
- The aerial course image wouldn't download correctly and glitch
- Sun brightness made the app difficult to read
- Club recommendations would really help with distances
- Auto-advancing to the next hole would be a hands-free experience
First visual audit of Golfshot app by section/flow, noting suggestions, features and functionality.
Learn and Understand from Golfers
Empathy Maps
After working directly with golfers, I pieced together empathy maps. This was crucial for me to understand who exactly we're solving for by highlighting their behaviors and mindsets.
Persona
More feedback from field testing, Q&A, reviews, and tracking metrics, led me to form a user persona:
Demographic
- Older (35-65 years old)
- 84% male, 16% female
- Social/casual golfers (1-4 times per month)
- Like-amateurs/competitors (5+ per month and tournament play)
Needs
- A GPS that displays distances
- Solves issue of not knowing how far distances are by eye/intuition
- Automates manual tasks to save time and uninterrupt playing
Behaviors
- Looking to improve some aspects of their game
- Constantly surveying for ideal distance/target
- Think 2 shots ahead
- Score to advance to the next hole
Define Their Problems
Existing Problems and Needs
We then began to extract negative feedback and also draw themes to isolate common problems. Findings:
- Golfers took a long time to setup a round. They'd have to navigate through 6+ different views before starting
- The app would display off-distances and be slow to update. If golfers moved quickly, like in a cart, distances would bounce all over
- Around this time, iPhone 4/5 didn't have adequate battery life to support a running GPS, and golfer's phones would die as early as mid round
- Club recommendations, advanced statistics, auto-advancing holes, and tee time booking were frequent asks
- Legacy Golfshot was dark-themed and hard to read in bright sunlight
- A lot of views had UI elements that weren't clear if they were actionable. Golfer's would frequently ask how to switch views and score
Come Up with Solutions
Team Brainstorms and Design Sprints
After identifying problems, we drew up scenarios, storyboards, and design sprints to generate ideas. This process was huge in determining solutions that are user-centric and feedback-driven.
Ideas and Solutions
- The GPS view needed familiar UI elements that revealed interactivity, a redesign for better at-glance data, and simplification based on feedback and data
- Reduce the amount of steps for setting up rounds and only have gofers complete what's required
- Golfers rarely scored holes because it was hard to access, so we needed to make it discoverable and more intuitive to use
- A big request was to have the app auto-navigate to the next hole, which provides a hands-free experience
- Few golfers shared their rounds because there wasn't a clear prompt to do so. We wanted this to be an integral part of the round end experience
- Redesign our Rounds and Statistics views to surface vital round data earlier while making data sets more interactive.
- Another request was tee time booking. With the help of GolfNow, we'd create a simple flow for golfers to find their course and book a tee time
- Golfers liked to learn about courses before playing them, so we needed a section that surfaced our course directory and data
Using information architecture to showcase app hierarchy and noting legacy features to be replaced with new, tested ones
Prototype and Design System
Information Architecture, Sketches, and Wireframes
I used information architecture to list out our new ideas and translate them into views. This was a crucial first step towards prototyping, as I spent some time ironing out how various elements will be accessed within the app.
Our solutions were dumped into paper sketches, whiteboarding sessions, and storyboards. After iterating with stakeholders and users, we designed our strongest candidates into wireframes.
Design System
In parallel, I started building our design system. We wanted to use this system to break down designs into their most basic elements to assemble views in various, but visually consistent ways. As I went a long, I documented elements and why/where to use them.
View Design System SpecPrototypes
Using Photoshop initially, then translating to Adobe XD with new design system components, we started crafting flows in high fidelity and sharing them with users and stakeholders for review and iterations.
View Mobile Prototype Example
Version 1 of iOS primary flows.
Apple Watch and Wearables
Discovery and Objectives
A coworker and I were invited to Apple's HQ in 2015. They were bringing teams together to demo their secret product, the Apple Watch. This fit our use case perfectly, as golfers used expensive 3rd party watches all the time to quickly glance at distances.
During our time there, we worked with the Watch hands on, drew up concepts, and walked away with a Watches to test and action items:
- Gain technical understanding of watchOS 1
- Design sprint and prototype
- Develop an alpha for user testing
Design, Development, and Test
After design sprinting and further testing, we set to work developing an alpha:
- Since Watch is tethered to your iPhone for all data, we'll need to make it clear to keep your iPhone with you for best accuracy
- Our app had to follow rigid design guidelines from Apple
- ince our persona was older (35-65), accessibility must be stressed. Large type, bright buttons, and simple interactions took priority.
After several reviews, we built our alpha for field testing. Our findings confirmed use cases, making iterations easier towards a beta.
User Testing and Iterationss
Betas and Feedback Loops
With mobile and wearable apps developing in parallel, we built and distributed betas for field testing with stakeholders, users, and interested parties from Apple and Google. Findings and themes began to funnel in:
- Scoring felt much more intuitive and fast
- Watch GPS was unreliable and would freeze often, especially when further away from iPhone
- GPS distances diplayed next to aerial imagery saved time from going back and forth between views
- The light theme UI was much easier to read in bright sunlight
- Sharing statistics and scorecards after rounds was more obvious and adopted
Rolling NPS and Satisfaction Scores
After rounds of testing, we setup rolling NPS metrics to monitor feature-level satisfaction. We noticed the UX improved and KPI's were being met.
Improving
Each beta release led to small improvements and once our final beta was shipped, we prepared the app for launch.
The Outcome
Summary
Golfshot was relaunched Summer of 2016 for iOS/Android in 12 different languages across the globe. It received high adoption, ratings, satisfaction, and praise. One of my favorite reviews was it "taught an old dog new tricks."
We continued to address feedback going into the high golf season and made some important adjustments during off season. Prior to my departure from the company in 2019, I put together a lean product brief for handoff.
| KPI's | 2014 | 2017 |
|---|---|---|
| User base | 1.7 mil | 4.6 mil |
| Store ratings | 4.4/5 | 4.8/5 |
| Net Promoter Score | 37.1 | 51.6 |
| Rounds played | 13 mil | 94 mil |
| Renewal rate | 69% | 80% |
| Monthly active users | 89,000 | 212,000 |
View on App Store
View on Google Play
Audit Existing Products and Form Strategy
Discovery
In parallel with mobile, we needed to solve for our websites. Golfshot.com was our legacy site for user's scorecards, statistics, equipment, and profile settings. Shotzoom.com was an initiative to merge all our family of apps into one central user portal, but was stalled halfway. Given this, we decided to update golfshot.com
Site Auditing
I dug into golfshot.com to perform visual and feature audits. The site was outdated and pages took a long time to load, if they did at all. I then composed a simple site map to keep track of information architecture.
Long-Term Strategy
We wanted to balance our web-side products with mobile-side. Since the Golfshot mobile app was a tool for users to gather on-course data, we hypothesized that web would just be used for viewing and managing said data.
User Feedback and Market Research
Reviews and Feedback
We held several rounds of user surveys to gather feedback. Findings:
- Viewing statistics and past rounds were highly favorable
- Golfers wanted advanced statistics and robust course information
- Managing friends and equipment were not as popular
- Golfers used Facebook to share rounds instead of within golfshot.com
- Handicap tracking, a better course directory, and leaderboards were the most requested
Market and Design Research
I also created accounts with other online golf competitors for research. We learned that the PGA, GolfLogix, Swing by Swing, Hole19, and The Grint all displayed user statistics and course information primarily, while backgrounding friending, reviews, and commenting.
Learn and Understand from Golfers
Empathy Maps
With further feedback, I put together empathy maps of golfers off-course. Since the Golfshot app was used as a tool on-course, golfshot.com had a similar, but varying use case and behavior.
Persona
From reviews and site metrics, and in parallel with examining mobile app usage, we put together our target persona for web:
Demographic
- Older (35-65 years old)
- 84% male, 16% female
- Social/casual golfers (1-4 times per month)
- Like-amateurs/competitors (5+ per month and tournament play)
Needs
- Robust statistics, round history, and course directory
- Tools for easy comparison and external sharing
- Handicap tracking and ranking for competitive play
Behaviors
- Looking to improve some aspects of their game
- Sharing scorecards and bragging with friends
- Browse pro golfer leaderboards and statistics online
Define Their Problems
Existing Problems and Needs
We then started drawing themes to highlight core issues with the site. Findings:
- Courses were outdated and held stale information. Golfers would refer to the PGA and local course sites as being better with course information and statistics
- We displayed user's basic statistics, but even the mobile app displayed more. Comparitive analysis, historic charts/line graphs, and head-to-head viewing with playing partners were all asks
- Golfshot.com was outdated and needed a refactor. Long loading times for power users, white-screening, and server errors occurred often
- The site's design also needed a rethink. Golfers would find searching for old scorecards, updating account info, and sharing data particularly difficult
Come Up with Solutions
Converging and Brainstorm
From these themes, the course directory, statistics, and profile management sections of golfshot.com would be our focus. The web team and I held brainstorming sessions and design sprints to uncover ideas.
Solutions and Focus
I then drafted documentation highlighting our proposed solutions for an MVP and looped in stakeholders:
- Redesign our courses pages to emphasize scorecards, statistics, ratings, and leaderboards. This would give golfers get a full view of courses they'd want to play
- Merge all our scattered user statistics and profile pages under one roof so users don't have to search for their own data
- Revamp user scorecards pages and make it more end-to-end. Instead of just one static scorecard, show round statistics, equipment used, and commenting boxes
Sketch, Prototype, and Design System
Information Architecture, Sketching, and Wireframes
We then composed new information architecture. My original site maps made this process much easier as I sketched UI, flows, and diagrams. Our strongest candidates were translated into wireframes for stakeholder review.
Form Design System
Similarly with mobile, I built our web design system, breaking down designs into their most basic elements and using them to assemble views in various, but visually consistent ways. As I went a long, I documented elements and why/where to use them.
View Design System SpecPrototypes
Using Photoshop initially, then translating to Adobe XD with new design system components, we started crafting flows in high fidelity and sharing them with users and stakeholders for review and iterations.
View Web Prototype Example
Version 4 of the designs.
User Testing and Iterationss
Staging Updates and Feedback
Working with web team to address bugs, we set up a round of user testing with our staging site. After compiling results, our findings were positive with room to improve:
- New all-in-one profile view is much easier to navigate and understand
- The Overview tab wasn't as helpful
- Statistics and history views were nice but were slow to load
- Round sharing functionality was simple for social media posting
- Account and settings were more helpful, especially with displaying subscriptions
Improving
With continuous feedback, we made significant strides in a short amount of time. After improving the UX, fixing bugs, optimizing the platform, and applying our new system, golfshot.com felt like a completely new and revamped site.
The Outcome
We relaunched golfshot.com in early 2016 and continued to learn from feedback to iterate. Golfers enjoyed using it as a tool to view their progress, upcoming courses, and sharing info with their playing partners. Ultimately, it saw increased retention, traffic, and post-round adoption.
| KPI's | 2014 | 2017 |
|---|---|---|
| User base | 1.7 mil | 4.6 mil |
| Store ratings | 4.4/5 | 4.8/5 |
| Net Promoter Score | 37.1 | 51.6 |
| Rounds played | 13 mil | 94 mil |
| Renewal rate | 69% | 80% |
| Monthly active users | 89,000 | 212,000 |
Changes and Direction
Discovery
I wanted to learn about the original branding and how we can continue to evolve it. In 2013, skeuomorphism design was prominent. Deep color hues, darker shadows, reflections, gradients, and Helvetica were prevelant, especially in the tech.
Industry Changes
However, skeuomorphism had its days numbered. Industry titans Apple and Google were setting the new standard of product design with iOS7 and Material Design. Just over the course of a few months, tech companies immediately set to work changing up their brand and redesigning products.
New Direction
Golfshot was falling behind this industry design resurgance. However in 2014, I had a clean slate to evaluate our brand design and evolve it:
- Redesign our logo
- Reevaluate our golfer statistics and data visualization styles
- Revamp our design language
- Form a branding system
Define Design Language
Colors
We iterated on a new, brighter color palette that sat well with lighter themes. My original strategy was to have two sets of the same palettes but with different tints:
- Mobile apps: Brighter colors for better accessibility
- Web and email: Dimmed colors for user profile site, marketing site, and email campaigns
Typography
Switching to a new font took a lot of research, especially with accessibility with our older persona. I originally went with Tablet Gothic because of its modern look but subtle creative personality. It was legible, flexible, bold, and easy to read.
Iconography
I couldn't find an icon family to work with, so I decided to design ours from scratch. Everything from on-course app usage, to marketing application, I design icons for. Over time, I group for our evolving design system.
View Design System Spec
Refine Logo and Mark
Strategy
The "Golfshot" logo and mark had very strong brand recognition. We wanted to approach this logo conservatively and adapt it for a more modern design aesthetic and appeal.
Cleaning Up
Originally, I put together concepts that departed from its original feel. Over time we learned that users had grown attached to our legacy branding but would note that it "needs cleaning up". I took this feedback and came up with new versions.
Digitize and Refine
After sketching and prototyping, I took our strongest candidate and vectorized it. After sharing it around the office and with a handful of power users, the new logo was a hit and captured exactly what we were looking for with a fresh, modern take on an older mark.
Final logo up against the original.
Evolve to a Brand System
Application and Guides
With an updated logo and design language, I put together a brand usage guide. We then started applying it to our suite of digital and physical products. Mobile apps, websites, emails, advertising, swag, and social media all got a facelift with our new logo, color palettes, typography, and icons.
View Original Brand GuideEvolution Over Time
With our mobile apps and website revamp on the horizon in 2016, I decided to evolve our brand into a system. By compartmentalizing design elements for a system, we'd reuse them for a whole range of user-facing products.
View Design System SpecNew Styles and Metaphors
Our brand was evolving, and by changing our design language slightly, it made a big impact on our digital presense. We looked modern, fresh, and "edgy" for our persona and it reflected well. I came up with a series of design metaphors for our marketing outreach, like overlaying elements and rendering data in a physical space, to help us relate more with how golfers track their progress.
The Outcome
The Golfshot brand system took on a whole new role, as we continued to evolve and apply it with new product releases. Everything became more visually distinct, and after years of experimenting, versions, and tweaking, we finally looked like an A+ brand that golfers could relate too. Marketing sites, emails, ad campaigns, and physical goods all looked like they belonged to the same brand family.
View SiteView Brand Guide
View Design System Spec
