How to audit an ecommerce site for design & usability
Building a great website is hard. Not only does it need to look great, it also needs to perform in search engine rankings, on mobile, and have the secret sauce of getting shoppers to convert.
If you know your website could be better, this one is for you: how to audit an ecommerce site.
There are a bunch of ways you could tackle the massive project of auditing a site. I’ve decided to break it down into three categories: design, visitor experience, and under the hood.
In this post, I’ll cover the design and visitor experience components.
The design: keep it consistent
Your website is the heart of your store. It should appear as though it has been thoughtfully crafted. It should also entice shoppers to buy not only your products, but also a part of your brand.
Just think, if you went to a website that had six different fonts and no color scheme you would probably be a little skeptical about plugging in your credit card information. Good design = trust.
Keep your design consistent by auditing your site for these design elements:
Is the use of font consistent on your site? Look through each page to check that fonts are used in the same way between the header, body, footer, and other elements. Headlines should all use the same typeface, weight, and size.
At most brands should use 2 or 3 typefaces.
Look for these commons mistakes when auditing your site for colors:
- Too many colors. A rule of thumb is 2-5 colors
- Having text not contrast enough with background image or color
- Styling: Stick with the same styling for common elements
- Not underlining or using different colors for links
- Secondary CTAs are always a hyperlink instead of text
Voice & tone
A movie would be jarring if Morgan Freeman and Sandra Bullock kept switching on and off as the narrator. The same goes for your website. Your site should feel like it’s being narrated by one person.
Examine visual hierarchy
The most important things are denoted by placement, size, shape, weight, and/or color choice.
Let’s take a look at these two online flower businesses. How does the visual hierarchy affect the way you feel as a shopper?
This example from Winston Flowers is a calming and well-balanced shopping experience with more or less one main call to action: Shop the winter collection now.
This example from FTD has a side bar fighting for attention with the hero image, as well as a contrasting navigation bar (that is repetitive to the sidebar) and three other offers. As a shopper, I feel immediately overwhelmed by the number of available choices.
While a site should stick to 2-5 colors, the repetitive use of the same colors in all of the flowers give me with the impression that if I’m not looking for a warm color palette of flowers, I’ll be out of luck shopping with FTD.
- Product photos: Blurry product photos diminish brand trust in an instant. Make all of your product photos high resolution and properly formatted
- Product descriptions: If possible, don’t use manufacturer descriptions. This can lead to duplicate content, which is not good for SEO
Create a visual style and brand voice guide
It’s a smart idea to take the time to create a visual style and brand voice guide. With these documents at the ready, you’ll spend less time explaining and correcting contractors or new employees who touch your site.
For the visual style guide, include necessary information like the color palette (with all corresponding color codes), a guide to using fonts, and even examples of what not to do. This guide to writing a style guide from Canva will get you on the right path.
The visitor experience: usability
Going to the mall sucks. It’s a terrible experience. Visitors wander around, hungry, confused, and often end up glassy eyed by the glowing mall map. Don’t let your ecommerce site emulate this experience.
Improve your visitor experience by performing these audits:
Clear calls to action
Is it clear what you want a visitor to do on every single page? If there are multiple calls to action, you are likely sending visitors mixed signals.
This idea follows the design theory known as Hick’s Law: the more choices there are, the greater the chance the person will do nothing.
Pop-ups are an interruption to visitors, make sure yours are worthwhile! A pop-up is an automatic negative experience. By paying attention to your creative, you can turn something negative into a neutral or positive experience.
- All popups should be easy to close out
- Well timed and limited to 1x per web session
- A survey, chat invite, and pop-up all coming up at once is too much. Use one.
Streamline your sites checkout experience
It’s easy to lose the shopper’s confidence by having a shopping cart experience that is not consistent with the rest of your site. Vintage-inspired prescription eyeglasses shop, Warby Parker, is a great example of a streamlined checkout experience.
Have a guest checkout option. This way you don’t have to make users “think” about what they need to do next.
Auto populate information you already have. In this example, I’ve shopped with Warby Parker in the past. They pre-populate my mailing address, billing information, and my prescription.
The entire experience is seamless and feels on brand for Warby Parker.
Common shopping cart mistakes
Don’t let distractions, bad error messages or unnecessary behavior, slow down, or worse, end a visitors check out experience on your site. Unless you have an applicable cross-sell (think batteries for an electronics device), don’t distract someone during the checkout page with other offers, products, or discounts. Let them purchase!