The Masterpiece Model


Usability is at the center of the model for good reason; bad usability can destroy any of the other four elements in an instant. Thankfully, just three simple factors form the core of good usability: navigation, speed, and interaction. 


At any given time, a visitor needs to know which page they’re on. Visitors should also be able to easily find the path to their destination from any page on the website. 

Navigation doesn’t just come in the form of what we usually know as the navigation bar.

Scrolling a page is a form of navigation. Scroll animations, when done right, can draw a visitor’s eye to important areas of the page. They can be entertaining and add depth to a story.

Like many valuable things, they can also be needlessly overdone. The concept of scrolljacking is a reminder that any time you’re going against user expectations, it’s likely going to create a bad experience. 

Navigational elements aren’t an area to get cute. Like getting overly creative with a vehicle’s steering wheel, messing with your visitor’s sense of orientation will only lead to bad results. 

Using a familiar base structure and ensuring that all directional cues are easily noticed is vital. Getting visitors further along your buyer’s journey should always be your goal; navigation is what enables this more than any other factor. 

Screenshot of The Sill's website navigation menu
NAVIGATION // The Sill uses a mega menu to make it easier to explore their growing catalog of products. The current page (in this case, Live Plants) is underlined, indicating where a visitor is located on the site.


There are plenty of eye-opening statistics about website speed. Some companies are able to increase their revenue by millions of dollars with a speed increase of a few milliseconds. To get to this point, you’d need to be making tens of millions of dollars in sales every hour. 

Even if you’re not quite pulling those numbers yet, your page loading speed can impact your bottom line. Speed is one of the factors Google uses when ranking websites. If that isn’t enough to sway you, each second in loading speed decreases conversions by 7%. 

“Site speed has a tremendous effect on bounce rates. In fact, if your site takes just 3 seconds to load, the probability of bouncing increases by 32%. Make this 5 seconds and it’s a whopping 90%. In other words, if your site is sluggish, even the best offers and deals won’t stop people from leaving.”

- Pravin Singh for

Saving your visitors’ time is also something that just creates a good experience.

It’s extremely noticeable when someone hesitates after you ask them a question. You feel like they’re not paying attention, don’t care, or are formulating an answer that isn’t truthful. It just doesn’t feel right.

It’s similar when we interact with the web; we begin to lose trust, feel like we aren’t valued, and attribute this annoyance with the brand that’s delivered it to us. 


How a user interacts with your interface—and how it responds—is a major factor in usability. This goes beyond customization and personalization to the base level of human-computer interaction.

When a user clicks a button, transitions can make the experience feel more streamlined.

Hover effects can help users understand what can be clicked; they can also create deeper experiences without adding more elements to the page. Interaction is all about the details. 

Screenshot of Trade Coffee's filter capabilities
CUSTOMIZATION // Trade Coffee uses a wide selection of filter categories to allow visitors to find a coffee that fits exactly what they desire.


Filters, preferences, and sorting capabilities are just a few examples of customization available on most websites. Allowing your visitors to customize their experience gives them control and helps them find exactly what they’re looking for in a way that’s comfortable to them.

In theory, customization should make the experience more streamlined, leading to a deeper customer journey and more sales. It doesn’t always work this way, but you can never go wrong giving your potential customers more control rather than forcing them to be beholden to your design decisions and categorization. 

Screenshot of "You may also like" section on Huckberry website
PERSONALIZATION // Huckberry uses one of the more common forms of personalization to guide users to additional products. These recommendations are based on what's currently being viewed as well as browsing history.


More about how your actions impact the experience of the visitor, personalization takes a variety of forms, that you pre-program, to provide the visitor with a more tailored experience. Serving up product recommendations based on past activity is a good example of this. The user has no way of directly configuring this, so it’s not a customization. 

Personalization, when done without compromising the privacy of your visitors, is a highly effective way to show that you have your customers’ best interests at heart. Helping your visitors find something new that will delight them is mutually beneficial. 

Usability is Central

Having success in any of the other four elements of the Masterpiece Model requires sound usability throughout your experience. All three usability factors are a platform for relevance, trust, engagement, and assurance. Proper navigation, optimal page speed, and intuitive interactions are the framework on which a modern website is based. Not maintaining at least a baseline level of usability can cause visitors to view your site as outdated or worse—frustrating. 

Use the guidelines below to optimize your eCommerce store’s usability: