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

ecommerce webdesign

As 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:

media_1377038380108.png

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.

media_1377038124590.png

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

media_1377038289693.png

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:

media_1377037183359.png

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

media_1377037488005.png

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:

media_1377037831588.png

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:

media_1377037968949.png

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:

media_1377036664602.png

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?”

media_1377036756511.png

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! “

media_1377036897538.png

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.

Instructor

  • 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.

0 0 votes
Blog Rating
Subscribe
Notify of
30 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Justin Throngard

Excellent! This article will really help me to show potential clients why they aren’t selling as much as they think they should. I love the “go crazy” idea. Far too many e-commerce stores just want to mirror Amazon.
One thing I was hoping you were going to discuss though is the checkout page. I’ve heard 10,000 different “best” solutions for checking out yet it seems like every site’s customers struggle when checking out. I prefer a 1-Page Checkout system myself but I’ve found that alot of people get stuck on them since there’s no “you did this, now do this, then do this” system of Next buttons to walk them through.
The one offering I will add is related to photos. Far too many store owners don’t have the budget to take high quality images of their products (we are talking $1,000+ per product sometimes). However, there is an easy fix for this. Exploit manufacturer’s and distributor’s images. Usually these partners will want you to sell more products and so will be happy to share their images of their products with you for your use. Sometimes they will send them all on a disc or you can get authorization for your designer to grab them off the “Press” page of their website. It’s helped my clients numerous times and makes their sites really stand out.

steve

Thanks, Justin. That’s a great tip.
For the photos we actually hope to have a follow-up story from someone who gets friends and relatives to help take realistic, warm photos for the products.

professional web design

Wonderful article ..Thanks for sharing it…

rayan redwick

Great work.all the 5 lessons you shared was really helpful in the [url=http://work.so]work.so[/url] thanks for sharing this blog.
[url=http://insigneacademy.com/]vocational training[/url]

Jacks

Great job ! Really it help to design an excellent e-commerce portal.
Thanks,

WRSBuilder

Kevin

Really very nice and useful information to grow and boost eCommerce business. Ecommrce website must be easy to use, professional looking and clean.

Inbound Marking

Love your site and articles, It helps to challenge me to improves what I have started. I am Ecommerce newbie and need help to keep on track to improve! Heep up the good work.

RobinSmith

Thanks for sharing your experience about web design. Your experience will now become lessons or guideline for lots of people in the field of web designing.
[url=http://www.insigneacademy.com]professional courses[/url]

AryanBabeja

All the above points which you have shared here will surely be helpful in making the perfect e commerce website design.Thanks for sharing this above article.
[url=http://insigneacademy.com/]web design course[/url]

JunasaVilton

Great post Steff.The lessons which you have shared in this article about the things for which one should take care while designing e commerce website are very nice and helpful. Thanks for sharing such a nice article.
[url=http://cliffecommerce.com]order processing[/url]

JunasaVilton

I found your blog very nice and unique,The info is shared in the above article about the ecommerce website development is very useful.i have bookmarked this site for my future use.Keep on posting such informative blogs.
Thanks for sharing:-)
[url=http://cliffecommerce.com]ecommerce web design service[/url]

web design company los angeles

good stuff..One thing I was hoping you were going to discuss though is the checkout

page. I’ve heard 10,000 different “best” solutions for checking out yet

it seems like every site’s customers struggle when checking out. I

prefer a 1-Page Checkout system myself but I’ve found that alot of

people get stuck on them since there’s no “you did this, now do this,

then do this” system of Next buttons to walk them through.

web design sheffield

Just awesome. Anyone can grasp a deep knowledge on web designing and client interaction. This post has everything one need to know about deigning our website. I completely agree with the point about having quality photography on websites. It is really important to have high definition photographs on your website.

JenniferMalina

Excellent! the lessons you shared is help us to understand the design on E-commerce sites. It help us to improve your work. Thank you.
[url=http://www.clifftechnologies.com]outsourcing services[/url]

Gurjender singh

Thanks for your great information, the contents are quiet interesting.I will be waiting for your next post.

[url=http://www.admcreative.com/]ADM Liverpool[/url]

web design Rochester NY

Really very and informative post thanks …………

website design Rochester NY

Quite impressive post thanks for share………..

danny kelan

nice stuff i like it

Punjab mobile

Excellent! This article will really help me to show potential clients why they aren’t selling as much as they think they should. I love the “go crazy” idea. Far too many e-commerce stores just want to mirror Amazon.
[url=http://www.flexsin.com/]ecommerce[/url]

website design Rochester NY

Hi, you explained the topic very well.

Randy

Thanks for this nice share, with your great tip I will have the idea on what to do for my future projects and plans. I will be looking forward for your next share of impressive tips.

[url=http://www.higherimages.com/website-design]web design[/url]

website design Rochester NY

I think the things you covered through the post are quiet impressive,

Liz@OnlinePhDUK

wow…good article…done the bookmarking….

Liz@OnlinePhDUK

brilliant ideas…thanks for sharing!!!

Alex Wayne

Simplistic and hell lots of information in one place. eCommerce websites really need to be more human in approach as they are dealing with humans and they will be the one who will raise their revenues by buying the goods. Having a personality is one most important. With this comes creating Brand Personality that we all must have learn with either experiences or academics.
Different Filters and searches are another important features to keep the navigation and use of the website user friendly.
[url=http://www.way2webscape.com]Professional Website Design[/url]

website design kent

Excellent Article! Thanks for your sharing

Guest

As one might expect that when anyone hop in to a website regarding the desired one then it goes without saying that precise content along with the perfect definitions of the punctures associated or tagged to identify the desired one. In addition, well-appropriated links need to add to enlarge more information. Secondly, photography is another main part along with the great placed pasteurization is the best possible factors to make the website worthy for anybody. Thus one could draw the conclusion that above mentioned tips and tit bits are the basic plus important enough to make any website.

K2B Solutions

What are the ways to create animation using CSS3?

Md.Shariful Islam

Really Awesome !!

Jack Martin

Great Tips!
All the elements of a website from design to content makes a website successful.
Every business needs ideas to make improvements and grab more traffic.
Thanks for sharing these amazing tips. It was really useful to me.

30
0
Would love your thoughts, please comment.x
()
x