Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Better Product Pages Turn Visitors Into Customers

The way you present your product or service is essential to its success — or at least it could be if you know how to do it right. On the Web, like anywhere else, the first impression you make on people is crucial. When selling a product, you want that first impression to be as positive and remarkable as possible.

Once people visit your website, make sure to attract their attention. If you have managed to draw them in, you will need to introduce the product within a few seconds. According to last year’s Google Analytics benchmarking report, bounce rates in the US were as high as 42.5%1. If people don’t understand what you are offering them or how it works, they will lose interest quickly. Show them that your product is just what they want, that it’s useful and that it adds some kind of value to their lives.

Further Reading on SmashingMag: Link

A smart product presentation does all of that. Here, we will cover different aspects of a product presentation and give examples of how to use them to your advantage. The idea is to give you an overview of the different elements that make a product page successful.

Attract Attention Link

Before convincing anyone of the quality of your product, you need to make sure it gets noticed. No matter whether people are looking for your particular product, once you have caught their attention, you are in a good position to arouse their interest and get them engaged. The things you can do to catch the user’s eye are limited only by your creativity. Here are three examples that we believe are effective.

Stand Out From the Crowd Link

Countless companies and people freelance in the creative sectors, and all of them offer some kind of information about their services and prior work. Usually, you can browse portfolios to find a bunch of boring screenshots accompanied by even more boring information.

(Image: Chris Bower76)

Web designer Chris Bower76 has found a unique and appealing way to demonstrate his expertise. His professional presentation of his work on various devices accomplishes three things. It is the ultimate eye-catcher on an otherwise clean website; it conveys the designer’s quality because it looks truly professional; and it shows that Chris designs for any device you can think of. With only a glance at his home page, you know whether to enter or leave the website.

Surprise Your Visitors Link

Another great way to attract attention is by surprising visitors. Offer them something they did not expect; make them pause and think to make sense of what they see. We like to be surrounded by the familiar, and things that don’t fit our expectations automatically draw our attention.

(Image: Nike)

Nike presents its new running shoes in the shape of wings, with the promise of a “Super-natural ride.” The arrangement of these multi-colored shoes and the fade in the middle almost force people to take a second look. The visual is not only appealing, but attracts attention because people are not sure whether they are looking at wings or shoes or both.

People Love Humor Link

Plenty of products out there are easy to promote, whether because of their function, popularity or unique look. Other products are less conducive to effective marketing and require a more creative approach.

(Image: Evian109)

One such example is the brand Evian109. How could boring water possibly attract attention? Quite simple, actually. Come up with a product-related slogan, such as “Live young,” and then translate that slogan into a visual campaign using some great humor. A couple of years back, Evian’s funny campaign videos11 went viral — proof that its unique approach works.

Explain The Product Link

The way you present the product is crucial to people’s first impression of both you and the product — including what they think of you and whether they understand the nature of the product. Online services and new products especially need clarification in order for the audience to make sense of them. Obviously, if people don’t get your product or understand why they would need it, they won’t pay for it.

Introduce the Product Link

With the ease of access to technologies such as the Internet, the number of inventions has significantly increased. Any ready idea nowadays can be turned into a product or service, but some of these ideas are so abstract that they require careful explanation.

(Image: Tickera1413)

The people behind Tickera1413 recognized a need to carefully explain what their system is about. Their home page is simple, and the focus is on the product and its main features. Of course, a ticketing service is not a physical product that you can arrange nicely and take pictures of. But they did a great job of translating their service into a beautiful and trustworthy visual. With only a look, it becomes clear what Tickera is about.

How Does It Work? Link

Related to how you present the product is your explanation of how it works. Basically, you can do this by showing the product in action. And there is a big difference between showing a screenshot of software and showing the software on the device it is intended for.

(Image: Square1716)

Square1716 is a perfect example of how to present a product and demonstrate what it is and how it works. The high-resolution image shows how simple collecting and processing credit-card payments on the go can be. All you need is the little Square card reader, an iPhone and the app — no words needed to convey the value of this product.

Convince People That They Need It Link

It could happen that people understand how your product works but don’t recognize its potential benefit to them. This is why you should point out the advantages that people will get from your product. People consider something to be more relevant if they can relate it to themselves.

(Image: Action Method)

The task-management tool Action Method focuses on its main advantage to the user: always being in sync. Seeing these different devices together, the visitor can see that this app could make life much easier for them. Perhaps they’re thinking about how annoying it is to take notes on a laptop and not be able to access them later on from a different device.

Focus On The Main Selling Point Link

Most products have many features but only a few or even one selling point that makes them special. Distancing yourself from competitors is important, whether through hardware features, design, service or something else. Point out this difference when presenting the product and show people that the product is different, special and better.

Quality Link

Quality is an effective selling point. And if the product costs a lot, people will want to be especially sure they are getting good quality in return. Competitors might offer the same product or feature but not the same quality. Reflect the quality of the product in your presentation of it.

(Image: Chanel2019)

Chanel2019 present all of its products in high-resolution photographs. The images were obviously taken by professionals. The white watch above is bedded in perfectly white soft feathers. The image is extremely detailed, the viewer instantly gets a feel for the quality and luxury of the brand.

Features Link

Whatever your product, chances are high that at least one competitor offers something similar. To convince people that yours is the better choice, focus on features — particularly those that are relevant or essential to your target group.

(Image: HTC2322)

All smartphones basically offer the same functions. For example, they enable people to make calls, send messages and connect to the Internet. Instead of listing all of the things that all smartphones can do, HTC2322 focuses on special features that are of concern to its target group: camera and sound.

Customization Link

People love products that have some personal meaning for them. That’s why we love to personalize our possessions, such as phone settings, laptop screens and clothing style. Customizing things helps us shape our identity, which is why customizable products are more special to us.

(Image: Converse)

Offer customization options to connect customers to your brand and products. Converse really makes a point that people can design their own sneakers. Being able to customize your own shoes definitely adds value to the brand.

Don’t Underestimate Copywriting Link

On the Web, our senses are limited. We send messages blindly, without looking our correspondent in the eyes. However, our limited senses should not limit our creativity. We can use more than plain images and text to make our point. Our message is shaped by our choice of words, typeface, font size and even punctuation.

Play With Words Link

Puns are a great way to attract attention because they wrap a message in a familiar concept. You are giving visitors something they recognize and are linking it to your own message. Wordplay can be used to explain a concept quickly and convey familiarity.

(Image: Apple2625)

Apple2625 does this very effectively. It pioneered the tablet and puts everything into showing that it is the best in the field. The iPad 3 has a revolutionary display, which is the main selling point of this latest version. The pun “Resolutionary” is powerful and demonstrates in a single word the high quality of the product.

Don’t Get Too Serious Link

A good laugh helps people bond. You can surely think of more than one example of an inside joke that fostered a sense of connectedness and belonging. The same can be done online. A funny or ironic headline could be all you need to sell a product. Obviously, you can do both: bond with visitors and send a meaningful message.

(Image: Jax Vineyards2928)

A perfect example of a funny and powerful headline can be found on the website of Jax Vineyards2928: “Your food should be so lucky.” Of course, your food would not actually be lucky, no matter which wine you pair it with, but the idea of cherishing your food by choosing the right wine is appealing. Imagine spending hours preparing the perfect dinner; spoiling it with the wrong wine would be a shame, right?

Use Metaphors Link

Metaphors can bring copy — and, by extension, the product — to life. Metaphors help us understand the world around us and make sense of unfamiliar things. Abstract ideas such as the reason why your product is so special could also be easily explained with the right metaphor.

(Image: Adidas3231)

Adidas3231 promotes its new running shoe with the slogan, “Sweat nothing, climacool seduction.” The melody of the words and the association triggered by the word “seduction” could easily cause us to misread the slogan as “Sweet nothing, climacool seduction.” The ad gains a risqué charm, giving off a light and comfortable feeling — perhaps acquiring an association with alluring lingerie. The link between running shoes and lingerie is not at all obvious, but it works brilliantly and transfers a positive and familiar association to a new line of running shoes.

Make Use of Context Link

The context in which you present a product is just as important as the product itself, if not more so. It is the space in which you show the product in action. It is the accumulation of associations that trigger emotions in customers. It draws people in and convinces them that they need your product.

Awake Desires Link

Motion pictures are a great way to draw people into a different world. Why else do we go to the movies, if not to escape our everyday lives and immerse ourselves in some romantic love story or surrealistic adventure? You can use the same effect on your customers and enable them to experience, say, the pleasure of a vacation.

(Image: Post Ranch Inn3534)

The 24-hour time-lapse video of the idyllic Post Ranch Inn3534 gives visitors the feeling that they have already been there. The website takes you on a journey from sunrise to sunset, whisking you away from your desk on a long-awaited and deserved vacation.

Trigger positive emotions Link

You can also use a narrative or mascot to add value to the product. Focusing not on the product itself but on the emotions that come with it is a clever strategy. Customers might have plenty of options, but if you sell them the right feeling, they will be easily convinced.

(Image: Fanta)

Fanta uses animated characters who enjoy life to the fullest and have a lot of fun. The slogan “More Fanta. Less Serious.” communicates the idea that Fanta will relax you and let you have fun. There is no reference to the drink itself, such as ingredients. The only thing you see is the emotional triggers of happy characters and bright positive colors.

Appeal to Your Target Group Link

Every target group is different, with different interests, levels of knowledge, expectations and so on. Clearly define your target group to make sure you appeal to the right people36. Defining a target group means truly understanding what makes them tick: their motivations, goals and habits. Only with a clear picture of who you are designing for will you be able to create a product that people really need and desire.

(Image: Olay)

Products like the age-defying line from Olay have a clearly defined target group: middle-aged women. Products for the body — especially related to sensitive subjects, such as aging — are considered intimate and require a high level of trust37. Olay appeals to just that desire and presents its products in a professional yet familiar and trustworthy way.

Offer Sufficient Information Link

Factual information can be important to selling a product. People make rational decisions based on factual information, especially when purchasing expensive items — at least they like to think so. Factual information not only answers questions people might have about the product, but makes people more confident in their decision.

Highlight Advantages Link

Facts are a great way to point out a product’s advantages. Clear statements and factual information can be very convincing, and that’s what you intend to do at the end of the day, right?

(Image: Heineken4039)

You would not necessarily expect a beer brand to volunteer factual information. Yet Heineken4039 presents its tap beer with clarity and sophistication. The information is given a serious and refined atmosphere, instead of Heineken’s usual fun style.

Make Detailed Information Optional Link

For some products, people really need certain information before being able to decide. This information could be a list of features, technical specifications or anything else. If your product requires such information, make sure people don’t have to hunt for it.

(Image: Viking)

Viking presents a high-resolution image along with a simple textual description. The first impression is very clean. Of course, when buying a lawn mower, a person needs more detailed information; thus, technical specifications and equipment details are neatly included in separate tabs.

Convince With Facts Link

Use facts to underpin the message that you are conveying visually. Information helps a person feel more confident if it confirms something they already feel.

(Image: Porsche4342)

No one really needs a sports car. But people do want them, and they buy them for leisure. Porsche4342 uses a lot of great visuals to convey a feeling of speed, excitement and precision. Yet it also offers some information with these visuals — some, though, not much; just enough to underpin the emotions conveyed by the image: power, independence and luxury.

Conclusion Link

Whether you are selling a gadget, software, service or anything else, your presentation will have a direct impact on people’s first impression. And on the Web, which offers many choices and where people can leave your website in a mouse click, this first impression is crucial to your relationship with visitors and to gaining new customers.

A good presentation will draw the visitor’s attention, help them understand the product and even convince them to buy it. Use sketches, detailed illustrations or vivid photographs to communicate your message. Together with thoughtfully written copy, this presentation could well be the most important asset on your website.

Editor’s Note: This article was created using a new tool from Usabilla44, that allows you to collect and discover design elements, like the ones presented in this article. Find more design elements at: discover.usabilla.com45.

(al) (fi)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45

↑ Back to top Tweet itShare on Facebook

Sabina is passionate about designing and improving interactive media for all ages. With her own company, UXkids, Sabina leverages her academic research expertise, know how in child development, and strategic vision to help companies build successful digital products for kids.

  1. 1

    Evan Jacobs

    July 11, 2012 5:49 am

    Great article! I noticed you only had one B2B example though. Are there any other business-focused websites that you find particularly effective?

    • 2

      Hi Evan, you are right, I had not even noticed that yet. Thinking about B2B examples, I really like how frog design present a broad range of their work right on the landing page: The same with the consulting firm BCG:

      However, I think it doesn’t matter that much whether you target a business or not, eventually it will be a human being to visit your site and decide wether or not they like your presentation. I suggest a personal and engaging product / service presentation for both B2B & B2C companies. What do you think?

      • 3

        Hi Sabina,

        Thanks for sharing your insight – this is great stuff!

        I do agree that it’s a human being visiting your site, so you need an effective and compelling presentation.

        However, I believe there are different drivers between B2B and B2C, in terms of what makes a presentation compelling/effective – you’ll notice how most B2B value propositions aim to convey an emotional state of safety, stability, whereas most B2C ones aim for excitement or other highly passionate frames of mind.

        • 4

          Hi Alex,

          Thanks for your thoughts! Good point, I totally agree! :)

        • 5

          Catherine Boundjia

          July 13, 2012 9:02 pm

          Hi Sabina,
          Thank you for this excellent article. These are very good techniques to present B2C products or services.

          As mentionned earlier, better product pages in a B2B environment may not significantly impact the final decision. B2B customers will usually have a first negative impression if you:
          – Offer them something they did not expect
          – Don’t Get Too Serious
          – Play With Words or Use Metaphors
          – Make Detailed Information Optional

  2. 6

    Brilliant, blank filling article with so much information! Nice to read marketing informations between the technical articles!

    Thanks for writing, and waiting for more!

  3. 8

    Chris Bower is a sophisticated UX robot sent back through time, to change the future.

  4. 9

    I don’t think the use of Square should be praised until they are PCI DSS compliant…it doesn’t matter how user friendly – or visually appealing – something is if it is not fully capable of keeping my data secure. Just my opinion though. ^_^

  5. 10

    “Convince People That They Need It”
    This is so 20th century.
    Only blind marketers living in their multi-devices closed world would think that people are fooled with all these tricks.

    • 11

      Thanks for your comment. I’m not sure I agree with this. Certainly these examples do not apply equally to any product or service, but any good marketing is eventually about making people believe that they need something, isn’t it?

      What strategies do you consider more appropriate?

    • 12

      Nobody ‘needs’ an iPad… in fact the iPad could be considered one of the biggest tech frivolities of the past few years, yet plenty of people have bought one.

      This is no coincidence, Apple have created the desire where other tablet manufacturers before have failed.

      • 13

        Exactly what I mean with “Convince people that they need it”. There are many other examples of products that we could perfectly live without. Still, we think we need them in order to satisfy some artificial need or desire. Thanks for bringing this to the point.

        • 14

          There is a play of marKeting terms, needs and wants. Marketers convince people that they need it playing in “wants” category.

  6. 15

    Interesting read! Thanks!

  7. 16

    Very good article Sabina. I am really trying to get inside my users head to improve our online shopping experience and this provided a lot of help.


  8. 17

    First you claim most portfolios are boring, then you claim Chris Bower’s site is unique? Nothing on Chris bower, he has done amazing work. But I wouldn’t say his portfolio is unique with fake apple products and thumbnails – pretty standard approach these days. I question your judgement…

    • 18

      Thanks for your thoughts on this. I can see your point with this example and I’m curious if you have maybe thought of a better example? I’d appreciate any supplements.

  9. 19

    Great article! I’d like to add the importance of product photography, and hiring a good photographer to stage photos for a website. After dealing with a lot of clients, this element doesn’t seem to connect with most noobs in the realm of e-commerce and web design. All too often we head right to stock art sites, which never quite hits a relevant visual ‘sweet spot’. Hire a good photographer to take unique, relevant photos and you’re already light years ahead…

    • 20

      Hi Megan,

      That’s a really good point! Thanks for adding it!
      Unique high quality images are very important for how we perceive a brand or product.

  10. 21

    Great article Sabrina! Thanks!

    These tips combined with a good price and good service will give good profits.

  11. 22

    Mark Simchock

    July 12, 2012 6:32 pm

    Perhaps you caught me at the end of a long day but this article just rattles off all the usual cliches and myths.

    “Don’t get too serious.” Really? That’s funny because ultimately copy / content should reflect the brand and the expectations of those interested in the brand. If that entails serious, so be it. I’m having a tough time reconciling the suggestions of differentiation (i.e., stand out) and this check list of triteness.

    re: “Whatever your product, chances are high that at least one competitor offers something similar. To convince people that yours is the better choice, focus on features — particularly those that are relevant or essential to your target group.”

    Pardon me but…not really. Features are for the foolish and the misguided. The optimal perspective is benefits and those should be defined / addressed in the context of buyers’ motivation. For example, “Over fifty third-party skins are available.” is a feature. “Easy to change skins let you personalize your widget and make it your own,” is a benefit *if* personalization is something that motivates the buyer to buy. If it’s not then you just wasted their time and yours. Relevant is kinda close but motivation is the proper target.

    Finally, where is “Remove Doubt / Gain Trust”? This is where it should all start, and end. Doubt is the ultimately deal breaker. If I have a question – any question – and I can’t find the answer easily, that clearly creates doubt. Deal over. Done. Doubt can also be created via design. For example, “Why does this site do _____? (Subconsciously) I don’t feel comfortable. I’m not sure why but I don’t trust this site…Click” Pretty and funny might be pretty and funny but that doesn’t necessarily remove doubt and gain trust. If the design (and content) is a mismatch for expectations then that disconnect is going to be a problem. Minimize doubt. Maximize trust.

    I like Smashing. Perhaps this article was meant for Mashable? ;)

    • 23

      Hi Mark,

      Too bad that you didn’t enjoy my article, but thanks for sharing your concerns.

      I agree that there is an important difference between features and benefits and that benefits might be more to the point and therefore more effective. Thanks for clarifying that. Also I think the part about doubts and trust is important and should have been included in this article from the start. Thanks for bringing it up.

      Of course, not all aspects discussed in this article can and should be applied to any product or service. The presentation depends for large parts on the context and what’s appropriate within that context.

  12. 24

    chrisbower website is a terrible example of a good service site, All it does is talk about himself, he never put himself in the shoes of his target audience to bother to tell them what he can do for them, why should they care, it wastes precious initial time on self centered bs.

  13. 25

    Thank you, I’m enjoying the article, with some examples. I think this topic had a connection to brand identity and marketing.

  14. 26

    Hi Smashing, I posted a comment yesterday and it’s gone..? Just wondering why that was, was it the use of the word ‘trash’?

    Anyway, in the meantime Mark Simchock has basically written my thoughts, perhaps more eloquently. This article seems to me to be just a big pile of marketing clichées (and a random selection of sites using Apple-products to sell their own services) that I sincerely hope no one really listens to it.

  15. 27

    Indeed its very usual to use practices like shown in the article and in fact nothing is honest, new, funny or surprising. Thats a very basic article, maybe useful for startups. I am a little disappointed that smashing never starts an discussion about really creative work (that maybe will not sell good, maybe full of mistakes, but fresh and new and not only a called so creative work) – something outstanding, really new beside all the advertising-pr-trash. Standards are nice and will help to survive. But thats all.

  16. 28

    good insight on the topic

  17. 29


    July 16, 2012 4:53 am

    Great Content
    worth my time reading

  18. 30

    Ashley Feucht

    July 16, 2012 7:41 am

    These are fantastic tips for optimization! Taking this post a step further, it’s important to track how effective your product pages are using digital analytics, because you’ll want to know if your newly optimized content is performing better. At the very least, you can add a basic Google Analytics (or other web analytics platform) implementation. Even better if you tag each key performance indicator. At MaassMedia, we wrote a nice follow-up to this post which lists 5 key website actions you should be tracking:

    • 31

      Hi Ashley,

      Thanks for adding this and for the link, very insightful. It is indeed very important to track performance before and after making changes to find out if it really was for the better.

  19. 32

    Mark Pescatrice

    June 3, 2013 8:45 pm

    I found this very useful. After a ton of rework on one of our sites, we ran out of inspiration for one of our two most visible pages, the home page. This was really helpful in breaking ‘designers block’, so thank you!

  20. 33

    may be the article is bit older one., but the points pretty straight forward.., looking to implement some of this tactics..,

  21. 34

    Love this article. I am a big evangelist of using product videos on e-commerce websites for awhile. The results speak for themselves. The catch is, they don’t even need to be complex to make or expensive. For example, there are affordable tools out there which let you create, test and roll out your complete video catalog in record time. You can expect to get a 1:25 return on every dollar you invest. Pretty good huh? :)

  22. 35

    Great article, and very timely. I work with eWinery Solutions and we actually host the store portion of Jax’s website. They are one of the most progressive customers when it comes to their online approach. Most wineries take a very standard, boring approach to presenting their brand online, but they have done an excellent job separating from the pack.


↑ Back to top