When you want to buy a present, do you go to the mall or shop online? More and more, people are skipping a trip to the mall for a fast and comfortable online experience.

The goal of an e-commerce site is to lead a shopper to complete 1 task — purchase an online product. As a designer, we need to hook customers by making this process as simple and enjoyable as possible.

Here are a few important things to remember while creating an e-commerce website design.

Next-generation Deal of the Day site

Make the shopper feel comfortable

Simple test… where would you prefer to go shopping: a market that looks like this:

Carmel market in Tel-Aviv – closing hours © Jerzy Kurowski

Or a mall that looks like this:

Shopping mall in Haifa © Zvi Roger

Shopping on the Internet is similar to going to the mall. We prefer clean, well-organized spaces where products are easy to find.

Translating this to online shopping, we can create the same type of organization with these features:

  • Navigation: stays the same on each page and accessible
  • Search bar: needs to be easy to use and accessible
  • Product categories: group and organize products so they can be easily discovered
  • Product information: needs to be detailed, readable and well-structured
  • Contact information: make it easy to find in case you have a frustrated customer with questions
  • Store rules: ideally links from the main menu and/or footer

A lot of the features above aren’t neccassarily in the designer’s control. However, it’s your job to implement ergonomic typography and to structure information in a way that makes it easy to understand.

Balance site quality with site speed

Here is a request designers often hear from developers: “Can you please make it smaller?”

There’s a theory that users will get discouraged waiting for store pages to load, and each “loading” second means another customer is lost. In my opinion, this is not exactly what happens. In some cases, it’s more important to keep the quality of photos high and accompany them with impressive graphics, even if they do take a few seconds longer to load.

This doesn’t mean it’s okay to have a site load slowly, but adding a few seconds is okay as long as you make the wait worthwhile!

Take Converse for example… they have a slightly slower load time but accompany it with quality images of their products.

Avoid a frustrated customer by showing the % left to load on the wait screen.

Make sure to place emphasis on the products rather than the crazy design. Avoid unnecessary elements that don’t have a lot in common with the marketed product.

Decide on a light or dark color scheme

Studies show that light color schemes tend to sell better than dark ones. One could find many reasons for this: light means life, it inspires confidence and joy, releases our energy, and makes us more willing to BUY.

In my experience, even if a customer likes a dark design, they end up choosing a lighter version. As humans, we get better vibes from lighter spaces than dark ones.

iPads: Consumer Electronics

It’s important to research your competitors. If you notice a trend — i.e all competitors use the color brown — there has to be a reason for this and you will need to investigate why.

There are many more brand specific stereotypes for color use. For example, light green and blue are commonly used for health and pastel colors are commonly used for children’s brands.

Nonetheless, those stereotypes are just that: stereotypes, and deciding if one works for your site design is a part of the research process. Anything that can be extracted directly from the brief always takes precedence over stereotype concepts.

Every rule can be broken and this applies to the light color rule as well — a dark background may just work for your company.

Focus on lifestyle brand building

Many brands are lifestyle brands — they embody specific cultures, demographics, values and aspirations of a group for marketing purposes. They engage customers emotionally and socially through events like store parties. So how does this translate to online stores?

Designing an e-commerce site isn’t just about making a nice, usable interface for database orders. Selling a product (especially a high-end product) means targeting and hooking a specific user. And that involves creating an atmosphere that reflects their specific lifestyle.

This client wanted to have a wonderland feel, as you can see with the bunny, cards, owl, etc. 😉

It’s also important to show a brand’s lifestyle by linking to the company’s networks: Facebook, Pinterest, Tumblr, Google +, Twitter, Blog, etc.

Free People – Social Networking.

In short, build brands by:

  • Researching: what lifestyle does a specific product project, what are the competitors, what’s the target group and its culture
  • Creating an atmosphere: stimulate your imagination, be creative and be aware that your design is building a brand
  • Linking social networks: incorporate links in a way that would grab attention and make you want to click
  • Highlighting advantages: show how this site is better to shop than other stores

Emphasize the shopping cart

A virtual shopping cart should be instantly recognizable and easy to find. Intuitively, you’d search for it on the top right section of page. But it can be placed anywhere as long as it’s still visible and easy to recognize.

The standard location for a shopping cart is on the right top of a web page.

An attractive cart icon can improve usability. There are plenty of ways to be creative with a shopping cart, like incorporating it into the logo or stylizing it in a humourous way.

There are cases when no shopping cart is necessary (i.e. when 1 product is being sold). The example below is a unique solution that proves every rule can be broken.

There is 1 product so a cart would only add unnecessary complexity to the ordering process.

Additionally, make sure your cart counts the shipping price as a shopper adds to it. Also make sure to give as many payment options as possible — like PayPal, credit cards, wire transfers, etc.

In conclusion

While it’s often difficult to verify the effectiveness of some web pages, the effectivness of an e-commerce site is immediately evident.

Success means more orders and more satisfied, returning customers. So make sure your customer is taken care of on all levels: front-side aesthetics, comfortable user panel and community related features.

What is your favorite e-commerce site? Share it in the comments!