Team Size - 3 [1 Design & 2 Developers]
Team: Self, Rob Berryhill, Barrett Mize
Platform - Web-Shopify
Tool Stack - Figma, Shopify, Surveys, A/B Tests, Hotjar, GA
Timeline - <4 Weeks
When I first arrived at The Adventure Challenge, or 'TAC' as we called it internally, the company presented tremendous opportunity for optimization and growth in its primary revenue stream. The DTC eCommerce site housed on Shopify grossed $200k per month in the off-season and up to $4M per month in Q4. With over 96% of its monthly 100K users on mobile devices, I took an app-inspired approach to redesigning the core interactive elements to improve the conversion funnel for sales efforts within their existing market.
Having been onboarded shortly after a period of rapid growth, I could see the potential in the diverse and talented team of individuals whose hearts were aligned with the company mission of inspiring human connection. However, it was clear there was a disconnect between what the users expected from a brand with such integrity and the website's dated and cold user experience. With the decrease in traffic from the post-pandemic era, it was critical that we focus on efficiency and not losing a single customer due to our most important touch point. With some buy-in, we were able to implement heat maps, recordings, and surveys to observe and optimize the user journey.
Referencing the surveys, user session recordings, heat maps, and funnel analysis - the data we collected provided a clear roadmap to improve the checkout experience and increase conversions. I decided on a phased approach, as it would allow us to implement changes and observe their impact to make further informed iterations. One of the biggest areas for improvement was the cart and checkout flow, which was leaving many users confused and resulted in high cart abandonment. We began there, and continued to design a more tailored and dynamic experience.
Problem: The original navigation was designed to support a limited product line, which it did effectively at first. However, as the product line tripled, this navigation structure became inefficient. The default flow directed users to paginated collections—some containing up to nine subpages—leading to a higher drop-off rate as the user browsed the collection. Users were growing frustrated searching for the one that fir their needs, and often abandoned their journey before finding it.
Solution: The new app-inspired approach brought serveral intuitive changes to the navigation, but without breaking existing framework. By adding images to the menu items, users are able to visuall identify the product from early in their journey, most likely an ad. This new menu takes the place of a collection page and drives users directly to the product page, removing up to 9 clicks from the journey. Also, the top and bottom areas of the nav menu are fixed (sticky) for permanent access to extrication and common links while the product menu is scrollable to support the scaling catalog.
Problem: The original cart design was minimalistic and functional but lacked any sign of brand personality and missed opportunities to leverage basic shopping psychology. Crucially, it didn’t tap into the potential of an empty cart as an invitation to fill it with useful and forward-moving options, leaving engagement and AOV opportunities unrealized.
Solution: Through research with around 50,000 users and extensive session recordings, we identified several “quality of life” enhancements to the cart interface, and began testing new features. A close button and a clear item count were added, addressing the missing functionality. For a more impactful experience, we introduced marketing and CX solutions directly in the cart: a gamified free shipping bar to boost AOV, suggested bestsellers, and category-based recommendations to reduce cart abandonment and option-paralysis. These changes transformed the cart into a more engaging, conversion-optimized touchpoint in the user journey.
Problem: User testing and session recordings revealed that many customers struggled to manage their cart. They frequently added and removed items to try and match expected prices, discounts, or bundles based on promotional messaging. Additionally, the discount code field was hidden at the last step of checkout behind a toggle, causing it to be overlooked. Essential product add-ons were not clearly indicated, leading to customer frustration and unmet expectations.
Solution: With these insights, we transformed the cart into a dynamic, user-friendly experience. Subtotals and savings now updated visibly within the cart as users shop, eliminating the need to wait until checkout to see final prices. We also enabled item quantity adjustments and easy removal directly in the sidecart. A prominent discount message was added throughout the shopping experience, reassuring customers that their discounts would apply, which further reduced cart abandonment and improved user confidence at checkout.
Problem: Over 85% of traffic landing on Product Detail Pages (PDPs) came from high-CTR ad sources, yet the site’s average conversion rate (CVR) remained below 3%, signaling deeper UX challenges. "The perfect marketing funnel, is a tube". Analyzing user behavior through heat maps, flow tracking, and session recordings revealed two primary issues with the product pages.
1. Product Clarity: Users struggled to understand the product’s value, partly due to an oversized default image carousel that took up too much screen real estate–without effectively explaining the product or its value props. Critical details were buried in a vague, truncated toggle area, a section that less than 6% of users interacted with, simply because they struggled to locate it.
2. Trust & Engagement: The landing page’s cold, transactional feel, coupled with excessive bundle options, left users hesitant. It was a striking difference from the warm and personal advertising. Furthermore, the number of choices caused option paralysis, with users frequently adding and removing bundles from their carts. This experience deterred users from completing their purchase and diminished trust in the brand.
Solution: With these learnings in hand, my team aimed to enhance product clarity, build trust, and reduce friction by creating a more intuitive and engaging shopping experience. We adjusted the image carousel’s aspect ratio to be more zoomed in on the product and take up less vertical screen real estate. Doing so freed up space to introduce the product above the fold. Now, not only the product title but also the core value proposition and A/B-tested USPs—such as buyer assurances—are immediately visible when users land on a product page. Key information previously hidden in a toggle is now prominently displayed as part of the main product page content. This approach treats each PDP as a standalone landing page, optimized for the majority of traffic that arrives directly via ads, ensuring users can quickly understand the product’s value, resulting in an immediate 2x increase in CVR.
L: Before | R: After
Problem: This was a big issue with the platform. Analysis of our CVR metrics revealed that Shopify’s reporting included all site pages, including high-traffic support pages used by the CX team that yielded zero conversions. This inflated traffic to non-sales pages, skewing CVR data and compromising the accuracy of KPIs. Additionally, the CX team lacked a centralized, easily accessible repository of resources, which slowed down support response times and complicated customer interactions.
Solution: To address these issues, I recommended a separate hosted site dedicated solely to CX. This allowed us to migrate support pages off Shopify, reducing the load on Web/Dev teams while creating a streamlined resource for CX. Further, a new, standardized process was implemented for product launches which included dedicated support pages for each release, ensuring customers had easy access to relevant information. This solution led to a significant reduction in redundant CX tickets, faster support response times, and a more accurate CVR, reflecting real customer conversion behaviors.
Click to enlarge image
