PGA Tour - AR

UI/UX Design

B2C

Web

Mobile

Design Systems

Research

Accessibility

Overview
What is PGA Tour AR?
PGA tour came to us at POSSIBLE Mobile to design the first augmented reality app for a major sports league, specifically for iPhone using AR Kit. It presents AR content to users both on-course at live tournaments and off-course at home on any flat surface.
Opportunities & Challenges
PGA Tour wanted to branch off of their primary iOS & Android apps into an AR specific app. This was the first of its kind, so the project required considerable research and development along with the establishment of platform specific patterns, I also expanded my 3D modeling skills to meet the project demands.
My Role
Lead UI/UX designer from conception to hi-fi design to app shipment.
Team
Me (Lead Designer), a 2nd designer, Project Manager, Lead Developer, 2nd Developer.
My Process
We kicked off the project with the PGA stakeholders in a discovery session to understand their business goals, KPIs, and overall vision using primarily on-site white-boarding. Next I dove into research on Apple's AR interface guidelines and the technical limitations of ARKit for iOS, a brand new framework at the time. I also downloaded and tested numerous AR apps to understand what's possible and analyze the competitors.

Next, I compiled the discovery and research to inform my creation of the user flow diagram (as shown in the image above), created in collaboration with the stakeholders. This highlighted the navigation, structure, ancillary views, and each of the major sections of the On-Course and Off-Course experiences. From there I transitioned these into black+white wireframes in Sketch, and presented them to the stakeholders. Once approved, I created the major app components in Sketch and used them as building blocks for the hi-fi UI mockups. These were then uploaded to InVision to create tap-through prototypes.
From there I modeled and textured 3D assets such as the ball+tee, shot arcs, and course holes in Cinema 4D, and then animated them using Adobe After Effects. Animation videos informed our developers and provided great promo material. Next I exported and handed off the assets to our engineers in conjunction with style guides (composed with InVision. After an alpha version was developed, the team and I traveled on-site to Pebble Beach to user test the first on-course AR experience. We uncovered product needs and then iteratively improved the UX/UI and functionality in close collaboration with the devs.
Final UI - On-Course
Final UI - Off-Course
Results