Create a search tool that will empower users to find their perfect clubs
August 2019 - Onwards
UX & UI Design
UI & UX Designer (me)
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.
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.
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.
Research + Testing Methods
Consider customer data and demographics and feed into personas.
Organize filters and pages to help inform design phase.
Use inVision for operational and realistic run-throughs of the tool and gain stakeholder feedback.
Create user insights based on qualitative + quantitative data.
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.
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
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
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.
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.