TLDR: Redesigned the "Trade-In Trade-Up" experience to simplify user flows, align with user needs, and enhance customer engagement. The project redefined how customers evaluate and exchange equipment, preparing it for future scalability.
Faster
experience
From start to
hand off
*Partially live. The full experience, including the search keyword feature, is set to launch in 2025.Involvement: I reevaluated user flows to improve simplicity and clarity, conducted competitor analysis to uncover industry best practices, and designed prototypes with refreshed styles for visual and functional consistency. The finalized redesign was seamlessly handed off to the development team for implementation.
The Trade-In Trade-Up experience faced significant challenges, including confusing navigation, outdated design elements, and unclear upgrade paths, leading to user frustration and reduced engagement. A lack of trade-in transparency further eroded user trust and conversion rates.
To address these gaps, I was tasked with leading the design efforts as part of the first CMS migration, allowing us to fully utilize contractor resources. My approach focused on reevaluating user flows to simplify the experience, conducting competitor analyses to uncover best practices, and refreshing design styles to align with modern standards.
*Before Redesign: The outdated start screenI conducted extensive research into leading trade-in programs, analyzing industry standards, user experiences, and innovative approaches. This included a comprehensive competitor analysis, examining how top programs utilize features like real-time calculators, step-by-step guides, and sustainability messaging to engage users. The deep dive also explored workflows and communication strategies, identifying areas where our experience could stand out.
*Examining the good, the bad, the standout ideas, and the pitfalls to avoid.Users faced several challenges with the trade-in process. Navigation was unclear, requiring multiple pages and slow, full-page reloads, which disrupted the flow. Key issues included non-clickable images and product names, no visual indicators for editing selections, and poor confirmation that items were added to the cart. There was also no information about trade bonus credits, leaving users confused.
Additionally, users had to scroll through lists without visual cues and interact with irrelevant sections, even when there was only one option to choose from. These problems made the process frustrating and emphasized the need for a clearer, more user-friendly design.
*Unsorted lists, no search, and club previews only on hover—if you didn’t know your club’s name, you were kinda out of luck.Key improvements included visual cues and hierarchy to guide users, making the experience accessible directly from the cart and footer with a quick popup modal instead of redirecting to a new page. We also redesigned interactions to eliminate page reloads, leveraging JSON calls for seamless updates and a smoother user experience.
To further streamline the process, we introduced a search feature that allowed users to quickly locate products, skipping up to three steps. Additionally, we implemented full card interactivity with enhanced imagery for faster product identification. Clear confirmation messages and next steps provided immediate feedback, ensuring transparency and confidence throughout the journey.
These initial low-fidelity wireframes emphasized creating a logical and seamless flow from trade-in valuation to checkout, ensuring the journey was both intuitive and satisfying. By prioritizing structure over visuals, we were able to refine user interactions and address pain points early in the process. Collaboration with the Digital Manager ensured alignment with business goals, while insights from the UX Data Analyst helped us validate decisions with data-driven feedback, leading to a more user-centric design.
The high-fidelity prototypes brought the vision to life, integrating refreshed design styles and dynamic interactions that enhanced the user experience. Developed under a tight timeline, the prototypes were the result of close collaboration with the front-end team, contractors, and stakeholders to ensure seamless integration into the CMS migration.
Key features included dynamic data updates, interactive full-card elements, and optimized workflows designed to reduce friction. Usability testing validated these refinements, showing increased user satisfaction, fewer drop-offs, and significant time savings, with the new experience being nearly twice as fast as the previous iteration.
⬅️ Test the prototype or view it live
The redesign replaced the clunky navigation and limited functionality of the old experience with a streamlined, intuitive interface. The videos below showcase the improved user journey, highlighting faster navigation, simplified workflows, and dynamic features that enhance engagement. The new design reflects a user-first approach, solving previous pain points and delivering a more efficient, satisfying trade-in process.
⚠️ Lack of accessibility and clear direction when items are clicked or added to the cart.
⚠️ 0:03 Multiple pages to navigate before starting the trade-in process.
⚠️ 0:17 Page reloads after every selection, disrupting the flow.
⚠️ 0:24 No mouse indicator or way to signal that selections can be changed.
⚠️ 0:40 Forced hover required to view and compare clubs.
⚠️ 0:45 Only the price is clickable—images and product names are not interactive.
⚠️ 0:47 Customers frequently struggled to identify added items due to the lack of confirmation messages; instead, page reloads moved the item to the right with no visual clarity.
✅ Visual cues, hierarchy, and indicators enhance navigation.
✅ 0:03 Quick modal explaining how it works, making it easy to start the trade-in process.
✅ 0:06 Seamless interaction—no page reloads. Data updates dynamically on the right panel.
✅ 0:14 Easy to edit selections or start over.
✅ 0:14 Full card interactivity
✅ 0:20 Product imagery added, allowing users to identify their clubs faster.
✅ 0:31 A confirmation message and next steps are displayed clearly after each action