Company
GoPro
Role
Lead Product Designer
Length
6 months
Team
User Research, Product, Operations, Creative/Studio
Year
2024-2025
Background
The product detail pages for GoPro's cameras were initially designed to consolidate extensive information about core camera offerings and subscriptions into a single page.
As the company sought to expand its product lineup, the eCommerce team recognized the need for a new product detail page design that could scale effectively while enhancing the overall user experience.
Overview
Problems
Improve conversion and revenue for camera product details pages.
Information overload and not scalable for future product offerings.
Solution
Focused “buy” and “learn” pages that allow users to focus either on exploring camera features or buying options.
User friction was reduced and user engagement increased.
Combined Learn + Buy journeys on one page.
A big block of text + Over 80% drop out rate.
Separated Learn + Buy journeys for a more focused user experience.
Increase in checkout rate from the Product Details page by 19%.
Process
Path to a more scalable, compelling website
01
INitial user research
UX pain points + Gopro.com perceptions
02
Desk research
Existing research insights
03
Competitive audit
PDP COPY, VISUALS, INFO HIERARCHY + q&a SEMANTIC ANALYSIS
04
Design + Iteration
UX exploration + optimization
05
impact evaluation
evaluation of success
01
Initial research
02
desk research
03
competitive audit
04
design iteration
05
impact evaluation
Goals + Initial Pain Points
Understanding the user and business problems
As a team we aligned on business objectives and identified design goals that would help us achieve those objectives.
We also looked at analytic data to help us identify the most impactful areas of the experience to improve.
Boost Revenue
=
Improved Conversion
+
Optimize XSell
+
Increase AOV
Improved Conversion
=
Pain Points
Reduce Friction
Nearly 1 in 4 purchase intenders end up not making a purchase decision
Can’t find specs
Can’t find info needed
Feel too long to scroll
Inefficient/ effective nav
Maintain Engagement
Nearly 85% of users drop off before seeing content modules
Users lose interest in PDPs
Boring, mediocre
Text heavy
Irrelevant / too action-driven
Provide Sufficient Info
Not sure what else I should buy
Not sure what’s included already
Not sure if GoPro Subscription is mandatory
Goals
Improve navigation to optimize information discovery
Improve content layout to help shoppers locate information
Reduce bounce by
Surfacing exciting contents up front
Removing blocks of text (especially on mobile)
Offering more use cases
Surface Shop by Activity + top selling accessories
Surface “Whats’ Included”
Offer scalable UX to future proof it
Nearly no one is buying recommended items from the intersitial
01
Initial research
02
desk research
03
competitive audit
04
design iteration
05
impact evaluation
Desk Research
Learning best practices
Approach
Documented + evaluated against best practices from Baymard Institutes + NNg Research findings
Goals + Rationales
Rely on established e-comm industry standards to identify and reduce UX frictionCreate stakeholder buy-in for backlog prioritization
Reduce redundancy in research to speed up the process
01
Initial research
02
desk research
03
competitive audit
04
design iteration
05
impact evaluation
Competitive Audit
Exploring current patterns
Approach
Go beyond the basic e-comm experience and examine how e-commerce websites tell a product story + structure their content
Methods
Broaden perspectives + identify best-in-class practices
Identify effective UX patterns to explore + test
Learn how other companies address user needs
Audit pros and cons through comparison to mitigate risks
Gain inspiration
01
Initial research
02
desk research
03
competitive audit
04
design iteration
05
impact evaluation
Design + Iterate
Iterative design and qualitative testing
We conducted 4 rounds of unmoderated small sample usability testing on to optimize the new UX.
Full Page vs Drawer
Desktop Navigation
Mobile Navigation
Buy Page Layout
01
Initial research
02
desk research
03
competitive audit
04
design iteration
05
impact evaluation
Test 1: Full page vs Drawer
First round of concept testing
From the desk research and competitive audit it was clear that splitting up the current camera product page design into two separate pages (“Shop” and “Learn”) was an option worth exploring.
I created many different designs and socialized them via internal reviews to align on two we wanted to bring into testing.
The two finalists were:
Separate full pages
“Buy” page as a sliding drawer
We learned that both patterns performed well and there weren’t any major usability problems with either of the concepts.
Next steps were to investigate if either of the concepts served an advantage from an implementation or SEO perspective.
01
Initial research
02
desk research
03
competitive audit
04
design iteration
05
impact evaluation
Test 2: Navigation
2nd Mobile and Desktop Variants
Now that we know splitting up the pages performed well in user testing we wanted to make sure the navigational paths between pages were optimized.
We tested desktop variants and mobile patterns separately to understand which patterns worked best for each device.
Mobile
Top navigation bar
Bottom navigation bar
Bottom navigation bar + side “Jump to” chapters
Top navigation bar + side “Jump to” chapters
Desktop
Top navigation bar
Bottom navigation bar
Bottom navigation bar + side “Jump to” chapters
Top navigation bar + pill “Jump to” chapters
Winners
Bottom navigation bar
Top navigation bar + pill “Jump to” chapters
Overall the top nav design with visible subpage with chapter links below performed best in testing because it aligned best with user mental models. Users also really valued having the price visible on the first “Learn” page as well.
01
Initial research
02
desk research
03
competitive audit
04
design iteration
05
impact evaluation
Test 3: Buy Mode + Interstitial
Testing the best purchase path
We also tested different “Buy” and interstitial designs so see which formats were the most effective at providing add to cart confirmation and upsell.
Four Desktop “Buy” page + Interstitial Variants
Overall Winner
Overall the top nav design with visible subpage with chapter links below performed best in testing because it aligned best with user mental models.
Users also really valued having the price visible on the first “Learn” page as well.
01
Initial research
02
desk research
03
competitive audit
04
design iteration
05
impact evaluation
Pre-Launch Experiment
Larger Sample Size Validation, n=240
Goals
Evaluate the new UX against the current UX to identify improvements and ensure a better user experience.
Identify any overlooked UX problems.
Old Design
New Design
The same copy, imagery, and content order were used to reduce confounding factors** (Except for the HERO image in the current design)
Key Hypothesis
Hypothesis #1
After exposure, those who were assigned to the challenger design will show more interest in a GoPro camera than those who saw the control design.
Hypothesis #2
The challenger design is significantly easier to learn about the H12 camera than the control design.
Hypothesis #3
The challenger design leads to significantly favorable impressions of the website (e.g., easier to use, less confusing, more exciting etc.)
Findings
The key three hypotheses were supported.
The same content / amount of info was presented the challenger design led to:
Significantly higher interest level post-exposure
Significantly higher perceived learning effectiveness
Significantly better impressions
Through sentiment maps, we’ve identified what worked well + what users expected improvement.
Tweaked UX based on both pros + cons including UX writing
01
Initial research
02
desk research
03
competitive audit
04
design iteration
05
impact
Before and After
Overview of general structural changes
Before
Learn + Buy journeys are combined in one page.
A big block of text -- Over 80% drop out rate.
Learn
Buy
After
Separated Learn + buy journeys for a more focused user experience
Learn
Buy
01
Initial research
02
desk research
03
competitive audit
04
design iteration
05
impact
Before and After: Buy
Redesign summary for the buy page
Before
Core page requirements were taken from the original page and adapted in the redesign
After
Carefully considered content presentation
What’s included clearly visible
Collapsed bundle section for future scalability
Mouse movement is also carefully considered.
(Top --> Bottom)
Subscription + Free shipping info above the fold
01
Initial research
02
desk research
03
competitive audit
04
design iteration
05
impact
Before and After: Interstitial
Redesign summary for the interstitial page
Before
Small and crowded interstitial with upsell cut off below the fold at smaller breakpoints.
Nearly 0% conversion
After
Carefully considered content presentation
Use of color to highlight what’s added
Personalization via the Shop by Activity experience*
Camera specific accessories
Key revenue booster items
01
Initial research
02
desk research
03
competitive audit
04
design iteration
05
impact
Impact at a Glance
Looking at the numbers post launch
We lose 80% of traffic on the 8th module down the page
Checkout to Purchase:
Up 19%
PDP to Add to Cart:
Down 29%
Add to Cart to Checkout Starts:
Down 6%
Note: This was a huge improvement! We used to lose 80% of people before they get to the first content module.
Overall, our team deemed the project a success.
Our solution was less effective for unqualified traffic—visitors with little intent to purchase—but performed well for qualified traffic—those serious about buying. The introduction of the "Learn" page added a step in the user flow, which deterred unqualified visitors. However, for qualified visitors, this additional content increased their likelihood to purchase.
It also set the stage for our next step: How might we drive more traffic to the Buy page.
What’s Next?
Our team wanted to keep the redesign, but improve the traffic to the Buy page.
How might we...
Drive more traffic to the Buy page from other pages of the website?
Drive more traffic to the Buy page from the Learn page?
Bring more attention to the Buy button on the Learn page?
Currently different designs are being reviewed and tested to address these areas of improvement.
Check it out in the wild
