January 23, 2018

Tips for Designing a Product-First eCommerce Website

In order to make successful and continual sales and transactions online, your eCommerce website needs to have some essential product-first elements. A few of these include: professional product photography, product information/descriptions, search bar, breadcrumb navigation and easy-to-find account information in the header. Find out more about each of these important features and why they are important for your eCommerce website below.

1. Professional Product Photography. I know, I know it can be expensive and time-consuming to invest in a nice photographer but if you are already going and doing-so with your website, professional product photography is a must. Your potential clients want to be able to visually analyze the products to make sure they are purchasing the right items. Not to mention, your competitors are already doing it. Photography should be clean, simple and on minimal backgrounds to create a user-friendly and professional feel. Avoid using product photos that are too small which can cause distorted/pixelated imagery, dated photos or photos with bad lighting. It’s also smart to pick a neutral or consistent background to keep your site aesthetic clean and uncluttered which can happen with too many competing backgrounds sometimes. Overall you want your products to be the center-of-attention on each page and this can best be achieved with professional photography. Check out our recent website launch, Tommy Bahama Furniture, which has great product photography for their high-end furniture.

Tommy Bahama Product Listing Web Page
2. Think like a Consumer and include all of the necessary Product Information. We already touched on imagery which is extremely important but there are also other necessary features associated with making sales on a website. These elements include: obvious pricing and sales information, product variables (color, size, material, length), a clear call to action to Add-to-Cart or Request More Info and quantity for user looking to purchase multiples.

Tommy Bahama Product Detail Web page
3. Product Descriptions: Short and sweet is best when it comes to the descriptions here since most readers typically scan what they read when online anyways. However, it’s a good idea to have all of the right keywords and information for those who prefer to read the details about their products before purchasing. Bonus: this will also help with Google rankings so it’s really a win-win situation.

4. Product Breadcrumbs: Simple but underrated, these just help the user navigate back to where they came from. It overall helps with usability and a user browsing your site and multiple products/subcategories. Another nice benefit of these is they don’t have to take up a lot of real-estate on your website so they aren’t distracting from the main navigation or products.

5. Easy to use Search Bar: Often times a user will come to your website already knowing what they are looking to purchase. In this instance, it is easier for the user to utilize the search bar feature often seen on eCommerce sites. This way, they can just type in the product name or a description of the product (Example “red medium women’s fleece jacket”) rather than going through the main navigation which might have many categories and subcategories. Check out our site design, Atlas Copco, which has a clear, easy-to-find Search bar in the right of the header and repeated in the center of the website for increased usability.

Atlas Copco Homepage Web Design featuring the marketing panel
6. Shopping Cart info in Navigation/Header. Including a small amount of shopping cart information in the navigation or header (usually top right) has become very popular on eCommerce websites and it’s easy to see why. Including this information allows the user to click (or rollover) and see what they’ve already added to the cart and the more details provided here the better (size, pricing, product descriptions). It’s also smart to include a “check-out” CTA here for users looking to go ahead and complete their purchase from there. Check out our product rollover on the eCommerce website, Talk-two-way, which shows some necessary cart details for their users.

Talk-two-way shopping cart pop-out

Here at E-dreamz our focus is on eCommerce solutions and Performance-Based marketing. Contact us today to get started on your website and/or eCommerce needs!

By: Jane Londeree

Senior Web Designer