The Masterpiece Model
The Masterpiece Model
Last updated November 1, 2021

The Masterpiece Model: 5 Components of Successful eCommerce Websites

Building an eCommerce store has never been so easy. Our understanding of consumer behavior has never been so precise. And web technology has never been so accessible. The Masterpiece Model helps you build eCommerce experiences that convert visitors into happy customers by combining user experience with consumer psychology.

Graphic of human brain outline comprised of one hundred dollar bills

The Beginnings of Consumer Behavior

Early marketing efforts were simply an expansion of social interaction. Non-scientific and uncalculated, these communications took the form of town criers and, after the invention of the printing press, more physical media like trade cards [1].

The first few millennia of commercial trade passed without a field called marketing. Originally referred to as "applied economics," marketing wasn't a genuinely unique discipline until the early 1900s—the first university marketing course was offered by the University of Michigan in 1902 [2].

Marketing's roots in economic theory resulted in a more quantitative approach until the middle of the century. The 50 years that preceded the adoption of consumer behavior were filled with new developments inspired by the industrial revolution. The design of surveys and the practice of population sampling, for example, were concepts developed by the U.S. Census bureau in the early 20th century [2].

While the underpinnings of consumer behavior had popped up throughout history, it took until 1955 for a movement to occur that would more resemble what we see today. Writing for Harvard Business Review, Burleigh Gardner and Sidney Levy argued for a better understanding of the nuances of consumer behavior. They believed that uncovering human motivations would help brands better appeal to the thoughts and feelings of their target audience [3].

The study of consumer behavior chipped away at the validity of large-scale research. Tactics deployed by the U.S. Census Bureau made sense when collecting government statistics, but not for brands trying to build emotional relationships with their customers. The game had changed, and individual customers, not entire markets, were the center of the marketing universe.

Over the next 30 years, behavior-based approaches collided with the quantitative foundations of the field for a more measurable approach to consumer motivations. This methodology culminated in the era we're experiencing today—market orientation.

In the late 1980s, industry leaders began to explore the measurability of meeting customer needs. Competition now comes in the form of what Niraj Dawar calls "downstream" activities—like customer satisfaction, service, and value [4].

“Today the strategic question that drives business is not ‘What else can we make?’ but ‘What else can we do for our customers?’” (Dawar, 2013) [4]

As this thinking evolved, so did the technology we use to reach customers. The 1980s to the early 2010s saw more rapid and concentrated customer-facing innovation than any other period in human history. What began with bright blue hyperlinks and low-quality bitmap images developed into the ability to order a new computer for your pocket, using your voice, through a speaker the size of a soda can.

Despite these technological innovations, human behavior remains essentially the same. Our round-the-clock connectedness only amplifies the importance of consumer behavior and market orientation. The new challenge is exceeding consumer expectations in a marketplace where the bar is constantly inching higher.

Image of man putting on shoe is outlined by iPad and eCommerce user interface

The Evolution of eCommerce Website Design

There was a time when the playing field for a company's digital presence was relatively level—HTML & CSS were quite limited. Adding to that, Internet users weren't entirely sure how they should be navigating the web with such little browsing experience—it was like the drunk-goggled leading the blindfolded.

The resulting aesthetic was a sea of black text walled-off and interspersed with blue underlined links, with some borders thrown in for good measure. Thankfully, as web browsing (and shopping) became more ubiquitous in the late 90s, web design standards began to take shape.

Amazon & Barnes & Noble homepages in 2000
Amazon (left) & Barnes & Noble (right) websites in 2000. Source: Web Design Museum

By the early 2000s, the web started to adopt the aesthetic we're familiar with today. Faster internet speeds, and the widespread adoption of CSS, gave designers the ability to balance their designs better and lower the visual complexity of web pages through imagery, layout, and color.

The field of web design grew wings just in time to fly. In 2006, the year before the iPhone revolutionized mobile web browsing, there were 85 million websites in existence. Just ten years later, this number increased tenfold [5]. Mobile computing, along with less expensive devices, ushered in an era that badly needed web standards to become more immersive and responsive.

CSS Grid, Flexbox, and HTML5—introduced in the years following 2006 [6]—helped designers develop more consistent experiences across devices. Despite being around since 1998 with CSS2, webfonts didn't gain widespread acceptance by major browsers until 2008. Typekit launched just a year later, followed by Google Fonts in 2010 [7]. With more businesses going online, competition led to the need for differentiation. These new technologies set the stage for a wave of creative freedom yet unseen by web designers.

The seemingly limitless capabilities of the modern web required a new approach to temper rising complexity. Alongside the increasing experience that internet users were gaining, common design patterns made websites and apps easy to use. Though design & content vary by brand, we still have expectations of where navigational and other visual elements should be located, helping us explore the digital universe more easily.

[T]aking advantage of our users' existing knowledge reduces their need to constantly think about their next action.

Decades of research have helped us establish best practices that cater to the learned experiences of our site visitors. It's why you'll usually find company logos either in the top left or top center of a page, alongside a navigation menu, with the page's primary call to action—in eCommerce, it's the cart—in the top right.

These design patterns are only a small part of users' expectations, but taking advantage of our users' existing knowledge reduces their need to constantly think about their next action. The simpler we make these experiences, the happier our visitors will be, and the more positively they'll think about our brands and our products.

Collage of USPS truck and boxes flying out the back

Rising Consumer Expectations

Taxis in major cities were old-fashioned. You had to put your hand in the air and wave one down, hope it saw you, then pay with cash if it pulled over. That's if you were lucky enough to have one pass by without waiting long enough to give up and walk to your destination.

Paying for a car to take you places in the late aughts wasn't keeping up with the expectations set by modern technology. Enter Uber & Lyft. No more wondering if you'll find a cab passing by, no more waving your hand around and risking public rejection. Put your address in, get in a car, and get out at your destination—you don't even need to lift a finger before exiting the vehicle!

Man and woman hailing separate taxis

Taxis didn't get beat by a better customer experience—rideshare drivers always rely on GPS, often get lost, and don't get you where you want to go very quickly—they got beat by the rising tides of consumer expectations.

Similarly, our expectations for design & user experience have reached epic proportions. Struggling with a slow website that's hardly readable and only results in confusion isn't worth anyone's time. One study found that each one-second delay in website loading time led to a 16% decrease in customer satisfaction scores [8].

At any given time, we're two clicks away from a purchase being delivered in two hours—why should it take more than two minutes to schedule a visit from a plumber? Amazon Prime has shifted consumer expectations so much that third-party fulfillment companies now provide two-day shipping services to help independent brands compete [9].

Large retailers have always had the resource advantage for innovation. The ability to collect, aggregate, and analyze customer data helped many large organizations spring ahead in the last decade. That gap isn't closing, either; big businesses are becoming more innovative, and it's increasingly difficult for small businesses to transcend their position [10].

[I]t's now incredibly frustrating when things aren't that easy. We adapt quickly, and processes that were once new and exciting seem more frustrating by comparison.

Fortunately, in the world of retail, we can see how high-budget consumer research has manifested in the customer experience. While larger companies with larger budgets and highly skilled teams have access to game-changing knowledge, their output is reverse-engineered by other companies—constantly raising the bar for design and usability.

Over the past three decades, we've seen precisely this—the gradual improvement of user experiences as a result of competition and heightened expectations.

As the bar gets raised, consumers have new ideas of what constitutes a good experience. What was considered a delightful digital experience 20 years ago would frustrate modern users [11].

Just a few years ago, you had to manually fill in your information during checkout on a Shopify store. Now? Just enter the six-digit code sent to your phone and wait for your order to arrive. Less than a decade ago, Apple Pay still didn't exist.

We've all become accustomed to this level of convenience and delight—it's now incredibly frustrating when things aren't that easy. We adapt quickly, and processes that were once new and exciting seem more frustrating by comparison.

Young woman looking at sticky notes on wall

A New Direction for Independent Brands

Unlike the early days of the web, you can build an up-to-date digital experience in an afternoon [12]. Technology has made it easier to build, test, and optimize our websites with just a small financial investment.

No-code tools enable complex integrations between thousands of web-based platforms [13]. Some developers even productize their solutions by selling apps through platform marketplaces. And for more complex tasks, you can hire qualified people on reputable talent directories.

Like technology, our understanding of consumer behavior has also evolved since the 1950s (one would sure hope). We're now at a point where these two disciplines have converged; in a typical day, user experience professionals conduct qualitative customer research, run website optimization experiments, and check in on various quantitative analytics tools. Research is no longer left to those in lab coats—it's in the hands of (hopefully trained) professionals in Patagonia vests and Allbirds.

Evoking an emotional response from your visitors leads to brand affinity and, eventually, loyalty.

Armed with your picks from over 8,000 available MarTech tools [14], you can embark on a customer-centric journey just like a large retailer. Task automation and virtual assistants make it easier to accomplish more with a smaller team, and freelancers help you scale a team quickly, as needed. The tools are at your disposal—all that's required is a framework of knowledge that helps you plan a successful approach.

When building an online store, eCommerce platforms do a great job with the basics. Shopify provides a base template that adheres to foundational best practices—top navigation, impactful hero section, well-designed product cards, and familiar-looking product pages. That's not to mention the checkout, which has become something of an industry-standard, being used by top retailers on many of the most well-designed eCommerce stores on the web.

Unfortunately, the default isn't enough. It's the little surprises that keep customers compelled enough to learn more about your brand and your products.

Well-shot photography, professional typography (yes, fonts), a masterful layout, ample and consistent spacing, and a skillfully chosen color scheme are just some of the elements that make your store memorable. Visitors rarely purchase on their first visit, so you'll want to make sure you're at the top of their minds when they're evaluating their options.

It's not just memorability that drives decision-making, though. Evoking an emotional response from your visitors leads to brand affinity and, eventually, loyalty.

Modern consumers—especially those browsing direct-to-consumer brands [15]—yearn for a deeper understanding of the companies they buy from. Values, philosophy, manufacturing practices, origin stories—all of these are important to consumers looking to purchase from independent brands.

This could easily be considered a disadvantage for smaller businesses that don't hold the same brand recognition as large retailers. Instead, look at it as an opportunity to connect with consumers in a way that big brands can't. As they compete on price in a race to the bottom, independent brands can build relationships that last longer than a semi-annual sale.

The Masterpiece Model with five elements and components on sheet of paper

Improving eCommerce Website Design with 5 Components

We've created a model that reins in the complexity of consumer behavior and the expectations set by innovations in the design of graphic interfaces.

Our Masterpiece Model contains 5 components that constitute what we've observed—through the evaluation of thousands of online stores—to be successful eCommerce experiences.

Adapted from the foundations set by industry leaders like KonversionsKraft & MECLABS, our methodology simplifies their philosophies in some areas and expands on them in others.

Our focus is mainly 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.

1. 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.

Read about Relevance -> 

2. 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.

Read about Trust -> 

3. 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.

Read about Usability -> 

4. 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.

Read about Desire -> 

5. 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.

Read about Assurance -> 

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 within which you can test new ideas and implement those that get you the best results.

Soon, we'll have checklists for each element so you can evaluate (or build) your site. 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.


[1] Trade card for Thomas Clout (The Metropolitan Museum of Art)

[2] O. C. Ferrell, Joe F. Hair Jr., Greg W. Marshall & Robert D. Tamilia (2015) Understanding the History of Marketing Education to Improve Classroom Instruction, Marketing Education Review, 25:2, 159-175, DOI: 10.1080/10528008.2015.1038963 [link]

[3] The Product and the Brand by Burleigh B. Gardner and Sidney J. Levy (Harvard Business Review, Mar–Apr 1955)

[4] When Marketing Is Strategy by Niraj Dawar (Harvard Business Review, Dec 2013)

[5] Total Number of Websites (Internet Live Stats)

[6] Web Design History Timeline: 2009–2017 (Web Design Museum)

[7] History of Web Typography (Professional Web Typography)

[8] Infographic: Web Performance Impacts Conversion Rates (LoadStorm)

[9] Deliverr raises $7M to help e-commerce businesses compete with Amazon Prime (TechCrunch)

[10] The Gap Between Large and Small Companies Is Growing. Why? by Vijay Govindarajan, Baruch Lev, Anup Srivastava, and Luminita Enache (Harvard Business Review, Aug 2019)

[11] Jakob's Law (Laws of UX)

[12] How to Launch Your Shopify Store in Less Than 30 Minutes Flat by Andrew Roach (Oberlo)

[13] The No-Code Generation is Arriving (TechCrunch)

[14] Number of MarTech Solutions (Statista)

[15] Direct-to-Consumer Research: 5 Effective Ways for DTC Sites to Tell Their ‘Brand’ & ‘Product’ Stories (Baymard Institute)

[16] Odusanya, K., Aluko, O. & Lal, B. Building Consumers’ Trust in Electronic Retail Platforms in the Sub-Saharan Context: an exploratory study on Drivers and Impact on Continuance Intention. Inf Syst Front (2020). [link]