Proof Pack · All families
Harbor & Pine Outfitters · Outdoor Retail
Harbor & Pine Product Order
Product pages that read like brochures became pages that answer a buyer's questions in the order they ask them.
Harbor & Pine sells field-tested gear with honest specs and real photography. The product pages had every answer, just not in the order a cold, wet shopper looks for them on a phone in a parking lot.
Client
Independent outdoor outfitter
Engagement
Product page review, three weeks
Source Material
Support emails, returns notes, product specs
The work, in the open
The work at a glance
12
Product Pages Reviewed
Support emails, grouped by the question behind each one
5
Detail Groups Ordered
Product spec sheets with our plain-language annotations
1
Order Template Delivered
Returns notes mapped to the missing detail
Shaped over a three-week product-page review.
Spec sheet
The work at a glance
Where We Started
Pages opened with brand story and a hero shot. Buyers were still emailing to ask about fit, waterproofing, and whether it would survive a season.
What We Changed
We rebuilt the page around five things a buyer weighs: fit and sizing, materials and build, weather rating, care, and returns.
What We Measured
This review measured documentation and clarity. Sales and conversion depend on live store data, so we left those numbers out.
3 Week Engagement
5 Detail Groups Ordered
12 Product Pages Reviewed
1 Order Template Delivered
The Challenge
The page sold the brand, not the gear
Harbor & Pine's product pages led with a mood: a misty trailhead, a line about craftsmanship, a big add-to-cart. All good. But a buyer deciding between two rain shells still could not find the seam rating, the fit notes, or the return window without scrolling past three paragraphs of story. So they emailed, and the small team answered the same questions every afternoon.
Source Material
We worked from a month of support emails, the returns log, the product spec sheets, and the brand language Harbor & Pine had already approved.
On The Trail
A calm motion loop stands in for the shop's own field footage.
Our Approach
We ordered the page the way buyers shop
We read the support inbox before we read the product pages. The questions buyers actually asked set the order: fit first, materials and build next, weather rating, then care and returns. Every page now follows that sequence, and the template we left behind keeps new products in line.
1
Gathered support emails, returns notes, and spec sheets.
2
Grouped buyer questions into fit, materials, weather, care, and returns.
3
Reviewed where each detail lived versus where buyers looked.
4
Drafted a product page in the order buyers shop.
5
Delivered a template that holds every new product to it.
The Evidence
The evidence behind the new order
We kept observed evidence separate from outcomes that only the store's live data can verify.
The reorganized product page as buyers now read it: fit and sizing, materials and build, weather rating, care, and returns, in one scannable order.
Question Map
How recurring support emails grouped into five detail areas and one add-to-cart step.
Detail Order
The new page order follows how a buyer decides: does it fit, will it last, will it keep me dry, how do I care for it, can I return it.
Answer Path
Fit notes, fabric and seams, weather rating, care, and returns now move through one sequence instead of a wall of brand copy.
What We Did Not Measure
Sales, conversion, and return rates sat outside this review. Those belong to verified store data, so we left them out.
Reflection
One product order the team could reuse
By the end of the review, the shop had one product page order they could apply to anything they stocked, and a template that kept new listings in line. The revised page, the support emails behind it, and the owner's reflection below are the record of that work.
“The new order reads the way our shop talks. Fit first, then fabric, then care. We just reused the template for the whole catalog.”
Owner, Harbor & Pine Outfitters
Inside the System
Built on a real Divi 5 design system
Every color, type size, spacing step, and component on this page is a named Divi 5 variable or preset. Change one and the whole story restyles, so making it yours is an edit, not a rebuild.
Design Variables
Change one color or type scale in the Variable Manager and the entire page follows. Nothing here is hardcoded, so your rebrand takes minutes.
Element Presets
Mastheads, proof rails, evidence frames, quote panels, and buttons all run on named presets. Restyle one and every match updates with it.
Rows That Stay Even
Card rows hold equal heights no matter how long your content runs. Paste your real copy and the layout keeps its shape on every screen.
Ready For Your Story
The sample case study, labels, and images are isolated for clean swaps. Drop in your own work without untangling a single style.