The design of any portion of an eCommerce site, usually involves discussions around the topic of trust and friction. The idea being that you want to build as much trust with the visitor as you can while at the same time, reducing as much friction to purchase as possible. If you think about it, building trust on your site and reducing friction simultaneously can be quite a challenge. Building trust on a page stems from the “signals” on that page. Naturally you start thinking about adding, as many trust building signals as possible. But the counter argument to adding more trust signals is, you are also putting more and more stuff in front of the visitor…thus potentially creating friction. Quite the conundrum isn’t it?

1. Guide to Product Detail Page Design
Presented by: Matthew Bertulli
CEO and Co-Founder of Demac Media

2. 1. Intro – Who are we?
2. Methodology for Rebuilding Your Product Detail Page
3. Trust Signals
4. Friction
5. Copy
6. Photography
7. Calls to Action
8. Analytics
9. Multi-Device Design
10. Handling Complex Products
11. Tips – Magento Features & Extensions
Agenda – Product Detail Page Design
Lots and lots of examples!

3. www.demacmedia.com

5. 1. We’re talking about physical things, not digital.
2. Most of this stuff works on both b2b and b2c sites.
3. Test everything. Nothing we talk about today is scripture.
4. Design for your customer first.
5. Less is more.
Before We Begin
We’ve released a free ebook on this topic that will have
far more detail than we can cover in this presentation. Download it here.

6. 1. In addition to visitor analytics (i.e. GA) use an A/B testing suite to
validate your changes with real data.
2. Order of Attack
1. Calls to Action Design
2. Trust Signals
3. Friction
4. Photography (i.e. - on-model / off-model)
5. Copy
Method to the Madness
It’s important to develop a very scientific (step-by-step)
process when embarking on product detail page redesigns.

7. 1. Multi-Brand Merchants – Trust Through Association (use their logos!)
2. “Real Boy” Signals
3. Customer Ratings & Reviews
4. Community
5. Design Cues
6. Policy Proximity to CTA’s
7. Setting expectations
Trust Signals
Big or well-known brands have developed trust with their customer.

8. Trust Signals – Brand Association 1.0
Remember when these were your #1 way to establish credibility?

9. Trust Signals – Brand Association 2.0
Many multi-brand
retailers miss out on the
opportunity to leverage
the equity in the brands
they sell.

10. Trust Signals – But…
Be careful about
pigeon-holing yourself.

11. Trust Signals – Physical Stores

12. Trust Signals – Active Community…show it off!
Other customers / users answering
questions.

13. Trust Signals – Policy Proximity

14. 1. Alignment & Spacing – So incredibly important.
2. Minimal visual bugs.
3. No harsh color palettes. Don’t care how “unique” your customer
segment is.
Trust Signals – Design Cues

15. Trust Signals – Design Cues (Example)
1. Small header.
2. Very clean.
3. Alignment is nearly perfect on all
elements…creates balance.
4. Typography is varied to draw
attention, but not too much.
5. No colors that stand out more
than the product.

16. Friction
Building trust on your site can create friction. Balancing the two is very
difficult.
• What is friction on a product detail page?
• More trust signals = more stuff. More stuff = more friction.
• How do you find the right balance?

17. What is Friction on a Product Detail Page?
Definition: Anything that gets in the way of a visitor adding
something to their cart.
When you really think about it, the more you add to a page,
the more a visitor has to look and process…the longer it takes
to click the button!

18. Friction – Compounds Quickly…
Deciding on when enough is
enough is really hard.
Things can pile up quickly
because of common page
elements like headers and
footers.

19. Friction – Finding Balance
You can actually have quite a bit
on one page if you work on
balance, alignment and colors to
avoid creating unnecessary clutter.

20. Content / Copy
1. Your copy should be insanely good!
2. Humor is your friend.
3. Honesty is the best policy.
4. Write using the language of your customer.
5. Typography, Spacing, Layout…it’s all important.

21. Copy – woot.com - Hitting all the points…

22. Photography
1. How many pictures do you need?
2. How big should those images be?
3. What zoom features?
4. What product customization & preview features?

23. Photography – Multiple Views

24. Use as much of the
physical screen size
as you possibly can.
**Design for larger
format screens.
Photography – How big?

25. Possibly the most important thing on the page is your primary call to action
(CTA).
Question is, how do you handle multiple CTA’s?
How much time / money do you spend testing these?
Let’s talk design.
• Color
• Size / Shape
• Images?
• Copy
Calls to Action

26. Calls to Action - Design
Just do yourself a favor and test
different sizes, shapes and
colors as you possibly can.
Don’t take any “best practice”
advice. It varies site to site,
audience to audience.

27. Calls to Action – Multiple CTA’s
1. Try different colors, shapes, sizes.
2. Try links instead of buttons.
3. How many do you really need? Are those social share buttons even being
used?

28. Analytics (data = smart decisions)
1. Picking the proper toolset.
2. Before you make changes, you need to understand how your
customers currently interact with your product pages.
3. Choosing the right metrics. It’s easy to get lost in variety.
Tip: Put a /p/ or other pattern in your product URLs. It’ll make a/b testing with tools like
Optimizely or Visual Website Optimizer that much easier.

29. Analytics – What to measure?
My favorite question…
How did they get to your product page and where did they go next?

30. Analytics – What to measure?
What did they do while
on the page?
Heat / Click mapping
tools are best for this
kind of insight.
Note: 11% clicked to see
product reviews…that
about sums it up right?

31. Multi-Device Design
130+ Screen Sizes in the Market
There is one major guiding rule that we follow when designing a product
detail page for multiple screen sizes.
** You don’t need all of the same stuff on every screen!
A lot of the time it doesn’t make sense to have feature parity from your
desktop page to small-format pages.

32. Multi-Device Design – Going responsive!

33. Complex Products
These represent some of the hardest types of product detail pages to
design. Mostly because of the many user interactions before a customer
can purchase.
1. Bundles
2. Grouped Products
3. Configurable
4. “Super” Configurable (combinations of the above)

34. Complex Products - Example

35. So what about Magento?
What are my favorite extensions or Magento features for building a better
product detail page?
1. EE – Ruled based product relationships.
2. EE – Customer Segmentation
1. Example: Create a customer segment for those people viewing a specific brand,
then use banners tied to these segments to personalize your product detail pages
for those same brands. Maybe an offer?
3. Color Swatches
4. Lightbox2 by MageSpecialist
5. AJAX Add-to-Cart

36. AJAX Add-To-Cart

37. Color Swatches

38. Thanks for checking out our presentation!
Download the Ultimate Guide to Product Detail Page Design
• Comprehensive eBook with features, strategies, etc.
• 70+ product page design examples
All free.
You can get it here.
Twitter: @mbertulli