Designing the Expected

A large part of the work my design practice Alloneword conducts is around the ecommerce platform Shopify, and with a raft of new work to be proud of, an application was submitted to become an accredited Shopify Expert at the end of last year. The application process has a lot of prerequisites, and for all the different categories (store setup, development etc) you really need to demonstrate you can do what you say you can, from knowledge of the platform, to cutting the design mustard. 

When I finally got the email to say I’d been accredited it was really exciting, and I couldn’t wait to tell the world, but to my dismay I hadn’t been approved for design services. I was confused, as I’ve spent nearly a decade honing my skills, achieved the role of Creative Director at a reputable agency, and worked with a variety of ecommerce projects. I quickly got on the line to my contact there, and was told that this was due to the fact I’d not ‘customised’ the platform enough. On further discussion, it seems the reviewers of my work hadn’t seen enough of the weird and wonderful (I’m paraphrasing of course) in the Shopify websites I’d produced. Thing is, I believe when it comes to things like conversion rate and purchase journeys, breaking the norm can be bad, lead to confusion and loss of sales. I was incredibly proud of the work I’d submitted, so I sat at my desk, cracked my knuckles, and started to mentally prepare my response.

Before I go further, I want to explain that my (long winded) segway into the subject of this article is my no means a dig at Shopify. I think they’re great, genuinely. They’re responsive to my queries, keen to help, and offer up solutions to problems. They were just being protective of who they allow to be listed on their website as an Expert in design. This whole episode just got me thinking, and making yet another mental list, about what should and shouldn’t be allowed creative freedom and expression when it comes to designing an ecommerce website. Sure we want to have something special, innovative and unique, but do we do that at the expense of sales? No. No we don’t. 

The following are some of my top areas to consider and review when designing a new or maintaining and existing ecommerce website…

Navigation

Starting with the handlebars to a website, the navigation is the staple part to the overall structure of the site, which allows our customers to browse, explore, go back and prod. We’ll want to present this information in a usable way, so someone can clearly see what’s on offer and go to what they need. Now I’m not saying that all navigation on a website needs to look the same, that would be boring, but think about the fundamentals. The navigation is there to be quickly read and digested, then a selection made. This means items should be short and succinct. Icons can help flag common elements, such as a magnifying glass for search, but don’t use icons for the sake of this, as it just adds clutter. Give enough space around the item, and if it has more elements within it, such as a dropdown, show that that’s the case. 

Overall with a navigation, people should be able to use it without having to learn any new behaviours. Sure, there can be some nice touches, visual flourishes or subtle interaction animations in there, but don’t let that distract on what it’s there to do, get people to pages and products. Think of it like a car interior; it’s different and you may have to do a quick scan of what you’ve got when you first get into a new one, but (if you can drive of course) you should be able to get it going and doing what you need quite quickly.

Forms, inputs and buttons

Most websites will have these, and ecommerce definitely will. In 2018 we encounter these on a daily, even hourly, basis, and we now interact with them without thinking. This wouldn’t have been the case as little as 20 years ago, and even a simple contact form would have been tentatively approached, whereas these days we’re not even aware we’re doing half of them. When you break down a form, comprising inputs, dropdowns, checkboxes and buttons, they are complex little bits of kit. You have active states to show the one you’re currently working on, we need to highlight if information has been entered incorrectly, and ultimately we need to know what order we need to do a series of separate little tasks.

If a martian landed on earth and decided the first thing he needed to do was online shop, we have a lot of explaining to do on the form part of the purchase journey. We’d have to tell them the text above the box was what it was asking for, and even that the box was something that could be clicked into to type it. Luckily, this doesn’t happen, and as explained above people come already armed with a lot of knowledge. To make the journey as fluid as possible, we shouldn’t tinker with the notion of a ‘form’ too much, as we’ll then have to teach them our adaptation. This all takes cognitive processing power away from buying the product and staying focused, and onto thoughts like “is that a text, input, or a button”. 

Again, this isn’t to say all forms should look identical, but review your design to see if any confusion could happen. Do buttons look similar to inputs? Is it clear that the text label is for that specific input? And would a person on first glance be able to identify any dropdowns?

Content and micro-copy

Content is a subjective thing, and what suits one brand and website well, would have an adverse effect on another. While your brand may be fun, and playful and show the human element, don’t get too caught up with rolling this out on every little piece of content on the website on things like buttons, toggle actions and pagination, which we refer to as containing micro-copy. 

Think again about taking in the interface at a glance. Important elements such as the ‘add to basket’ button need to be clearly visible, so even if they aren’t needed right that second, someone knows where they are and what they do. While it might give whimsy to label that button something like “Let’s get moving”, it’s too subjective. That button could be for everything from a contact button, to toggling more information.

In addition to this, take a step back from your website and look at the micro-copy as a whole. Do we refer to it as ‘basket’ in places and ‘cart’ in others? Do we position content from our standpoint as the service provider, such as ‘your account’, or the customer’s ‘my account’? Reducing down this disparity will reduce down the thinking time and learning that has to happen with your website, and ultimately aid conversion.

Product pages

For any ecommerce site, this is the make or break page. This is the place where a potential customer will make their decision, so we need to keep them focussed, without trying to ram the sale down their neck. There’s also potential variants to that product, and different quantities they can buy. Done incorrectly, pages can be confusing at a time we really need them to be simple, and implemented well, sales will naturally start flowing.

One of the first things people will probably want to see is the price. They may have seen it as part of a link or on a thumbnail, but they’ll want to check. Is this in a clear place? Hidden it can come across the price isn’t great and we’re trying to bury it. Consider putting the ‘buy’ or ‘add to basket’ button near here too, so it can make itself known and can be utilised as soon as that decision is made. Referencing a previous section about inputs and buttons, if there was ever a time for a button to look like a button, it’s here.

People will also want to see the images of the product in most cases, so are we presenting them with a usable way of doing this? Thumbnails in my option work best, as you can scan to see the offering of an image, whereas sliders you have to go hunting.

Also try subtle encouragements like letting people know it’s in stock, or even when it’s running low. Suggested or recommended products can also work well, but be careful not to keep distracting people from the main objective of that particular page.

Basket and checkout

Ok, so we’ve got someone to add to the basket without having to give too much thought to the interface of the website. Great! The final challenge is getting them to complete without getting distracted, bored or just generally down about the forthcoming steps, as there’s a lot of them. We’ll need them to review their order, capture their payment details, then find out where they need it shipping.

This normally (and should) take the shape of a basket page, followed by checkout pages. The basket page should be tabular data about the key information for each product added. Title, image thumb, individual price, quantity required (with the ability to edit) and total for the quantity. There should also be an easy (but not too easy) way to remove this line altogether. On mobile you should be able to lose some of this, so try to prioritise the necessary information. If we know the price per unit and the quantity, do we really need to show the total cost for that line if we’re showing the basket subtotal?

As you start to think about next steps from this page, see if you can give a chance for capturing any information that a customer might want to tell you or you need to know, and always try and give insight as to anything needed on the following steps.

Final thought…

From a user experience point of view all of the above is not to be ignored, but don’t let that hem you in. While the purchase journey is the crux of the ecommerce site, there’s plenty of ways to flex your creative muscles and inject something new into a website. Consider the homepage and how you position promotions and key content. Lots of sites seem to go with the dated slider, but can you try something new? A large search area, typographically interesting positioning statement, or even experimenting with load in animations. 

The world would be boring if all websites were the same, but think of the main goal of your ecommerce site: to sell. Treat it like any other member of the sales team; show personality, but be concise, give the customer what they’re looking for, and don’t confuse them in the process. The best way to make someone happy is by selling them your product (if they want it) and all in, we shouldn’t expect them to care about our website really. As the economist Theodore Levitt once wrote: “People don’t want to buy a quarter-inch drill, they want a quarter-inch hole”.