UX & UI Design

nFlight Web

Overview

How might we update the currrent nFlight Web fitting experience to eliminate confusion points around how users should complete the process? In addition, how might we make this updated version mobile-friendly?

Objectives

Business
Direct more customers to fitting facilities to finish the PING fitting process and order clubs.
Users
Decrease abandonment rate of nFlight Web by creating an experience that walks users through the process step-by-step, with no confusion around what they need to do to get a web fit recommendation for clubs.

Background & Assumptions

The idea behind nFlight Web was that customers could walk through this process before going to a golf fitting shop to get fit. It would serve as a starting point for fitters when helping a new customer. The website currently had high abandonment rates. The thought was that improving the experience would lead to more customer use of the site and more potential fittings at fitting centers where clubs could be purchased. 

Original UI (Ex:Driver Fitting & Recommendatio)

Requirements

– Clarify order and steps required
– Create modifications for mobile version of the site

Additional Considerations

Some club questions are dependent on answers to other club questions. Ex: You cannot answer Hybrid & Crossover questions until you complete the Driver and Iron sections. At first glance it seemed as if a user could get fit for any club (by selecting a botton navigation button), but if they did so out of order they would receive the following error messages.

Error Messages Users Would Experience if They Clicked Out of Order

Solution

My solution involved some key changes.
Implementation of a Progress Bar
A progress bar was added so that customers knew exactly where they were in the web fitting process. It allowed users to navigate backward if necessary and understand how far they were from their recommendation. 
Addition of Select Club Step
A step for selecting clubs was added, so customers could select exactly what clubs they wanted to be fit for and could see any dependencies that existed. This would allow them to avoid unexpected error messages later, as seen in the previous version of the website.

Guided Progression of the Get Fit Now Step 
A number was added next to the club type, so users knew how many they selected to get recommendations for. In addition, at the end of each club type’s questions there was a button to go to the “Next Club.” This ensured that customers knew what to expect after answering all displayed questions and clicking the button to advance.