5 Web Design Lessons I've Learnt from Running an E-commerce Store

| Web Design

ecommerce webdesignAs a content writer, I never thought I'd be running an e-commerce store, but when a brilliant product – and the perfect branding concept - fell into my lap earlier this year, I had to take the plunge.

Now that my store is generating some decent traffic, I'm beginning to focus on refining the design and functionality of the site.

Here are some of the lessons I've learned through the process of running my e-commerce store.

1. Your Customers Need Multiple Ways to Search your Site

You may think you've got a straightforward navigation on your site, but you usually can't account for the random ways customers search. They might want to look at everything in your shop that's colored blue, or everything under a certain price, or everything suitable for a child aged 3-7, or everything with a picture of a penguin on it.

Your store needs more than one way to search every item (items, tags, categories, search by color/size/brand/price, etc), and you need to ensure that every search method is working effectively. Often, search plugins neglect certain parameters and may not include common spelling errors. Check and check your search tools again and again! I checked my store's search bar recently and discovered that it would only bring up 1 item when I typed in "gothic" despite the fact that 14 items are tagged with that term. Ooops!

Book sites such as BN.com are great at giving you multiple ways to browse a site. In the top part of the page alone, there are 6 ways to find different, related products:


2. Design and Content Go Hand-in-Hand

Great design is one thing, but without awesome content to go with it, your e-commerce store is doomed to failure. Although design makes you website look professional, trustworthy and appealing, it is the content that attracts users (using SEO) and gives them the information they need to make a purchase.

As I type, Google is making changes to the search algorithms that affect rankings for e-commerce stores. They don't want low-quality store ranking highly in the engines. The stores that aim to bring value to their customers through creating resources – such as blogs and social media pages about their products, and showing reviews of their products.

With my own store, I found that our blog posts were becoming some of our highest ranked pages, and people were moving from those posts to our product pages. With regular blogging and social media interaction, our page continued to climb up the rankings. Because of this, I've been dedicating more attention to blogging and social media, sharing our blog posts on different social groups and blogging more frequently.

So what makes great content for E-commerce stores?

  • Describe different ways to use a product (e.g. Styling tips for a fashion site)
  • Showcase DIY tutorials (some of the most popular content online)
  • Answer customer questions
  • Allow users to post reviews about your products.
  • Celebrities and niche bloggers using your products.
  • Social media interaction based around your products.

One great example is Lowes.com which is a home improvement store. For them, "Ideas & How-Tos" takes up twice as much menu space as the e-commerce on their site.


Lowes drives sales by helping people get ideas for what they can create with Lowes products:


3. Responsive Design

More and more people are browsing e-commerce stores and buying products from their smartphones and mobile devices. A responsive design allows these users to shop on your site without using a specific mobile-designed site or app. A responsive design responds to the device's screen size, orientation and platform, and delivers an optimized shopping environment.

Although the design I've been using has out-of-the-box responsive features, I've been tweaking it as customers have sent in queries and reviews about mobile shopping. Every month I'm seeing more and more hits and orders coming from mobile users, so responsive design is vital to a store's success.

FiveSimpleSteps.com sell expert web-design books and their store is a positive reflection on their skills:


My other favorite example is Nixon.com which sells watches:


4. Quality Photography

In an e-commerce store your product needs to be the focus of the design. Customers cannot touch, smell, try on or taste a product, so they are buying with their eyes, and you product needs to be as appealing as possible. Whatever design elements you include on a page cannot compete for attention with the product photography.

Originally, on our e-commerce site we had up stock photography of our products from our manufacturer's catalogue. Needless to say, they were less-than-inspired, and we didn't get a lot of customers. I roped in friends to model and photograph our products and we now have a full catalogue of beautiful professional shots, which customers can't stop raving about.

TeslaMotors.com has some beautiful photos of it's cars:


You could probably find a lot of car and clothing websites for this category. One of my personal favorites for clothes is http://cxxvi.net:


5. A Personality

Lastly – but in my mind, most importantly – an e-commerce store design needs to be unique. It needs to stand out. In the world of e-commerce there are other several companies all stocking the same products and competing in a local market, so it is vital your design appeals to your market.

Our first e-commerce store designs were clean and simple. They looked great, but didn't match up to my vision for my store's brand. I kept telling the designer, "Add more personality. Go wild! Have fun!" While we're definitely taking more of a risk than many e-commerce stores with our wacky design and branding, it definitely helps our site stand out amongst our competitors.

Don't be afraid to experiment with your e-commerce store design and branding – by using robust testing methods, you can figure out which elements work, and what needs to be toned down, as you begin making sales.

E-commerce store design has certain features that make it unique to standard website design – but the basics of good design hold true: a good design is one that let's the product shine, and that allows users to quickly and easily find the information they need. Good design = simple, practical, engaging and unique.

My favorite book on this topic is Designing for Emotion by Aarron Walter. Aaron works for MailChimp which is famous for adding personality to it's site:


Other famous examples of e-commerce sites with personality include BetaBrand.com which comes up with product descriptions like this:

"It's no secret that our friend Chef Chris Cosentino loves tasty, salted pig parts. Also, he's been known to wear socks. While looking at some salami tubes one day, he had a revelation: "Tube socks. Salami comes in a tube. Why not salami socks?"


In a similar vein is the e-commerce site Woot.com who take an ordinary product like a kids' toy and sell it thus:

"Hey! Toddler! Looking for a great deal on a way to help you improve your walking? Don't go to one of those fly-by-night used walker dealers! "


Have you ever designed / operated an e-commerce store? What design and content tips do you have?

BIO: Steff Green is a New-Zealand-based writer, blogger and e-commerce junkie. She currently writes about SEO, content creation and social media over on Zen Optimise Blog.

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.