Increasing Ecommerce Sales with Usability & Emotional Design
We've created a framework that makes it easy to create user-friendly, data-driven retail experiences.
The Masterpiece Model contains 5 components that constitute what we've observed—through the evaluation of thousands of online stores—to be successful.
As an optimization studio, we’re focused on marrying exquisite visual design with tactics based on the latest consumer research. While others give graphic design the back seat, we bring it to the forefront as a central function of the customer experience.
Relevance
This component of your website is straightforward—it's less about tailoring your message to the audience and more about clearly (and concisely) explaining three things: what you sell, to whom you're selling it, and why that audience should care.
Clearly define your product offering.
Don’t be cute. Be clear. What exactly do you offer to your market?
Graza, a company that sells top-shelf olive oil, has 11 words in their hero section: “high quality olive oil that’s meant to be squeezed, not saved.” One phrase is all it takes.
Appeal to your target audience.
Professional branding is a necessity for all businesses. It’s absolutely critical for online retailers. Visitors feel an emotional connection to brands that align with their preferences. Your ecommerce website should amplify your brand personality.
Phil’s Finest sells high quality meat, blended with vegetables, in exciting flavors. Their website conveys a fun, casual vibe. Their font and color choices accentuate an upbeat tone and exceptional photography. They aren’t trying to connect with the traditional carnivore; they’re speaking to a more adventurous consumer who yearns for something unique.
Clearly define your value proposition(s).
Why should your visitors care about what you have to offer? We’re exposed to 74 GB of information—the equivalent of 16 movies—each day. Show your visitors why they should remember your brand. Stand out in the sea of sameness that we’ve all grown accustomed to.
Genexa makes over-the-counter medicine for a variety of ailments. They’re unique because they use clean ingredients. They’re also the first to do it. They communicate this in their homepage hero section, leaving no question as to why you should care about their products. Marketing hype? Maybe. But it makes them stand out among the brands we’ve seen for decades.
Use messaging & design that’s consistent with marketing campaigns on landing pages.
When you send visitors to your website from a marketing campaign, send them to the most relevant page available. If a relevant page isn’t available, make one.
In a search for “men’s boots,” I get an ad for Thursday Boot Co. The ad quotes Esquire magazine in their review of one particular boot style. The landing page features a photo of the boot above the quote. Thursday Boot Co delivers a landing page tied directly to the reason I clicked the ad.
Trust
On the web, trust is visual. Studies have shown that a few factors play a role in users' trust in a website: quality of information, perceived ease of use, and perceived risk 16. One concept should be prioritized when it comes to handling perceptions: the aesthetic-usability effect.
Optimize your website for speed
There’s nothing to show here. Fast load times are the price of entry for ecommerce success.
According to a study from Google, an increase from 1s to 3s in page load time made it 32% more likely that a visitor would bounce. The average mobile page load time of a retail website is 6.3s. Don’t be average.
Use a well-designed cookie consent solution
They’ve invaded the web over the last few years. Until we move to a new tracking technology, they’re here to stay.
If your website is GDPR & CCPA-compliant (hint: it should be), you’ll need to get consent before collecting any information from your visitors and their devices. It’s also the ethical thing to do.
Necessary doesn’t mean ugly. Your consent notification—no matter its form—should match the look and feel of your website. Rather than looking at it as another thing to check off your list, look at it as an opportunity to further establish your brand.
Routinely, a Dutch skincare company, uses an on-brand cookie consent banner that lines the bottom of the browser window. The calls-to-action match the rest of the site. It’s not visually intrusive, but it’s clearly there.
Most cookie consent solutions have customization capabilities. Take advantage of this to provide a consistent visual experience across your website.
Use familiar design patterns
“Users spend most of their time on other sites.” Jakob’s Law of internet user experience observes that your website visitors spend a tiny fraction of their time on your website. Most of the time, they’re exploring any of the other 200 million active websites in existence.
Visitors expect your site to work just like the others they use. Uncertainty erodes trust. Your navigation, hero sections, and first screen of product pages should follow the patterns we all know and trust from around the web.
Present your brand professionally
Branding is the root of trustworthiness in business. You can’t compete with industry leaders if you don’t have professional branding.
Even brands with well-designed logos fall victim to poor presentation. Bigger isn’t always better. Spacing doesn’t need to be reduced so you can fit more above the fold. Aim for contrast. Use other elements—photography, spacing, color—to strengthen your brand presentation.
Bather is a Canadian casual fashion brand that lets their products do the talking. Sure, they have a nice logo; but that’s only part of the point. It’s placed where it should be, appropriately sized, and buffered all around by the perfect amount of spacing.
Only use high-quality images
If there’s one distinction that defines a “great” ecommerce website, it’s imagery. Visuals are central to immersive experiences.
Give visitors the ability to envision your product in their lives. Who will they become once they own your products? Every product leads to a transformation—no matter how small.
Quarter produces low-alcohol gin. They don’t sell the spirit; they sell the lifestyle that accompanies the product. Their imagery is colorful and full of movement. Photos include people squeezing garnishes, reaching for a drink, drinking from modern glassware, and pouring mixers. The settings are pools, patios, and shelves of vinyl records. The models are diverse.
Exceptional photography tells a story that words can’t convey. Use well-composed, professionally-shot photography and video.
In the trust stage, it’s mostly about looking professional. Nothing says poor quality like low-res, poorly shot imagery.
Use consistent spacing in your layout
Equal spacing between elements creates a visual rhythm that allows users to interpret your content. The mark of professionalism in many crafts is consistency. Web design is no different. Inconsistency leads to the perception of poor quality.
Brightland uses a three-column grid, then centers each content item inside for a clearly defined arrangement. Spacing above and below the paragraph text is equal.
Stay consistent to achieve visual harmony and deliver a delightful browsing experience that radiates quality.
Use appropriate negative space in your design
It’s tempting to fill empty space with more content. Your goal is to sell more, so adding information seems like the best way to maximize your odds.
In comedy, pauses make punchlines more effective. The negative space we use in verbal communication is as important as what we say. Use visual pauses to drive visitors’ focus to the content.
Aēsop uses an abundance of space throughout their site. The result is a museum-like browsing experience. They don’t use larger headings or more photos to bring attention to their products—they use more space.
Ample space conveys quality and cleanliness; important elements that build trust. Think about the difference between shopping at the Apple Store and Costco. Which store—visually—reinforces a feeling of quality when you arrive?
Create visual balance throughout your site
Balance, in the context of design, refers to the distribution of the visual weight of graphic elements. Contrast is the measure of visual weight. Large, bold text has a much higher visual weight than paragraph text. Dark imagery on a light background is much heavier than light imagery on the same background.
Cometeer flash-freezes the best coffee on earth for delivery to their customers. Their website uses a grid, so it’s easier to see how they achieve balance throughout the design. In the lineup of roasters, they’ve weighted the array with the darkest (highest contrast) images in the middle. Lighter images stagger and surround the darker images so the heaviest visual weight is in the middle of the arrangement. This is the epitome of visual balance.
In the next section, Cometeer brilliantly breaks this balance to draw attention to content. The image is darker than the content to the right, ensuring that focus shifts to the visual of how to use their product.
Visual guidance creates certainty for users. Certainty fosters trust. Use visual balance to guide visitors through your experience.
Say enough, but not too much
No one wants to be greeted by a wall of text. Short bursts of information can create the perception that you have something to hide.
There’s a goldilocks zone where your content is most engaging. It’s somewhere between overwhelm and deception.
You can find this balance by choosing words and phrases that carry meaning. Be less eloquent; be more direct. Clarity is essential in establishing trust with your audience.
Health by Habit makes every word on their website count. They understand that visitors aren’t landing on an ecommerce site to read a novel. The what, how, and why of their products is delivered in a manageable cadence; not the easiest task in the supplements business.
Users scan webpages for information that’s relevant to them. Use headings, short paragraphs, and lists to keep your content concise.
Link to your social media profiles
Having a presence beyond your website is vital. Google uses backlinks (links from other sites) to assess website trustworthiness. Visitors do the same when they’re evaluating your company.
In a 2020 study, researchers found that social presence impacted trust slightly more than guarantees/warranties. Source
Sock Fancy showcases images from their Instagram along the bottom of their homepage, with a link to their profile. Below this section, in the footer, there are additional links to Twitter and Facebook.
Show off press mentions
Trust transfers from one brand to another. For the same reason we trust word-of-mouth referrals from friends, we trust the words of brands we love to tell us who else is worthy of our attention.
When your products are reviewed or mentioned by well-known media outlets, highlight that on your homepage. Include excerpts from specific reviews on your product detail pages.
Media outlets don’t always have to be household names. Industry publications, blogs, and content creators are also effective.
Snif isn’t shy about their press mentions. Four excerpts are visible right at the top of their homepage. The quotes and logos provide an instant credibility booster from the start of the visitor’s experience.
Display your contact information
Visitors want to know you’re real. List contact information like phone number, a direct email, even address if you have an office where mail can be sent. Live chat and SMS also indicate that you’re available at a moment’s notice.
Link to your shipping & return policies
Include links to any shipping, handling, delivery, and return/refund policies in your footer. You won’t find many visits to these pages, but their mere existence establishes trust. You should still make sure they’re well-written.
Link to your legal notices
Avoiding legal exposure is good business.
Privacy is also top-of-mind for many consumers right now.
Include links to your terms and conditions, privacy policy, and cookie policy in your footer. Give the pages a look that’s consistent with the rest of your website.
Highlight any certifications & awards
Tell visitors you have a quality product without telling them you have a quality product. Awards, and even certifications, from industry organizations can boost your credibility in a major way.
Validation from a third-party (especially a renowned one) can quickly establish trust and pique a visitor’s interest.
The Lost Explorer doesn’t waste any time presenting their accolades. Their hero section uses a carousel to showcase their three variations of mezcal. Each one positions several awards across the top of the image. Visitors have hardly had the time to learn what the product is; they already know it’s great.
Usability
Content is great, but not if your visitor can't easily find what you want them to see. Your visitor should understand where they are at any given time, and they should always know what you want them to do next.
Examples coming soon.
Desire
Captivating your users keeps them motivated toward conversion. Knowing your audience is the key to understanding how you can do this most effectively. Mainly through content and visual stimuli, you'll strive to make an impact and evoke an emotional response from your visitors.
Examples coming soon.
Assurance
The trust formed by a visitor on their first impression is now being put to the test. Do they feel secure and comfortable enough to make a purchase? Perceived professionalism, the removal of uncertainties, and the reiteration of value help potential customers rationalize their decision to buy from you.
Examples coming soon.
How to Use the 5 Components
These five components are flexible to changing trends and the constant innovation taking place in the web design space. Using factors that impact decision-making, rather than defined elements that are the result of visual and communication trends, these elements will remain central to future digital experiences.
Relevance & trust will still be the cornerstone of any customer interaction when voice is the primary means of “browsing” an ecommerce store. Desire & usability will still be incredibly important when users are browsing stores through mixed reality eyewear.
This model isn't a means to an end—it's simply a framework to inspire new ideas for testing. Implement those that get results, and keep the cycle going to stay ahead of your competitors.
Try different approaches to each item and conduct controlled experiments using an A/B testing tool to find out what works best for your brand.
Basing your optimization on The Masterpiece Model will give you a solid foundation on which to construct your ecommerce website.
.svg){kind=small}
