Role
During my time as Product Design Manager for Golfshot, we partnered with popular golf instruction company Revolution Golf to create a video library and spin-off app, Golfplan. My team and I wanted to pursue this opportunity and build a new product that helped players learn golf remotely.
Challenge
This was our first direct partnership that set high expectations and goals for a product. We needed to research, build, and monetize a video instruction app that competeted with a crowded market of freemium services, like Youtube, Golf Digest, etc.
Process
With consensus over goals, conducting market anaylsis, and forming a hyphothesis, I met with golfers and did research to refine our persona and define current problems. I then prototyped mobile and Apple TV apps, did usability testing, iterated, got partnership approval, and released Golfplan for continual improvement.
Goals
User: Design and develop a video instruction app that compliments a golfer's style and improves various aspects of their game.
Business: Grow product adoption and generate high monthly viewership.
Timeline
8 Months, February – October 2016
"These are some of the best instructors I've heard or seen. For me there isn't a close second...there's something about the simplicity of this video platform, breaking it down into something small, the clarity of explanation."
User review
Discovery
Business & Partnership Constraints
I worked closely with Revolution Golf to come up with high level business needs, requirements, and goals for the app. Aspects include:
- Free, pro, and long-form subscription tiers, each unlocking premium content
- Videos to be streamed directly through the app
- Push notifications notifying users of new videos
- Recommend and cater content depending on golfers skill level
- Ability to rate and review for continuous improvement
Goals
User: Design and develop a video instruction app that compliments a golfer's style and improves various aspects of their game.
Business: Grow product adoption and generate high monthly viewership.
Market Analysis
I then compiled data from other video delivery products in the market. This helped us learn more about the position, design, and audience of various offerings. Findings:
- Most apps are subscription based
- Video libraries are organized by expert and opinion, but not by category nor skill type
- Most videos are under 5 minutes long but don't include summaries or bullets
- Conventional training is very dedicated and time-consuming, so golfers look to pre-made videos as an alternative
Understand and Learn from Golfers
Persona
I then leveraged our persona and feedback work from both parent app Golfshot and Revolution Golf to get a clearer snapshot of our users and their needs:
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
- Short and concise golf instruction
- Curated, recommended, and customized tips and drills
Behaviors
- Looking to improve some aspects of their game
- Finding free golf videos and tips from Youtube/Vimeo
- Purchasing expensive training from golf instructors
Problems
I then identified potential pain points:
- Scattered, uncentralized videos and resources
- Formal training is very expensive
- Time-consuming
Golfplan information architecture.
Prototyping
Sketches and Wireframes
I set to work coming up with visual concepts and rapidly prototyping against them. Some key aspects we focused on while I sketched:
- Surface ways to access and view content, like categories and their subcategories
- Make video summaries and bullets easy to digest
- Clearly differentiate free vs. premium content
- Allow users to create their own libraries via favoriting
- Put a review system in place that's prominent but not obtrusive
High Fidelity Prototypes and Flows
Using our existing Golfshot design system, I desinged protoypes with existing components and patterns. This drastically reduced design time and made iteration and initial feedback loops with users and stakeholders more efficient.
iPhone UI Version 1 for Golfplan.
User Testing and Iterate
Beta Testing
After iterations and development, we built our first prototype and sent it out to a handful of internal stakeholders and users for a first round of testing. Findings:
- Main categories view felt plain and uninviting
- Need clearer visual indication that summaries are hidden and can be viewed
- Touch target for favoriting a video was too small
- The "Done" button was hard to find at first in the rating flow, also auto-selecting "Yes" was confusing
- Content and questions for recommending content were vague and users need ability to rank aspects of their game 1-5
Iteration
For this next round of iteration, I strived to improve the video summaries and initiating UX as much as possible, seeing that was the primary way for users to view content. We redesigned the main video cells to make it more obvious that content was expandable and tappable, while improving the content and visual design throughout. Findings:
- Added imagery is much more golf-centric and pops
- Much easier to view and start videos with the larger play button
- Favoriting was simpler to reach
- Moving the "Done" button below the questions was easier to scan and making the "Yes"/"No" optional was logical here
- First questions are better and the 1-5 scale matrix was simple to use
The Outcome
After this last round of testing and gaining approval from all stakeholders in both parties, we launched Golfplan as an extension of Golfshot on iPhone and iPad and continued to improve and support it through peak golf season.
View Site
View on App Store
Technical Onboarding and Ideation
Strategy and Brainstorm
I started working on our Apple TV app. Apple was pushing it's TV model as a new standard for content consumption while allowing for native development. We had some decisions to make on how to approach this evolving product:
- Should it be built natively (more complex but in our domain) or with Apple's TVML language and templates (easier but less control over design)?
- Since this is a unique product, do we allow for more or less features or should it be kept in parallel with iPhone/iPad?
- How do we evolve our design system to fit this larger form factor, but also prioritizing accessibility for our persona (older, not as technical)?
Direction and Design Goals
We set up spikes for the platform/features and discovered that using TVML while keeping the features in parallel with its sister Mobile Apps were best for our MVP. After drawing inspiration from other TV apps and breaking out designs from our Mobile Apps, ideas started to emerge:
- Surface and prioritize a "Continue Watching" section, similar to Netflix or Hulu
- Use the 2 and 3-column grid template to emphasize our main categories
- Use the template's light theme vs. dark theme
- Have horizontally scrolling content be hinted off screen
- Actions should be focused and singluar since the user is manipulating the UI with a remote and one button
- Increase our typography and brighten our color palette for better viewing and accessibility.
Prototyping
Sketches and Wireframes
In combination of having our iPhone/iPad designs and flows stubbed out and using a TVML layout/template provided by Apple, sketching this UI was simple and required less low-fidelity iterations.
High Fidelity Prototypes and Flows
Translating our designs for a TV interface required a much more careful and thoughtout approach than anticipated. Since users were restricted to using a remote with minimal buttons and our demographic demanded larger elements for better viewing, our initial layout and typographical treatments went through several rounds of in-person and image-on-screen testing.
User Testing and Iterate
Internal Testing
User testing was difficult with Apple TV because a beta program wasn't quite set up for it yet. To get feedback, we tested the app on our office TV's as well as sending our test Apple TV unit to several of our coworker's homes for testing on various formats. Findings:
- Some of the paragraphs and disclaimers were hard to view from a distance
- It was difficult to tell which elements were selected or not
- The virtual keyboard was hard to use and took too long to type entries
- Having all subcategories in a grid took too long to scan/scroll
Iteration
After a couple weeks of gathering feedback, I made the visual adjustments to the UI.
Second Round Findings
- Switching the typeface from Regular to Medium and increasing its size was easier to read
- Brightening the select color blue and making the element larger helped
- Unfortunately, the search and keyboard is provided by the TVML template and can't be adjusted
- Moving these subcategories to just one vertically scrolling list made it easier to find what I was looking for
The Outcome
Once these tweaks were made, we shipped our first Apple TV app.
View Site
View on App Store
