Advanced Search

Create a search tool that will empower users to find their perfect clubs

Project Date

August 2019 - Onwards

Role

UX & UI Design

 

Overview

The team

UI & UX Designer (me)
Front-End Developer
Project Manager

Key Stakeholders

Director of Digital Marketing
Director of E-commerce

Callaway Golf Pre-Owned (CGPO) is an e-commerce store which sells used golf equipment. With a loyal customer base, well-renowned quality and weekly promotions, CGPO is Callaway's biggest revenue generator year-on-year.

Golf clubs are customized to meet their original owner’s specs and fit when purchased new, which means the used inventory CGPO resells differs drastically in specifications even per model-type. Right now, users are only able to compare these specs in a side-by-side format within a product page for a particular model and not across multiples models filtered down based on their specific fitting needs.

The goal was to create a tool that could be used by customers to help filter down searches with their preferred specifications without necessarily being constrained to a particular model. We want to help users compare inventory more easily, dig deep into specifications and help them trust they’ve made the right purchasing decision. This tool will make users more likely to find the exact fit and type of golf club they’re looking for.

 

Project Objectives

After meeting with key stakeholders and discussing the product scope at length, I established three main objectives to ensure I kept on the right track through the research & design phase.

Create filtering UI

Design a clean and simplistic UI that allows users to easily filter down based on their individual requirements.

Empower customers

Give customers the ability to compare ‘spec-heavy’ product attributes and dig deeper into product available.

App-like mobile experience

Make a mobile-first experience that doesn't compromise on features and functionality of tool.

Discovery

Research + Testing Methods

User Metrics

Consider customer data and demographics and feed into personas.

Information Architecture

Organize filters and pages to help inform design phase.

Prototype Testing

Use inVision for operational and realistic run-throughs of the tool and gain stakeholder feedback.

Personas

Create user insights based on qualitative + quantitative data.

Competitor Analysis

Look at similar tools, consider what’s effective and applicable to our tool.

Exit Intent Survey

Set up exit intent survey for customers quick to bounce off of page.

 

 

IA: Filters

I mapped out each filter category and value that will be available per club type and defined what type of sorting option each would have, for example, whether they’re single or multi-select. This was to assist me when I started wireframing out the UI for the filters.

UX & UI

Filters

When you land on the page, all inventory loads in. Filters feature above the fold as a horizontal toolbar to give them more visibility and so users are encouraged to begin filtering down and refine their search.

Low fidelity: first iteration

High fidelity: Final iteration

 

On mobile, the filters are hidden until clicked and then open into a full-screen system which provides a more focused filtering experience. The search bar element remains visible of the main search page and stays docked at the top of the screen. This is again, to encourage some form of filtering when the user begins their search.

Every time a change or changes are made to the filters users have to confirm these changes. Manually saving vs automatically updating results was a big point of discussion between myself, the lead developer and VP of e-commerce. We felt that because of the significant amount of inventory, an auto-update feature would slow down and inhibit the experience. The ‘save changes’ functionality allows for users to select and choose multiple filters before reloading their results.

 

UX & UI

The Results Grid

The grid allows users to look at several results based on their search and compare the specifications having used the filters to refine their search. Fixing the row header as a user scrolls provides context on what column the user is on. The grid breaks into cards on mobile to avoid any horizontal scrolling. This is a cleaner way to present large amounts of data.

Low fidelity: First iteration

High fidelity: Final iteration

UX & UI

Quick View

Hovering over a club provides more information and a product image. On mobile, this is opened with a tap and shown in a full-screen experience optimized for smaller screens. Clicking on 'View full details' opens up the full product page where they can get more content like different product images, videos, and reviews.

Next Steps

The Advanced Search has the potential to let us learn far more about our customers' preferences. By integrating the tool with our personalization platform Dynamic Yield, we'd be able to provide better-tailored product recommendations based on previous searches.

When the Advanced Search is live, an exit-intent popup could help collect qualitative feedback that would allow us to refine and improve upon initial functionality.