Bounceboost
Fitness E-commerce
Content
Role
Product Designer
Tool
Shopify, Gempages and Figma
Team
1 Marketing
Duration
4 months
Overview
Bounceboost is a magnetic gym-backpack brand. The goal was to design and launch a mobile-first product page in Shopify capable of showing its innovative, differential value on the very first scroll. After launch, the page had to evolve quickly based on real usage data.
The Challenge
MVP phase: Show the “one-click” differential on the first scroll and achieve pre-orders without massive paid ads. Communicate the key benefit “one click, ready to traning/workout” at first glance and guide the user to purchase with a persistent CTA.
Post-launch phase (evolve with real data): Implement analytics, heat-maps and a modular layout to iterate quickly, improving conversion and average order value without sacrificing performance or load speed.
Design Process
Research: Analysis of user comments and reviews + fitness e-commerce benchmark.
Define & Ideate: Empathy Map → archetypes → User Journey to detect frictions and opportunities.
Wireframe: Mobile low-fi flows to validate hierarchy and CTA.
Build & Launch: Modular development in Shopify + GemPages
Measure & Iterate: Microsoft Clarity (heat-maps, session replays and scroll/click metrics) as the basis for bi-weekly optimization sprints.
Solutions
Optimized area | Before iteration | After iteration | Evidence (Microsoft Clarity) |
|---|---|---|---|
Hero | Static image + long descriptive text + CTA | Image with model showing the magnetic closure + concise text + fixed “Buy Now” CTA | Higher click concentration on the button and better scroll retention in the hero (9% - 16%) |
Before vs. After comparison | Embedded YouTube videos | Interactive slider/GIF showing before and after using Bounceboost + CTA | Increase in drag interaction and time spent in the section (Vanchis’ll explain please) |
Value perception | Users didn't clearly see what made the backpack different | Added “Why Bounceboost?” block with comparisons and differential value | Heat-maps show focus on the comparison |
Product page | Traffic from TikTok/Instagram landed directly on the product sheet without additional context | Intermediate “Why choose Bounceboost” section after the product sheet; all in the same section to avoid jumps | Users scroll to dig deeper and return to the CTA without leaving the page |
Results
With limited organic traffic and no ads, the page showed that the concept sells itself when the value is communicated clearly. My work consisted of eliminating frictions, making the key benefit tangible on the first scroll, and ensuring that visitors who connected with the proposal could purchase without complications. These foundations now allow paid campaigns to scale confidently, knowing the page converts.
Conclusion:
The page communicates the benefit in seconds and removes friction. With these foundations, investment in paid campaigns can scale with confidence in conversion.
Observed results
• Organic sales without ads over 6 months confirm understanding of the value.
• Increase in clicks on the hero CTA (according to heat-maps).
• Greater scroll depth and time in the comparison section.
Detailed conversion metrics are not presented because traffic volume is still low and depends on future paid campaigns.
Lessons Learned
Showing beats telling:
A 2-second micro-demo communicates the magnetic closure benefit better than any paragraph.
Modular design:
working with reusable sections allows rapid iteration without touching code.
Copy + human context:
Clear text and photos with people using the backpack convey the product’s value much better than isolated product images.
Value in sight:
Embedding purchase arguments within the product page itself prevents the user from having to search other sections and reduces decision friction.
