Pau Hana Surf Supply
E-Commerce Product Page Redesign
⋆ UX/UI DESIGN ⋆ USER RESEARCH ⋆ INFORMATION ARCHITECTURE ⋆
E-Commerce Product
Page Redesign
Role: UX/ UI Designer
Duration: 4 Months
Objective: Redesign product pages so customers researching expensive paddleboards can quickly find specs, compare options, and buy with confidence.
The Business Context
Premium outdoor gear with four-figure price tags. People research for weeks before buying.
The User Problem
Customers were scrolling through pages trying to find basic specs - weight limits, dimensions, what's included. The info was there, just not where they expected it.
The Opportunity
Reorganise product pages so people can evaluate boards faster. Less time hunting for specs means fewer abandoned carts and fewer "does this fit my needs?" support emails.
01
The Challenge
Pau Hana sells premium paddleboards that aren't impulse buys - we're talking $800 to $2000. People do their homework before spending that much money.
The existing product pages looked great and told a nice brand story, but they weren't helping customers answer the practical questions: What's the weight capacity? Will this fit in my car? Is this the right board for me?
Technical buyers needed specs fast. Instead, they were scrolling through paragraphs trying to find dimensions or digging for what comes in the box. The information was there - it was just buried.
02
Research
I talked to recent buyers, dug through customer support tickets, and checked out what competitors were doing to understand how people actually shop for paddleboards.
Questions I Needed to Answer:
What info do buyers need to see first? What makes them bounce off a product page to find specs elsewhere? Which specifications are deal-breakers versus just nice to know? And how do people actually compare multiple boards when they're trying to decide?
People scan fast. Within 10 seconds, they're looking for 3-5 critical specs: weight, capacity, packed size, and price. If any of those are deal-breakers, they're out.
Technical jargon loses people. Terms like "drop stitch" and "woven construction" mean nothing to first-time buyers. Without context, it just sounds like marketing fluff.
Mobile users quit faster. Scrolling on a phone trying to find buried specs is frustrating. If it takes more than a few swipes, they're done.
20% went to other sites because they couldn't find specifications easily on Pau Hana's pages. That's a problem.
03
The Problem
What Wasn't Working:
Buried specifications. There was no way to scan the most important details at a glance - everything was buried in text, making comparison nearly impossible.
Mobile was rough. Text-heavy layouts don't translate well to small screens - lots of scrolling, pinching and zooming.
Jargon without context. Terms like "drop stitch construction" meant nothing to first-time buyers, but there was no explanation.
No visual hierarchy. All the content had equal weight, so nothing stood out as important. Your eye didn't know where to go first.
Everything was in paragraphs. Dense blocks of text that required reading every word instead of scanning for what mattered.
Specs were buried. Users had to scroll past three screens of brand storytelling before finding weight and dimensions - the stuff they actually came for.
04
The Solution
Mobile-first layout. Designed for people shopping on their phones - no more pinching, zooming, or horizontal scrolling to read specs.
Key specs up top. Weight, uses, and capacity are visible immediately - no scrolling required to find the basics.
Icon + number format. You can scan the most important specs in under three seconds. Quick visual hits instead of hunting through text.
Expandable sections. Technical details are there if you need them, but they don't overwhelm the page. Click to learn more, or keep scrolling if you've got what you need.
Explained the jargon. Terms like "drop stitch construction" now include simple explanations so first-time buyers aren't left guessing.
Clear visual hierarchy. The most important info stands out. Your eye knows exactly where to look first, second, third.
© 2024 by Site Zed.
05
Measuring Success
How We'll Know If It Worked:
Track time-to-cart and conversion rates before and after launch. Monitor how many support tickets come in asking about specs - that number should drop. A/B test different spec table formats to keep optimising. And run user testing sessions with 10+ paddleboard shoppers to see what's still confusing or missing.
Why this should work:
Mobile doesn't suck anymore.
The layout actually works on phones now, which should improve mobile conversions since that's where most people are shopping anyway.
More confidence.
Contextual explanations mean less uncertainty about what they're buying. Fewer people should abandon their cart wondering if they picked the right board.
Faster decisions.
When critical specs are right there at the top, people don't have to scroll and hunt. They can evaluate the board in seconds instead of minutes - which should cut decision time by 30-40%.
06
Reflection
Balancing Brand and Function
The stakeholders were worried: "Won't this feel too technical? We'll lose the emotional connection to the brand."
Fair concern. So I kept the hero imagery and brand story - that stuff still matters - but reorganised so user needs come first. The brand narrative moved to the middle of the page where people who are already engaged will naturally scroll to read it.
The Importance of Context
Early wireframes showed specs without explanations. Seemed clean. Then user testing revealed that first-time buyers had no idea what "agility" or "woven fabric" actually meant.
So I added inline definitions and "why this matters" context for all the technical terms. Made them expandable so expert buyers could ignore them, but novice buyers could click to learn.
Technical products still need emotional appeal, but the information hierarchy should match what users are looking for at each stage. Don't make them hunt for specs just to preserve your brand story placement.
Technical products still need emotional appeal, but the information hierarchy should match what users are looking for at each stage. Don't make them hunt for specs just to preserve your brand story placement.
What's Next
Future iterations could include A/B testing different spec table formats to see what scans best, adding a product comparison tool so people can evaluate multiple boards side-by-side, integrating AR so users can visualise board size in their actual space, or building a size recommendation quiz based on weight and experience level.
