Hook shoppers with your e-commerce website design

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!

The author

Joanna Krenz Kurowska & Jerzy Kurowski
Joanna Krenz Kurowska & Jerzy Kurowski

Joanna Krenz-Kurowska has been working as a freelance graphic designer and web designer for 13 years. She lives in the mountains in the south-west of Poland. She has spent the last few years working for clients on five continents, writing about web design and technology for the 99designs community blog, winning dozens of web design contests and following her passions: art photography, running marathons, and graphic arts. She is a member of the New Mill Artists' Colony art union. Teaming up with Jerzy Kurowski, she creates complete digital products like websites or multimedia programs. She loves challenges like bathing in ice air holes, long-distance mountain running, or exploring new areas in web design. More about her work on 23dragons.com. My 99designs profile: http://99designs.com/users/413631. Email: jkk2332@gmail.com

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.