Callaway Pre-Owned Advanced Search Tool

Create a search tool that empowers users to find their perfect golf clubs.

What I Did

Research, UX & UI Design,
Prototyping

Project Date

2020

A new way
to search

Callaway Golf Pre-Owned is an e-commerce store that sells used golf equipment. With a large and diverse inventory of pre-owned goods, we wanted to find a unique way to display its ever-changing inventory.

The goal was to create a tool that could be used by customers to help filter down searches with their preferred fitting & golfing specifications without necessarily being constrained to a particular product. We want to help users compare inventory more easily, dig deep into specifications and help them trust they’ve made the right purchasing decision.

laptop-mockup

 

Research &
planning

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 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.

Hotjar Feedback Poll/Survey
Set up on-page survey tab to gather feedback from users after launch.

research

Research methods

Filter down
your search

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 their search. On mobile, filters slide out for a more focused experienced.

filters_desktop
ezgif_com-video-to-gif_1

Filtering system

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.

wireframe-grid
wireframe-grid-m

Grid Designs - Wireframes

grid-adv-1
advanced_docked_bar_on_scroll

Grid Designs - High Fidelity

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.

product_preview_on_hover
quick_view_animation

Quick View Designs

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.

More Case Studies

OGIO E-Commerce StoreUI UX Design

Trade In! Trade Up!UI UX Design

OGIO Email TemplatesDesign & Development