Designing A Product Driven Website

What’s the secret to a great product-driven webpage? Is it one that dramatically increases online sales, regardless of its look and functionality? Is it one that gets retweeted and ‘liked’ on social media? Or is it one that pleases the web designer’s aesthetic?

When you hear the phrase “product-driven webpage”, you tend to think of the most recognizable brands with product-driven websites, like Nike, Victoria’s Secret, Walmart and Target, to name a few. The Web is rife with excellent product-driven web pages that sell smart consumers great deals on retro candy bars, custom-made tees and even lawn mowers from Husqvarna.

25 EXAMPLES OF INSPIRING PRODUCT DISPLAY IN WEB DESIGN

A great product-driven web site usually involves an optimal mix of the following traits:

• great products
• great design
• great user functionality
• did we mention great design?
• great customer service

Online customers often make snap judgments on a particular site. It’s up to web designers to give them a reason to look around, shop, buy something and tell a few of their friends so those same friends come by to look-shop-buy. Websites like Zazzle, Threadless and Hello Sour Sally succeed in these areas because of their expert, product-driven webpages that propel their businesses every day.

You, too, can have great product-driven webpages like these. Below you’ll find a few tips and ideas on how to best accomplish this and sell more of your products.

Create A Smart Product

What Successful Products Teach Us About Web Design

What are you offering? Is your product great? Does it fill a user need? Can it scale? If so, congratulations. Make it great.

Modern Web Design For Your Smart Product

The Changing Trends in Modern Web Design

Build a site that looks great. Get a short, but memorable URL, something you can easily pass around on social networks. Explain in few words and images what you make and sell, and why it benefits the person looking at the site. If they want it, they’ll buy it. Your product-driven site needs to convince potential customers to stick around to buy.

K.I.S.S.

The Art of Designing User Driven Websites

Keep it simple, stupid. Your product-focused web pages should be self-explanatory. If you are overwhelming visitors with needless instruction, then you’re doing it wrong. Take a look at Zazzle, a website that revolves around providing creative people a place to make and sell their creations. It allows buyers to search and skim the website with a two-column layout and search tags galore.

Accessibility is key. Stick to using either a one or two-column layout, unless, of course, you see a reasonable need for a third or fourth column. Tattly, an online store for the more quirky and artsy folks looking for temporary tattoos, embraces simplicity by choosing a grid layout and minimal design. Know what’s good for you and what works best for your customers.

Embrace The User Interface

E-commerce UI – User Interface Kit

Website navigation shouldn’t be a strenuous task. User interface matters most. Keep site visitors curious. Be interactive. Responsive web design is sexy. But try not to add too many features that, when hovered over, will frustrate users. Try using product integration, for example. If you are an illustrator, don’t be afraid of integrating your illustrations with your web design.

Hello Sour Sally may be the most interesting interactive website for a brand of frozen yogurt ever made. When you reach this website, you find yourself watching a movie and then controlling a little girl’s balloon flight around the webpage to product descriptions and nutritional facts. With each pop of her balloon and new cup of fro-yo reached, you find all you need to know about this company’s products. Now who won’t want to buy your product after you created this great user interface?

Go Mobile

Go Mobile or Go Home: Why Your 2013 Marketing Plan Must Include Mobile

When you design your site today, it has to have a comparable mobile version. Build that into your budget from the start. The percentage of users buying products online with mobile devices has skyrocketed in the last five years. Small mobile screens are in, but smart user functionality matters more here, and can benefit your product sales.

Ease Up On Copy

How To Write Seductive Sales Copy Like Apple

When good copywriting on your site works, stick with it. Too much fancy wordplay can kill your products’ appeal. Decide what works best for your product: less words and more product? Or heavy descriptions and minimal product images? Let images and videos carry the explaining. We are becoming a Pinterest society, finding value in images — let that principle work for your product page. Equal Exchange, a company that prides itself in creating mutually profitable relationships with farmers, dedicated a separate webpage to describing its products. Gorgeous, big images and short, yet informative content feature on the company’s products page. The mouthwatering and minimalist product descriptions are saved for display on the individual product pages in their online store.

Listen To Your Customers

20+ Examples of Product Display in Web Design

On social media, what are your customers and fans saying about your web design? Can they handle the UI? Do they suggest using more how-to videos for your products? Do they want to be able to design their own products and vote for new products? If they ask, then you should answer. Threadless embraces customer interaction so much that they allow anyone to design and sell their own t-shirt designs if chosen by the crowd. The success of your products depend on them, so take user questions and recommendations into consideration.

With these tips, you’ll come to a better understanding of where your site needs to start and where it may need to grow. Make your products-driven site a hit with customers, employees and your team.

You like this? Don’t forget to follow us on twitter @andysowards and like us on facebook @andysowardsfan! We are also on that Google Plus & Pinterest thing.