CGPO Restructure & Design System

Oct 2024 - Dec 2024

TLDR: During the Callaway Golf Preowned (CGPO) CMS migration, I led a complete redesign to address hidden shopping options, inconsistent design, and broken user flows. The goal is to transform the site into a user-friendly, modern marketplace that aligns with both customer needs and business goals.

+16%

ATC CR

(Phase 1)

3 mo

From start to

hand off

12+

A/B Tests

Compiled

50+

Redesigned

Components

View Details Skip To Results

Involvement: I led the design system creation, reorganized shopping options and content, handled partial front-end development, and set up A/B tests. My role also included conducting research, presenting findings and strategies, prototyping, wireframing, and collaborating with stakeholders to ensure alignment and success.

1. Overview

The Callaway Preowned website had become a confusing shopping experience with outdated designs and hard-to-find features. As the design manager, I was trusted to take charge of this challenge. The project came at a perfect time—a CMS migration presented a rare opportunity to not just fix issues, but to completely reimagine the website. This wasn’t just about technical fixes—it was an adventure requiring a clear vision, teamwork, and strong leadership.

The role involved collaborating with stakeholders, developers, and designers to bring their perspectives together into a clear, actionable plan. The CMS migration gave us the freedom to create something better, not just replicate the old. We weren’t just fixing a website; we were crafting a user-friendly marketplace that reflected Callaway’s legacy and its future aspirations.

Business Goals

Boost conversion rates by simplifying and improving the shopping experience.
Reinforce CGPO’s reputation as a trusted marketplace for certified preowned clubs.
Educate users about tools, programs, and other value-added features.

User Goals

Ensure navigation is intuitive and enjoyable with diverse browsing options.
Build trust by clearly communicating product condition and quality.
Simplify decision-making with tools and guides, especially for new golfers.

2. Research

The journey began by diving deep into the challenges faced by both our users and the business. I took the lead, scheduling a meeting with the Consumer Insight Manager to review recorded surveys and complaints about the website experience. Together, we analyzed 330 user surveys to uncover key pain points.

Beyond the data, I rallied the merchandising team and partnered with a UX strategist for workshops that combined user insights with a competitor analysis. By fostering an open environment for brainstorming, we turned scattered observations into a clear, unified understanding of the problems we needed to solve.

Assumptions

Users prioritize ease of navigation and personalized recommendations over generic browsing options.
Customers prefer varied navigation choices, such as "Shop by Player Type," "Brand," or "Family," rather than being directed to generic PLPs.

*The current page design mirrors the main club types from the navigation but lacks diversity, simply repeating the same links in different formats

Methodologies

User Feedback Analysis: Reviewed 330 customer complaints and feedback through Qualtrics to uncover recurring pain points, such as filter usability and unclear product conditions.
Competitor Research: Examined competitor navigation structures, trust signals, and value-add features to identify opportunities for CGPO to differentiate itself.
Contentsquare Heatmaps & Analytics: Analyzed user behavior and conversion funnels to detect navigation bottlenecks and areas of high engagement.

*Competitor Research findings

3. Findings and Proposals

My first step was to bring stakeholders together around a shared vision. I facilitated strategy workshops, ensuring that every voice—from designers to business leaders—was heard. These sessions, combined with research findings and team brainstorming, revealed three key areas for improvement. This collaborative effort resulted in a clear roadmap that aligned user needs with Callaway’s business goals and set the stage for a seamless, intuitive shopping experience.

Cluttered interface design

❌ 13% of website experience complaints highlighted an overwhelming homepage and unclear shopping paths.

❌ Hidden or confusing shopping options.

❌ Difficulty navigating using a mobile device

✅ Proposed solutions:

Simplify navigation with pathways like Shop by Brand, Player Type, and Club Family.
Develop a Club Finder Assistant tool for personalized recommendations based on user preferences and skill levels.
Focus on mobile-first design, as 60% of users navigate via mobile devices.

*A preview of the Club Finder Assistant and Its different shopping paths

Trust-Building Features

❌ Lack of company reviews and clear information about the club's condition.

❌ 15% of complaints expressed confusion about product quality and purchase security.

✅ Proposed solutions:

Display certifications, warranty details, and customer reviews prominently across the site.
Highlight unique offerings such as Why Buy Certified Preowned, Free Shipping over $199, and Rewards Programs
Add tooltips and notes on product page grids to inform users about their options.
Provide resources like a Condition Guide, Payment Options, and Fitting Guides to support informed decision-making.

*New Module Designs

Difficulty Using Filters and Search

❌ Not very beginner friendly.

❌ Filters can get confusing and hard to use. Selections do not carry over to product pages.

❌ 14% of complaints indicated confusion with filters and challenges in finding specific clubs.

✅ Proposed solutions:

Improve filter usability by adding descriptive labels and 3D renderings for product models.
Link product pages directly to Condition Guides and include concise descriptions for models.
Optimize Advanced Search to deliver more accurate and intuitive results.

*Advanced Search Test Design

4. Strategy

I led meetings with all stakeholders through a structured process of ideation, user path mapping, prototyping, and testing. Starting with sketches and wireframes, we built a strong foundation that allowed us to move forward with confidence.

For the design system implementation, I collaborated closely with interactive designers to create accessible and scalable components. To ensure our decisions were well-founded, we used A/B testing results from both new designs and tests from other brands across various pages. This data-driven approach offered valuable insights, guiding our iterative improvements and ensuring our solutions were effective.

Information Re-architecture

Restructured content and navigation to improve usability and enhance product discovery:

Content Buckets Discovery: Organized content into four categories:
1. Guide Browsing: Filters and shop-by options.
2. Secondary Offers: Trade-ins and secondary categories.
3. Decision Support: Guides and easy payment options.
4. Trust-Building/Perks: Rewards programs and customer reviews.
Improved Content Hierarchy: Prioritized key information, such as product conditions and trust signals, for faster decision-making.

*Content Buckets

Wireframing

Wireframes outlined the structure, content hierarchy, and navigation flow, serving as a foundation for the redesign:

Low-Fidelity Wireframes: Quickly visualized layout concepts, focusing on user flows without the distraction of visual details.
Iterative Development: Reviewed wireframes with key stakeholders, including UX and merchandising teams, to refine the structure and ensure alignment with business and user objectives. Validated assumptions during subsequent A/B testing campaigns.

Design System

The redesign required a cohesive and modern visual identity to reinforce CGPO’s dual role as a brand and marketplace:

Unified Look and Feel: Established consistency in design elements to enhance brand identity.
Reusable Components: Accelerated design and development processes with predefined guidelines and reusable assets.
Accessibility-Driven Design: Ensured the system adhered to accessibility standards (e.g., WCAG) to make the site inclusive for all users, including those with disabilities.
Scalability: Maintained visual and functional consistency to support future feature expansion

To inform decisions and inspire solutions, the following resources were used:

Baymard Benchmark Analysis: Compared CGPO’s design and performance against e-commerce best practices.
Practical UI by Adham Dannaway: Adopted a logic-driven approach to create intuitive, accessible, and visually appealing interfaces.

Typography:

Icons and Imagery:

Components:

5. Prototype & Testing

Once we got the green light from the strategy planning phase, I rallied my team to develop interactive prototypes that brought our proposed designs to life. These prototypes weren’t just static visuals; they allowed stakeholders to actively engage with our ideas and experience the potential of the redesign firsthand. This step was pivotal in building excitement and gaining alignment across all teams.

Once prototypes were approved, we met one more time with all stakeholders to finalize a detailed roadmap and plan the necessary tests that my team and I would manage. This ensured everything was thoroughly validated before handing over the final assets to the contractors for a full site implementation.

High-Fidelity Wireframes & Prototype

The high-fidelity prototype brought the CGPO redesign to life, incorporating detailed visual design elements from the UI kit.

Advanced Search & Filtering Tools: Fully functional and redesigned for clarity, reducing friction in product discovery.
Modular Homepage Sections: Introduced flexible sections, including Shop by Brand, Player Type, and Sales/Deals.
Embedded Trust Signals: Highlighted features like Why Buy Certified and Customer Reviews to build confidence.

Roadmap and Testing

Phase 1 - Advanced Search Q4/24:
Test grid visual updates and improve layouts on the highest-value page.
Phase 2: Home Page Q1/25:
Update styling, test mobile layouts, and hand off assets to CMS contractors.
Phase 3 - Club Finder Assistant Q1/25:
Introducing a guided shopping experience with presorted pages, family listings, advanced filters, and category pages.
Phase 4 - Helping Guides Q2/25:
Simplify guides and add tooltips for better usability.
Phase 5 - Full Implementation END OF Q2/25:
Complete contractor work with all updates and redesigns.
Phase 6 - Next Steps:
Reevaluate results, explore new modules, and enhance SEO with supportive content.

•Fitting Guide Graphics

6. Results

One key takeaway was the transformative power of early stakeholder alignment. By involving everyone from the beginning, we minimized roadblocks and fostered a shared sense of ownership across teams. I mostly enjoyed the value of iterative design—constantly validating concepts at each stage and staying open to changes when necessary.

However, one thing I wish we could have done more of was user live testing. Due to the urgency of the project and tight contractor timelines, we weren’t able to incorporate as much direct user feedback as I would have liked. Despite this, cross-functional collaboration proved to be the greatest asset, demonstrating that the best solutions emerge when diverse perspectives unite to tackle challenges and deliver results on time.

Test Progress

Phase 1 - Advanced Search LIVE 10/24:
Our highest-value tool with a low conversion rate improved ATC conversion by 16%. View Test Results
Phase 2: Home Page LIVE 12/24:
Most updates were swiftly implemented due to proven success from testing on Callaway's main brand. The Tabbed Experience significantly boosted engagement and ATC conversion, driving a confident rollout. Upcoming tests will focus on new shopping options like “Shop by Family” and “Shop by Brand,” along with optimizing tile layouts for mobile and desktop.
Phase 3 - Club Finder Assistant TESTING Q1/25:
Waiting for a few other tests to be completed before fully launching it. Take a Peak

Explore The New Home Page

Explore the home page differences between the old and the new experience with an interactive side-by-side view. Dive deeper into the new design by toggling through detailed notes and insights. You can also view these live updates now at CallawayGolfPreowned.com.

2024

2025

More Views

Click to view other pages and their new look and feel

Explore More UX/UI Projects