Conversion-focused design

Shopify Conversion Rate Optimization

Value, not design, is the fundamental output of value-based design. Value is how a business or person measures what something is worth to them.
Nick Disabato
Designer, Author

The value of any business website, and it’s design, should be judged based on the ROI it brings into the company.

Just like an employee, a website has a job. To convert visitors into customers.

While it can (and should) look good visually, design will be judged on what it contributes to the business.

Conversion-focused design means putting business outcomes first

When a designer, either freelance or in-house, works for a business, they are not being paid for design.

They are being paid for the value that design work brings to the business.

Businesses have to generate value to thrive. It’s what justifies their existence. Designers should contribute to that value.

 

Conversion-focused design is the practice of using design as a tool to turn attention into revenue.

Measuring the value of design

Google Analytics home report featuring revenue screen capture

Metrics

For an online store, there are different metrics you can use to measure the value of design. Both as the design currently exists, and of the effect of design changes over time.

  • Conversion rate- The percentage of visitors who make a purchase over a given time period.
  • Average order value- Total revenue divided by number of orders, during a given time period.
  • Customer lifetime value- The amount a specific customer spends over their total purchase history.
  • Average revenue per user- The total amount of revenue divided by the number of visitors in a time period.

All of these are important to track as changes to design, messaging, and strategy are made. A change that drives one up could negatively impact another.

For example, you could decrease prices significantly. This would increase conversion rate, but likely drop all other metrics, and hurt the business overall.

Tools

Analytics (such as Google Analytics) are the main tools we have for directly linking the value of a page, element, or design change to revenue.

For instance, GA can tell us how often homepage visitors click through to a collection or product page, moving them towards a purchase.

If a design change makes that happen more frequently and leads to more purchases, we can measure the difference the change makes.

There are many other tools in the research and optimization process, and other uses for analytics. But when it comes to measuring the business values, hard numbers are our friends.

Focus your site on turning visits into revenue

If you’re reading this, your website is a storefront.

Not an art gallery.

Not a museum.

Not a newspaper.

Not an ego stroke.

People come to your store because they are interested in buying what you sell. So, it's in your best interest and theirs to build a site that makes buying easy and enticing.

So the main consideration in building it should be moving the most possible number of visitors towards finding a product they love and buying it.

A customer looking at your website should feel like they are looking into the Mirror of Erised. What they see is a future where they already whatever you sell, and it turns their life into an amazing dreamscape or at least a little better.

What visitors need *from you* to become customers

You probably don’t think about the skeleton of every person you see. You rarely think about the framing & wiring of your house.

In the same way, customers don’t consciously think about your store from a web design or conversion viewpoint. (Unless they’re marketers/designers)

So what are customers looking for? What are they conscious of?

  • Could I get this cheaper somewhere else?
  • Do I trust these people with my credit card?
  • Does this do what I want?
  • Will this work for people like me?
  • Will it be what I want, or am I going to open the box to find some cheap knockoff?
  • Will I be able to return it if it doesn’t work for me?

Customers need certain emotional, psychological, and rational needs to be met in order to be ok with buying. The more expensive your product, the higher the hurdle for each need.

Those needs can be summed up as 6 psychological factors of conversion.

The 6 psychological elements of conversion

smartphone

1. Functionality

The most basic thing a high-converting site has to do is work properly.

  • Everything works without errors
  • Works well on mobile
  • Short page load times
  • Workings in all browsers and devices

There shouldn’t be any bugs. It should work mostly the same across all devices, operating systems, and browsers.

target

2. Relevance

From the first moment that someone lands on one of your site’s pages, it should be insanely obvious that you are talking to them.

I’m talking colors, layouts, copy, imagery. Everything needs to be relevant to the customer and relate to whatever sent them to the page. They don’t care about you. They care about themselves.

eye

3. Clarity

People won’t take time to figure out clever slogans or taglines. You need to speak clearly to your best customers and the wants/needs they want to take care of.

If the user is drunk, lost their glasses, and hasn’t slept in 36 hours, they should still know quickly why they’re on your site as soon as they look at it.

Your amazing blog post about your trip to the Ugandan forest is great. Link it in the footer, not above the fold, because it’s confusing the hell out of everyone who just wants to buy sandals from you.

guarantee

4. Trust & security

It takes a lot of faith when someone buys from you.

  • Trust that they won’t be disappointed
  • Faith that their money is safe
  • Personal information about themselves
  • Not having to deal with the hassle of returning something

They have to overcome the barrier of not knowing you, especially if this is the first time they’re visiting your site. It’s easier if they’ve seen video or heard podcasts, but still… the site itself has to do a lot of trust building.

goal

5. Ease of use &
friction

A site that is hard to use is just begging for a click on the back button. Customers need to be able to easily find what they want.

This happens in navigation links, category sorting options, customization options.

You’ve got to make it as easy as possible to quickly find the right product, move between products, and make a purchase.

balance

6. Stimulation & motivation

There are 2 modes of thinking that we all have.

  • System 1 is our irrational, emotional, snap-judgement mind. This is the brain that helps your shoppers quickly decide if they *want* what they see on the screen.
  • System 2 is the rational, thinking about decisions more carefully brain. It will evaluate your offer more carefully, looking for good reasons to give (or not give) you money for a product instead of someone else.

You need to appeal to both of these ways of thinking to move people toward a purchase decision. The higher your prices, the more impact you’ll have to make, especially on system 2.

Want to see conversion-focused design principles applied to other stores? Check out examples of stores big and small broken down and examined.

How to build a Shopify site that converts

With these in mind, it sounds like you could build a really plain website and do just fine selling. And maybe you could.

But designing for conversions doesn’t mean your site will be ugly or off-brand.

In fact it definitely shouldn’t be either of those. But if you just use good judgement about aesthetics, and focus on conversion factors, you’ll have a great starting point.

You’ve got 3 big buckets to think about when it comes to influencing visitors on your site.

  1. Pages that make up the site
  2. Design elements on the page
  3. Messaging & Content

1. Pages of your site

The pages of your site make up the total environment your customers experience. Unlike a social profile or advertisement, this is owned. It is yours.

Just like walking into someones home gives you a much different understanding of them than seeing them at work, your site gives everyone who sees it a perception of who you are.

Your job is to create an environment that causes your customers to perceive you in a certain way, and get them to react to that perception by buying.

Home Page

Your homepage is the face of your brand, and should instantly show the value you offer.

The homepage is the gateway drug that leads people into your collection and product pages. Show them what you offer, and make it easy to dive further in.

More about building a great Shopify homepage.

Collections/categories

Your collection pages exist to help shoppers find the right products.

You should make it absurdly easy to filter and sort products, so that people who clearly have an intention of buying something can easily navigate to what they want to buy.

Product pages

Product pages exist to sell the right product to the right buyer. Period.

Product pages should motivate would-be customers to want a product, and give them the rationale for justifying their purchase and overcoming the aversion to spending money.

More about making Shopify product pages that sell.

Navigation

Navigation lays out the structure of your site (and your products/categories), and makes it easy to travel quickly from one place to the next.

Navigation is your chance to make it clear what is important, and get people to the important parts quickly and easily.

2. Individual on-page elements

Each element on a page needs to do a job, but not EVERY job at once.

  • A homepage headline identifies your unique selling point (What’s on this site?)
  • A subheader might clarify your audience (Does this do what I want?)
  • A hero image shows off what you sell (How will this look in my living room?
  • Product page copy should activate system 1 and kill the objections of system 2. (Ohhh, that looks great. I wonder if it’s built to last?)
  • An email signup gives people reason to start a relationship with you (even if they aren’t ready to buy yet)
  • A call-to-action directs shoppers on what to do and where to go next.

 

When you get it all right, this stuff leads to a holistic experience that makes a customer feel like they’re in the right place. It loosens wallets like tequila shots loosen inhibitions.

3. Content & Messaging

The words you use on each page matter deeply.

Because those words (and accompanying images) are all you’ve got to communicate with visitors. You don’t get to shake their hand or look them in the eye. They can’t pick up the things you sell and feel them.

So the content on each page is your best tool for turning people into customers.

Mario wants fireballs to fight enemies

I could write paragraphs about being customer-focused, features vs benefits, etc. And in the past I have.

Instead, I’m going to share an image from the excellent UserOnboarding.

Example for the Mario video game showing features versus benefits

The job of your content

Is to hold a mirror up to the needs and desires of your visitors. They should see a better, happier version of themselves when they see what you are selling.

Where does that happen

  • Images that show off your amazing product or that remind users of themselves and their own lives
  • Headings that catch attention and convey big meaning quickly
  • Subheadings that explain in just a short line
  • Descriptions that focus on how your product helps Mario (the customer) become fireball Mario (a better version of the customer)
  • Navigation links that tell the customer exactly where they are going
  • Paragraphs and sentences that tell stories about products and the kind of people that love them
  • Calls-to-action that give users a clear and direct next step
Like this:
Example of using conversion-focused messaging elements

This is a section of KeySmart’s homepage.

  • The heading grabs attention and conveys a quick and meaningful message about the products use.
  • The description conveys benefits to the customer from their own point of view
  • The call-to-action is direct and clear

How to create meaningful messages

Writing is easy.

Writing things that are meaningful and effective at the job you want them to accomplish is really, really hard.

But there are ways to make it easier.

1. Voice of customer research

Collect the actual words and sentiments of your customers, and use them in your on-site copy and marketing.

You can collect questions, concerns, sentiments, and ideas directly from your customers in several ways

  • Email surveys
  • Support inquiries
  • Live chat interactions
  • Social media listening and interactions
  • User generated content
  • Hotjar on-page polls
  • Reviews
  • Communities (Subreddits, forums, discord groups, YouTube comments)

2. Keep it brief

No one wants to read a wall of text while shopping.

Getting to the point is crucial.

Take the concerns in your customers mind, and address them in the shortest possible way.

Use as few words as possible, and not more.

3. Focus on the customer, not the company

Remember that your website DOES NOT exist to tell people about yourself or your company.

Your about page can do that, but even then, you are relating yourself TO YOUR IDEAL CUSTOMER.

So when you talk about products, focus on what they mean and what they can do for the person looking at the screen.

If you’re selling a cake, don’t tell them about how much using your grandmothers recipe means to you. Tell them that it means so much to share your beloved grandmothers recipe with each and every customer.

You did it!

Key Takeaways

  • The main job of your website is to convert traffic into sales
  • Design and design work can be measured by how much monetary value it adds to your business.
  • Keeping conversion in mind while designing and writing is key

You made it to the end of another long-ass page in this guide!

So now you know about the value of design to your business, and how to get started building a site that converts.

Up next, we’ll dig into how you take a well-designed, conversion-focused site, and make it better.

See you in the next chapter.

×

Table of Contents