Adobe Creative Cloud

March 3, 2016 /

Everything You Need to Know About Designing for eCommerce

The eCommerce world is a very particular environment to work in as a web designer.

On one hand, you want your work to always look great, and to always deliver an optimized browsing experience to the visitors.

But on the other, there’s only one measure of quality in existence for eCommerce. That measure is conversion rate.

In other words, a well-designed eCommerce website is one that converts and makes sales.

Everything else needs has to take the back seat.

A quality eCommerce design achieves two main goals: (1) it delivers customers a seamless shopping experience, and (2) it gets them through the individual steps of the shopping process as effectively as possible.

In a nutshell, think conversions, not beauty. This is how you land on a quality eCommerce design!

But let’s emphasize on this. Let’s take a look at some specific things you can do to improve your eCommerce design by focusing on conversions and sales:

1. Think, content first

As a web designer, it’s easy to lose yourself in the process of working on a new site, and end up with something that’s, albeit beautiful and functional, kind of overdone.

To give you a real-world example. Swiss Army knives are great and functional tools. But if all you need to do is cut off a piece of bread then they’re probably an overkill.

Some eCommerce sites tend to suffer from a similar problem. So be careful, and think content.

At first, this might sound like something that Captain Obvious would say. However, in practice, there’s way too many websites out there that have very functional navigation structures, great menus, great on-trend visual elements, and so on, yet the main content is delegated to simply sitting inside a column in the center of the page, without any effort to make that content shine.

So in a nutshell, the advice is this: start with your main content – the products – and then build around that content using other design tools. Not the other way around.

Here’s a great example by MyOwnBike.de. Even though the website is in German, we can clearly see high focus on the main bike configurator, sitting there right in the middle:

myownbike

2. Copy is what makes or breaks eCommerce websites

One of the difficult parts about doing an eCommerce design project is that sometimes the design and the copy isn’t handled at the same time. The designer is forced to only work with dummy text, which makes it really hard for them to predict what the final copy will look like, or even what the volume of it is going to be.

Although this can be a difficult thing to do, a good eCommerce web design process requires to think through the copy structure beforehand. This also connects with the content-first approach, and it’s likely the only way to guarantee good copy + layout structure in the final product.

Having the copy structure agreed upon ahead of time will allow you to create good headers, good description blocks, product detail blocks, review blocks, and etc. And above all else, it will also make sure that the marketing language – the copy – and the user experience language – the design – play in the same team.

  • Start your work by meeting with the client and the person who’s going to write the copy.
  • Work through the individual elements that need to go alongside every product listing.
  • Focus on what needs to be showcased on the page, and how this needs to be done to maximize conversions.

3. Make room for quality product images

The value of good imagery is undeniable for all web design projects, but probably even more so in eCommerce.

Eventually, a good product image is what makes the sale, or at least participates in the sale heavily.

At the same time, product images shouldn’t be treated as something that you just “show next to the description.” Images play a lot more integrated role in the user experience and shopping processes.

Consider these concepts:

  • Use close-up mechanisms to show the details of the products. Very useful if the store sales physical products rather than downloads. Amazon has been doing this for years.

amazon

  • Use not only product images (on white backgrounds), but also “in-use” images – images where a person can be seen using the product. This works great for showcasing the lifestyle associated with the product, which is often a powerful selling mechanism. Especially for things like clothing, furniture, or appliances. Here’s how Casper does this:

casper

  • Wherever possible, go for large images. The data seems to be clear on this one, large images bring more sales (one experiment indicates a 9.46 percent increase in sales as a result of using larger product images).
  • And most importantly of all, make sure that the images are mobile optimized and that they work with no glitches. For example, if you’re using a close-up mechanism, it can often glitch on smaller screen sizes, and prevent the user from getting to the product description or even to the buy button. Keep in mind that the cart abandonment rate is at its highest for mobile (97 percent for mobile vs. 70-75 percent for desktop), so it’s really more than easy to discourage and scare off a mobile visitor.

4. Go “material” or “flat”

We talked a lot about material design and flat design in the last couple of months. They surely have their pros and cons, but what we have to agree on is that they’re usually highly optimized for most types of devices and screen sizes.

Additionally, they’re also naturally easy to grasp and user-friendly. Combined with a good dose of minimalism, you can use either of those design styles to create an effective eCommerce shopping experience.

Start by putting sufficient focus on the central part of the design – where the products are – and then use only a minimal amount of elements to reinforce the navigation, branding, and other side elements.

Here’s an example of how Hard Graft does minimal design:

hardgraft

5. Consider using cards

Cards are the new black in web design.

Okay, I may be exaggerating, but you get the point … cards are incredibly trendy (we talked about this a couple of months ago).

Building your eCommerce website design around cards brings a couple of handy benefits:

  • Cards are naturally responsive. They scale well, and not only going smaller, but also going bigger – for big screens. Worrying about our designs rendering on mobile phones is basically in our blood at this point, but working with big screens isn’t as common. However, a huge number of people on the internet use screens that are at least 1920 pixels wide or higher. In a situation like that, you need to make sure that your design can cope with that. Cards make that simpler.
  • Cards are self-enclosed. This means that “a product block” is going to be easier to grasp for the visitor. And as we all know, less confusion = more conversion.
  • Cards are minimal and in tune with material and flat design. Cards are often your shortcut to material or flat. Quite simply, if you’re looking for a template to build your eCommerce design around and make it flat at the same time, cards are your way to go.

Here’s an example by Watb:

watb

6. Have speed in mind

Let’s stop for a minute and discuss the (seemingly boring) issue of site speed.

As we all know, the more feature-rich the design is, the more time it’ll take to load.

And although those numbers might be hard to imagine, even the slightest delays can mean serious losses for an eCommerce business.

Just to give you an extreme example, if Amazon increased their page load time by just +100ms, they would lose 1 percent of their sales … we’re talking billions of dollars here. For a more hands-on example, it’s also reported that 40 percent of all visitors will bounce if a web page takes more than 3 seconds to load.

What this means in plain English for a web designer is that if the solution they’ve built isn’t optimized enough, and it takes more than just a couple of seconds to load, then the whole effort that went into building the website is basically wasted.

In the end, and speaking even more bluntly:

A great design that’s slow isn’t a great design.

How to solve this? Always – I really mean always – test your eCommerce design on the exact server environment it’s meant to run on, and make sure that everything loads in (preferably) sub 1 seconds.

If it doesn’t, trim.

7. Design the checkout experience as well

The checkout experience – what happens after someone clicks on “finalize” in the shopping cart – is often left out from the main design process, and especially if the eCommerce site in question is done in a hurry.

Most shopping cart solutions have all of that already built in, so we can feel tempted to leave things as they are. However, those are not always the most optimized checkouts, simply because they need to function with a large number of site designs, different page templates and layouts. Some compromises had to be made.

That’s why you’re better off handling the checkout design by yourself, and making sure that it’s optimized for your specific project and the type of business behind the site.

Some of the things to take care of:

  • make sure that everything responds quickly enough (the speed issue we talked about in the previous point still applies),
  • design the forms to be understandable, simple in structure, and consistent from page to page,
  • use progress bars (or some other indicators) to show the visitor that they’re on the right track to complete their purchase,
  • always display a summary (can be in a sidebar of some kind).

8. Take advantage of large imagery

We talked about quality product images in #3, but there’s still one image-related thing that should be discussed separately.

Minimal designs are tough for branding. Basically, the more things you strip from your eCommerce design, the more difficult it’s going to be to make the website stand out and convey the store’s brand.

This is where large images come into play. When used as background, for example, they can convey the business’s message, mission, and even what type of customers the business is selling to, all in one picture (after all, a picture is worth a thousand words).

Here’s an example of how Bonobos uses this concept:

bonobos

Large images are also great for promotions. Nothing gets attention more than a colorful image block, with some large typography.

Speaking of which…

9. Use large, bold typography

These days, having custom typography on a website has become much easier to achieve than just a couple of years ago.

Most of us can recall the set of “web safe” fonts that we were all encouraged to use back in the day. Otherwise, we were risking that our design wouldn’t render properly on some computers.

This isn’t the case any more. With solutions like our own Typekit, everyone can include even the most unusual fonts in their website design, without having to worry that they’re not going to work on some obscure computer.

typekit

This has opened a lot of possibilities for modern eCommerce designs. After all, if you want to make a sales message or a headline visible, why not just use huge and bold typography for that?

10. Don’t forget about the common eCommerce site elements

There’s a set of elements that should be present on most – if not all – eCommerce websites. Make sure to have them in mind when working on your next project:

  • Related products. Having some sort of “related products” listing is a store owner’s best way to generate more sales without spending more funds on marketing. A related products block is usually placed beneath the main product description.
  • Customer ratings or reviews. There’s one sad truth about selling anything on the web, and it’s that people generally don’t believe what the salesman says about their products. They do believe, however, what other customers say. That’s why customer reviews and ratings are important.
  • Useful navigation. Depending on how large the store catalog is, you might want to either categorize the navigation, or display it as a mega menu. In some cases, you can also try hiding the menus for more minimalist appearance of the whole design, and better mobile friendliness.

Did we forget about mobile?

The short answer is “no,” we haven’t.

These days, making your website design accessible on mobile – be it for eCommerce or otherwise – is an absolute must. But I’m sure you already know about that.

Responsiveness, usable store interface, mobile-friendly checkout process … all of that simply has to be present in a quality eCommerce design.

At the end of the day, the game indeed really is about conversions and sales. If I were to give you a one-sentence summary, it would have to be this:

Think conversions, not beauty. This is how you build an eCommerce design that performs.

Join the discussion

  • By Zubair Ahmed - 1:32 PM on March 4, 2016  

    Nice article 1 think i have noticed.make website simple & easy to use is a important point. if you use lot of images animation the user will boring & close the tab if the website gain time to load.