What Makes a Well Designed E-Commerce Product Page?

A website’s home page is usually considered to be the most important page on the site. Home pages are often the landing page, the first thing a potential customer will see and it presents the initial vibe of the company. Whilst we all know that first impressions are very important in the e-commerce world (as in most other realms of life), product pages are also imperative to the success of an e-commerce website.

Product pages are where it all happens; the product display, the pricing, the sizing, the suitability and of course, the actual buying. If your product pages are designed in a way that is not customer friendly or messy with bad photography and unclear ‘Add to cart’ options, customers are likely to click off and move to a more aesthetically pleasing and easier to use competitor.

So, what makes a good and well designed product page?

Content

Content should be placed in a hierarchy. The most important information such as price, should go towards the top and with other information getting progressively lower down the page the less important it is. Most customers won’t read all the information on the page so put what you think needs to be read in prime position.

Title and Price

Not only do these need to be put at the top of the content hierarchy, but on top of the visual hierarchy too. These two things, along with pictures and a call to action, are the most important part of a product page so they need to stand out. You can make these points stand out by making the text bigger, underlined or a different colour.

The image below is an example of this from Bonobos. As you can see, the title is big, bold and clear with the price being the next most obvious thing on the page.

image1

Comprehensive Product Descriptions

In order to turn potential customers into customers, you to fully inform them about what your product is, how it works, what it’s good for and why they should buy it. This means that all product descriptions should be highly descriptive and enthusiastic.

The example below from Nestbox, a company who sells animal nest boxes, demonstrates a good description which is full of useful details.

A Call to Action Which Stands Out

A call to action is always important on any page of a site but particularly on a product page. It’s vital that the call to action is:

  • Strategically placed so that it’s easy to identify.
  • The size of it will indicate its importance so ensure that it’s a good size but not over the top, no need to exaggerate!
  • The colour of the call to action button is important; you want to make it stand out on the page. A good way to do this is to design it in highly contrasting colours.
  • Similarly, the button should be designed to have a good amount of white space around it to visually highlight it.
  • Call to action text should be short and sweet; to the point, simple and easily understandable.

The example below is taken from Grey Haze, an e-cigarette and e-liquid company. Here, you can see that the call to action is clear because it is well contrasted against the background and designed in a colour which stands out.

image3

Product Imagery

Product imagery is imperative to the appearance and effect of a product page. With the amount of media exposure we’re all subjected to these days, the standard of photography and image aesthetics has sky rocketed. Anyone is able to turn an ordinary image into something beautiful with the use of Instagram filters meaning that the standard of photography is at an all time high. As a result of this, companies are having to produce more impressive images than they’ve ever had to previously in order to attract and impress consumers. Therefore, you must make sure that all your product images are:

  • High quality
  • Show the product form multiple different angles
  • Have the ability to zoom
  • Videos are becoming increasingly popular on product pages, particularly amongst fashion sites.
  • In some cases, removing the background of the image is a great way to create a bolder, more crisp and clearer product image.

Below is an example of a product page which showcases a great selection of product images and zoom options but, also has a catwalk feature which brings the product to life.

image4

Social Sharing

Giving the option to share on social media is a great way to engage with customers and get your customers to recommend the product on show. The example of Cath Kidston below demonstrates a really good use of product page social media with not only adding social links but also giving a live Instagram feed of images of the products in use.

image5

Size Chart

Size charts are really important for some product pages; particularly on fashion sites. This is a great way to avoid returns which are bad for both you and the customer. Some sites will choose to have their size chart on a separate page but we recommend putting it on the product page rather than making your customer have to click off the product page, running the risk of losing a sale. This will also improve the user experience.

Here, on the Hera London site, we can see that the size chart is easily accessible from the product page.

image6

Delivery Information

The delivery information on the product page should be very clear and have no hidden costs – secrecy is no way to create loyalty. In the majority of cases, if a customer is well aware of the delivery charges from the word go, they are more likely to purchase an item.

Below, you can see that this company have put their delivery information in a pop up box which is great for giving a lot of info without take up precious space on the actual page.

Reviews

Reviews are essential to e-commerce websites and have been proven to help increase conversions and eliminate any doubt new customers may have (as long as the reviews are positive of course!) You should also give the option for customers to leave a review, making it easy for them to do so.

Here is an example which showcases an extensive amount of reviews whilst also making it very easy for a customer to add a review too.

image8

Tabs

Lots of content is sometimes overwhelming for a customer – a lot of information can be hard to take in. This is why it’s a good idea to split the content into tabs or collapsible toggles. This way, if the customer is interested in particular information, the option is available to read it but if a customer is not interested, the irrelevant content won’t clutter the page.

Here, you can see that ASOS use tabs effectively to give the option of consuming lots of information without overcrowding the page.

image9

Cross Selling within Product Pages

A great way to increase sales through your product pages, is to offer other product options, related products or product bundles at a discounted price. If a customer is already making a purchase, they are more likely to add more to their cart rather than add a first item.

On the site below, the user has access to related products and can see what other people are interested in in relation to the product they’re looking at

image10

Conclusion

Whilst website product pages are all different, unique and tailored to suit different clientele, there are three key elements that all e-commerce websites need to consider:

  • Great content which is simple and organised in design
  • Stunning product imagery
  • At the centre of all design and functionality should be an easy user experience which gives the customer a seamless journey

Launch Roundup: November & December 2015

Over the last couple of months we’ve been lucky enough to work with more – and more brilliant – clients than ever. Here are just a few of our favourite launches:

Grey Haze

Grey Haze website

Long-term Shopify Builder client Grey Haze challenged us to give their vaping store a redesign that would boost their sales and convert their browsers into loyal customers. The e-cigarette market has exploded since Grey Haze first launched and staying ahead of the game requires attention to detail and constant innovation.

We looked carefully at how users moved through the old site then structured the new site so that each of these journeys was as smooth as possible on any device. Featured products and deals are showcased on the mega-menus and these can be easily updated by the Grey Haze team. We implemented sophisticated product filters that guide users from Grey Haze’s huge product range to exactly what they are looking for. We also added rollover quick-add functionality on the collection pages, which makes for a super-speedy shopping experience!

To convert browsers into customers, we used Beans, a powerful loyalty app through which customers are rewarded for spending, staying loyal until their next birthday, interacting with Grey Haze social media and referring friends.

Next up for Grey Haze: impeccably branded email notifications and delivery paperwork to create a seamless brand experience right the way through the shopping journey.

Read more about Grey Haze’s new website

Garçonne & Chérubin

Garconne & Cherubin website

Garçonne & Chérubin create elegant shoes for the ‘flapper’ or ‘cherub’ in us. As designers themselves, the duo wanted a website as stitch-perfect as their products. We love the results of this collaboration: minimalist design, sharp features and pixel-perfect responsiveness.

Although the site is straightforward in structure and design, it’s bursting with little details that make elevate this simplicity to crisp beauty.

Clean white rollovers on the homepage tiles match product rollovers on the collection pages. What’s more, these, along with the homepage slideshow and lookbook, can be edited by the G&C team in seconds. They can even position each slideshow image in the perfect spot using X and Y coordinates.

Clean design is not just about aesthetics: the site has been crafted to ensure users are never distracted from their journeys. We used custom code to integrate the language switcher, ensuring it matched the other menu items and looked perfectly crisp on all screens.

Similarly, signing up to the G&C newsletter does not open a new, non-branded window; once users submit their email address, the text in the subscription field switches seamlessly to “Thank you”.

Luxe Spa

Luxespa website

We’re really proud to have worked with hot-tub company, Luxe Spa, on a website that has helped their brand new business to fly. Having studied their competition closely, they had a clear brief for the website: clean, fresh and easy to navigate.

We created a website bursting with engaging overlays, playful pictograms and design flourishes such as a transforming sticky header and content that rolls into the page. However, behind these beautiful trimmings lies a simple, elegant and purposeful site that funnels users towards key learning and purchasing outcomes.

Read Luxe Spa’s case study

Vivi-Direct

Vivi Direct website

Vivi-Direct offer linen clothing to women of all ages. Established in 1987, the company wanted a site refresh that maintained the continuity of a brand nearing thirty years old, reflected the timeless quality of their products and was welcoming to their target audience.

We’ve achieved this with clean lines, elegant fonts and an update to the brand’s pastel colour scheme.

Writing A Successful Website Brief

A good website brief the start point of a successful website, for both client and designer. By having a successful brief it will allow not only clientele to establish what they want their site to include, but it will also allow for guidance for the designer, not only this it will mean that designers will be able to give an accurate price, which mean there will be no surprises later on. Today Shopify Builder will suggest what should be included in your brief in order to cover all that needs to be covered.

Continue reading “Writing A Successful Website Brief”

Is Shopify Mobile Friendly?

If you have been researching e-commerce or website design, then you may have come across the term “mobile friendly”. For the technically savvy, this is one of the most important features of web design and development in the next upcoming years. For others, it may not seem so important. However having a mobile friendly e-commerce store really is one of the most important features when considering a new build. Joanne Hunt, a Shopify and e-commerce expert, explains why mobile friendly e-commerce stores are so important in 2015, and whether the Shopify platform fits the bill.

Continue reading “Is Shopify Mobile Friendly?”

Where To Get Affordable Custom Web Design for Shopify Platform?

 

According to data from RJ Metrics, eCommerce websites make up approximately 10-12% of the internet. Meaning that there is quite a lot of competition to make a store stand out from the rest. Having a bad looking website or negative usability could mean the difference between success and failure. Continue reading “Where To Get Affordable Custom Web Design for Shopify Platform?”