The Masterpiece Model
Resources

Desire

This is the phase that most people think of as “web design.” You’ve established relevance and built foundational trust with your visitor. Now, it’s time to turn that solid base into sustained and motivated interest. 

Why do we buy products?

We base our desire for products on wants, not needs. Some goods, like gasoline, internet access, heating oil, and clean water, are less elastic than electronics and soda. Still, our brand choices within this inelasticity can go beyond our needs to fulfill something deeper. 

Consumers buy new things to meet several emotional objectives, usually centered around social status or personal wellbeing. It could be a multi-generational attachment to a brand—like Ford or Coca-Cola—or it could be a yearning for a higher social status through brands like Louis Vuitton or Yves Saint Laurent. 

Sustainability is becoming a primary motivator for some markets. Brands like Blueland and United by Blue draw in customers with messaging around environmental responsibility. While it seems like customers are attracted to the idea of altruism, the feeling of helping others (or saving the planet you inhabit) makes us feel better about ourselves. We feel more accomplished like we’re doing our part. 

All this to say, it’s easy to think we’re appealing to our target audience with data and facts. The truth is, we’re human, and we’ve evolved very little over the last several millennia. Researchers have shown, time and again, that we use facts to rationalize decisions we’ve already made—based on our emotional response.

So, how do you use your website to appeal to the emotions of your visitors? 

It starts with your personality, the value proposition(s) you communicate, and the evidence you present to help customers rationalize their decisions. 

Personality

Who you are as a brand should resonate with your target audience; that’s Marketing 101. The more visitors relate to our brand and the more they like us as a company, the more likely they are to become customers—it’s pretty simple. 

The biggest question is, how do we convey this through colors and shapes on a screen?

The checklist goes into more detail on this, but suffice to say that you’ll achieve this through visual design and your content’s style or tone. 

If your website copy is what you say, your overall design is how you say it. Anyone who’s ever had a conversation with another human knows that tone can play a significant role in how we communicate. 

Visual communication is no different. Non-verbal communication makes up around 90% of what we convey in person. On the web, we only have pixels to communicate beyond the meaning of our words. 

Your brand should feel like your audience, and it should be liked by your audience.

The best eCommerce websites use a combination of lifestyle photography, typography, layout, color, and tonality to evoke emotions from their visitors. Let’s walk through a few examples of well-crafted (and well-communicated) personalities. 

Brunt Workwear

Brunt Workwear homepage screenshot

Brunt Workwear uses whitespace to create a modern layout that separates them from other brands in their segment. A primary color of burnt orange complements their bold, resilient display typeface to paint an industrial feel over the modern structure. 

It’s reminiscent of Harley-Davidson, and for all the right reasons. Staying close to a look that many in their market would find aesthetically pleasing also creates a strong visual association with American-made strength and style. 

Coat Paints

Coat homepage screenshot

Coat goes for a casual art gallery look, by framing off-white sections with black borders, to complete a purely monochromatic interface. The use of a single typeface—Roobert—in just two weights shows further dedication to a minimal aesthetic that serves as a vessel for the artwork that is their product and lifestyle photography.

Ingredients Matter

Ingredients Matter homepage screenshot

Ingredients Matter takes the opposite approach of Coat. Upon landing, bright colors jump off the screen with a vibrant, cheerful demeanor. Their use of Aperçu in all caps evokes nostalgia for mid-century packaging, drawing a clean, classic look that feels warm and familiar. 

Their language is plainspoken and witty, like a chat with a close friend. It’s a look that maintains high energy without seeming too young—a difficult balance to strike well. 

Keeps

Keeps homepage screenshot

With Keeps, you’ll find a minimalism that extends beyond that of Coat and a boldness that matches Brunt Workwear. Yet, through the strategic use of their primary brand color—red—and the masterful combination of three different font styles, they maintain a brand aesthetic all their own. It’s impactful, confident, and systematic—just what you want surrounding products aimed at solving men’s hair loss.

Emme

Emme homepage screenshot

On the other end of the gender spectrum, you have Emme’s eCommerce website, which is aimed squarely at a biologically female audience. The varied tones of muted red flow down the page to enhance their artistic product photography and provide a backdrop for distinct content sections. It’s an experience that puts forth an air of glamorous romanticism atop a foundation of humble strength. 

It’s about memorability

In the end, the most critical phase of a visitor’s interaction with your site happens after they leave. With 44% of American adults aged 18–49 saying they’re online almost constantly, we’re exposed to more information than ever before. Being remembered by your visitors is vital to your success. 

Emotional experiences—good or bad—heighten our memory. The vivid remembrance of a negative experience helps us avoid similar situations in the future (thank you, evolution). Pleasant encounters improve our mood and increase our awareness, enabling us to imprint those moments in our minds. 

Your goal with visual design should be to find connections to your target market. Your brand should feel like your audience, and it should be liked by your audience. The feeling of belonging and the positive emotions that come with an enjoyable visit will make your brand more memorable to visitors, creating repeat visitors and stronger relationships. 

Value

Mario powering up as a metaphor for consumer buying behavior

Hopefully, you’ve seen the above graphic. If not, you can thank Chris Brophy for gracing us with this gem in his article about growth marketing using the Jobs To Be Done (JTBD) framework—it’s a worthwhile read if you have the time. 

The point of the story is, your customers aren’t looking for a product just for the sake of buying the product; they’re looking for a product to fulfill a purely human desire to become their best self. 

Someone giving a keynote presentation doesn’t purchase a new outfit because they want a new outfit. They buy a new outfit because they want to look fashionable, powerful, credible, and attractive when they have several thousand eyes on them. 

For this reason, we won’t find success when telling people all about the cool features of our products. We should, instead, promote the person they’ll become once they own or use our products. 

Lead with benefits

With the release of iPhone 13 Pro, Apple launched a campaign touting a new video recording capability called Cinematic Mode, allowing users to shoot with “shallow depth of field and automatically add elegant focus transitions between subjects.” 

Their ads leave out this description of the feature. Instead, they display only four words throughout the entire 98-second clip—“Hollywood in your pocket.”

Which is more effective when communicating: a technical description of the features or a succinct description of the result? Customers don’t care about “depth of field” or “focus transitions” on their own; they do care, however, about creating videos that look like a Hollywood director made them. 

Throughout your eCommerce website, you should be explicitly touting the benefits—the unique value—of your products. Product features belong on a product page, not on the homepage or sales-focused landing pages. 

Listen to your customers (hint: read your reviews), and you’ll learn what they find most valuable. Reflect these benefits to them in your copy to build an experience that converts more effectively.

Play show & tell

Just like in real life, we don’t only show our personality in what we say. Sure, that’s a component of who we are, but it’s only a fraction of how people perceive us. 

Stating benefits only goes so far. Take your value propositions to the next level through complementary photography and graphics. 

Let’s go back to Brunt Workwear. Their hero image shows sparks raining down on feet wearing Brunt boots, a clear demonstration of durability. In a section titled “performance & durability,” you’ll find a close-up shot of work-tested boots worn by a machine operator.

Two sections down, where the heading reads “built for the elements,” a man wears Brunt work pants covered in beaded-up water. Wherever you find a claim, you’ll find visual support.

Don’t just say it with words; support it with photos.  

Not all repetition is repetitive

Don’t just talk about value in your headings. Use icons, lists, and other layouts to display the value your products provide. 

Each visitor browses content differently. Some look for deeper details in paragraph form. Others scan bulleted lists to get a quick understanding of what’s on offer. Reiterating your points throughout your website will create a consistent theme. With time and attention, your visitors will form associations between your brand and what you communicate.

Ingredients Matter uses repetition throughout their website to show how their products are gentle on humans and the environment. The sections above are all from different areas of their website.

Conveying the benefits of your product using various treatments will help you communicate effectively with a more significant proportion of your visitors. Tying your written content to your design—through color, typography, and imagery—will, as long as they’re compatible, help reinforce the themes you’re expressing. 

Evidence

Desire is an emotion that you can amplify with fact-based evidence. Various forms of proof are best, but (genuine) reviews have become the gold standard in social proof. Other forms of evidence may be more time-consuming to collect, but they’re more flexible when displaying them on your eCommerce website. 

Testimonials

TESTIMONIALS // Keeps uses candid customer photos and hover-state text overlay for their testimonials.

Testimonials are a great way to showcase customer feedback elegantly. And, the more immersive they are, the more credible they are. At a minimum, you should have a few sentences from the customer and their name. That’s just scratching the surface, and it’s not very convincing. 

You can add any information that would make it more interesting; it could be their age, favorite movie, or a favorite product. Get creative!

Beyond written information, you’ll want to include a photo or—even better—a video. Putting a face to the name will make the customer’s words more trustworthy. 

If people are talking about your products on social media, reach out. Not at that level yet? Send post-purchase surveys and identify your customers with the highest NPS & satisfaction scores. Staying close with your customers won’t just help you spot the good things—you’ll also hear about the bad before it gets ugly. 

Social Proof

Sometimes, subtlety can suffice. McDonald’s has told us how many they’ve served—“billions”—over the years. This is just a nudge to say they’re reputable. If they’ve served billions, they can’t be serving subpar food.

Bravo Sierra (above) takes an interesting angle on this concept. Serving the military community doesn’t just mean selling products to them; it also means getting them involved in the process from the ground up.

Touting their community of 1,000 active service members doesn’t just describe their product development process. It also says if it’s good enough for them, then surely it’s good enough for me.

Reviews

REVIEWS // Brunt Workwear keeps the layout clean, letting visitors easily focus on the customer feedback.

The most common form of evidence is the online review. There are so many ways to request and display reviews. It’s easy to overlook product reviews on a brand’s eCommerce website—they’re almost always five stars and glowing. Some brands have tried to boost their reputation by using a third party like Trustpilot

Guide your customers to answer in ways that are helpful to future shoppers. They should be descriptive, rate individual aspects of the product, share more information about themselves that may be helpful, or upload pictures. Ask them questions throughout the review process to help them stay on track or risk getting endless variations of “shipped fast. great product.”

Data

DATA // Milk Makeup includes customer research data as one of their product images

While it shouldn’t be the only form of evidence you use, data appeals to the more rational side of our minds. It should be on the closing end of any emotional argument. 

Data can come in many forms. Your quantitative results are likely to come from customer satisfaction surveys, sales numbers, customer research, or clinical trials in retail.

You can use specifications to back up your claims if you’re selling more technical products—like in the example above from Opal

Press

PRESS // Coat highlights the well-known media brands that have talked about their products

If you’re fortunate enough to have been mentioned by well-known media outlets in your niche, then you should be showing off those logos! Trust is transitive. If your brand is unknown to a significant portion of your target market, you can gain conditional trust by leveraging your relationship with a brand they know well. 

Include the logos or include an excerpt. Either way, include these credibility boosters near the top of your landing pages to take advantage of the clout you’ve earned.