How to Structure Your Website For Design and Conversions

It doesn’t matter how bedazzling your website looks. Beautiful design isn’t enough. 

In fact, 79 percent of your web visitors will go elsewhere if they can’t find what they’re looking for on your website. 

Here’s another way to look at it: How many times have you left a beautiful website just because you couldn’t find what you were looking for?

Structuring your website for both design and conversions requires you to use visual elements that capture your visitors’ attention and communicate your message clearly, compelling them to take actions that support your business goals. 

There seems to be so much to do to get this right, and you’re probably wondering where you need to start and move on from here.  

In this post, I’ll walk you through what you should focus on when structuring your website for design to get more conversions. 

Your color scheme helps improve brand recognition. It also allows you to connect with your existing and potential customers and earn their trust, making it easier for them to do business with you.

Be wary of using too many colors, though. They are only going to clutter your website and distract your readers. Simplify your color scheme by using fewer colors.

For example, eachnight uses a fitting combination of violet, blue-violet, and red-violet to unify every element on its homepage. A visitor doesn’t have to spend time trying to understand what they do. They’re all about a good night’s sleep. 

The call to action button is blue-violet, and since these colors complement one another, it stands out, drawing in the visitor. 

Their color scheme is also consistent all over the site. Take a look at their blog:

The color scheme looks great, yet it is simple but still effective in holding a visitor’s attention and compelling them to take action. Here are 15 website color schemes for inspiration.

Do your web visitors know where to click once they land on a page on your website? 

Most call-to-action buttons look like they’re out of place because they’re invisible, making it easy for web visitors to ignore them.

As you simplify your color scheme, make sure that you draw your visitor’s attention to specific parts of your website, such as your call-to-action buttons, by using contrast. Here’s what I mean:

What did you see first on Woven’s homepage?

The bright color (orange) on the call to action, right? You’ll also note that the call to action is a clickable button. Visitors immediately know where to click and get started right away with minimal navigation.

In addition to using contrast, create buttons that provide feedback once your web visitor places their cursor on the button. This works well on this travel blog, Adventure For Less holding the attention of skimmers on the homepage:

Once you place your cursor on one of the buttons, it changes its color to royal blue while initially, it was just copy surrounded by whitespace. 

To top it off, use instructional copy to incentivize your visitors to click on your call to action button just like how Freshbooks does it:

Not only will you get their attention, but also you’ll be catering to those who are ready to take action quickly, by saving their time because they already know where to click once they land on your site.

Your visitors are your consumers. However, if your design makes it hard for them to decide what to consume, your conversions will suffer.

For example, the more choices you offer your visitors, the harder it is for them to choose. 

Even if you’re selling different products, showing all of them doesn’t make it easier for readers to decide. You’re sending them into analysis paralysis, and chances are they will leave. 

Social psychologist Sheena Iyengar has proven this in a jam experiment she conducted in a food market. Twenty-four varieties of gourmet jam were displayed, and each shopper who sampled them got a $1 coupon off their favorite jam. Six jams were later displayed on another day, and shoppers were allowed to test their favorite jam and then decide which one to buy. 

While the larger display got more shoppers, it got fewer sales (4 percent) compared to the smaller display, which got 31 percent more sales. 

You might be tempted to think that your customers need more variety and choices to make up their minds. In reality, however, the fewer the options they have, the easier it is for them to make up their minds.

So, how do you use design to avoid sabotaging your conversion rates? 

Limit the options you present to your visitors. It sounds simple, but it isn’t. As you get more visitors on your site, you want them to know everything about you and the different market segments you serve. That’s too much information for them to read and understand in one sitting.  

Piktochart targets different market segments, and on the homepage, they don’t list all of them for visitors. Once a visitor decides to check out whether Piktochart is right for them, a dropdown list appears to help them select the solution that best describes their situation. 

The number of choices is also limited to four. This makes it easier for you to know where to click and start using the infographic editor. 

Another way to do this is to break down the choices you present to your web visitors. You want to make sure that they understand the value they are getting with your product, and you want to communicate that in a simplified manner. 

Use pricing tiers to make it easier for them to make up their minds, just like how Bay Alarm does it on their pricing page:

Sometimes, even after breaking down complex information for your visitors, you’ll find that your conversions don’t improve. 

Even with pricing tiers and limiting the number of choices you present, a web visitor will still start overthinking, wondering if they’re getting the best deal, leading to analysis paralysis. Make recommendations to help them avoid this situation, just like Medical Alert Buyers Guide. 

They have a list of similar medical alerts. They also provide an editor’s choice to make it easier for a visitor to know what they need to buy.

Engaging visual content helps you convey information faster and trigger your web visitors’ emotions to take action. 

However, using visuals hurts your conversions if you don’t place them strategically. A visitor on your web page has defined eye movements that make them pay more attention to some areas over others. 

And that brings us to the Rule of Thirds and the Gutenberg principle. 

The Rule of Thirds helps you layout your visuals where a visitor’s eyes will land on your webpage. By placing an image on the thirds of an image, you’re able to achieve balance, making it easier for you to communicate your message without making them feel overwhelmed. 

In our example above, the butterfly appears near where the grid lines intersect, and it’s easier to understand the image and its context. Placing images too far from the intersecting lines distracts the viewer. 

So, looking at your images, how have you placed your images? If they are too far where the gridlines intersect, consider adjusting them to optimize them for a great viewing experience. 

The Gutenberg principle describes how website visitors view content on web pages — they start from left to right then move towards the bottom right. 

With this in mind, essential elements in your page layout need to follow this visual movement and stand out where a visitor’s eyes rest. Take a look at how Forms on Fire arranged their visual elements: 

A prominent call to action button is on the bottom right corner, asking the visitors to read a report. 

For someone who has not made up their mind because they doubt whether the tool will meet their needs and expectations, the report is placed strategically to encourage more clicks. They’ll read the report and clear their doubts, paving the way for a trial or a purchase.

No one wants to stare at a site loading for minutes. The longer it takes for your site to load, the faster your visitors look for another site to check out what your competitors have to offer. Also, it’s hard to get better Google rankings for a page that loads slowly due to bad user experience. 

And in case you’re wondering, here are the industry average website load speeds by country:

Use a tool like Google PageSpeed Insights, GTMetrix, or Pingdom to see how you stack up. 

While that speed is fast, the mobile load speed score is 75 as of this writing. That needs to be fixed, given that 61 percent of Google’s traffic comes from mobile devices.

So, how do you compress images on your website?

1. Use an ideal width and height for your images to optimize them for different devices and browsers that searchers use to access your website. Ideally, you want to use conditional logic so that you serve the right image size to the right mobile device.
2. Reduce your image resolution and keep it between 72 PPI and 100PPI for the best results. 

You can either do this on your own or hire a developer to help you compress your website images for better load speeds. Additionally, you might also want to make sure your site is on one of the best web hosts.

In its website launch checklist, Website Setup argues that “without analytics, you’re flying blind.” If you can’t tell how your visitors behave once they land on your website, how do you expect to improve different design elements for conversions? 

Use Google Analytics to help you track metrics such as bounce rate, time spent on-site, and the amount of traffic you’re getting. These help you get a clear picture of how well your site is doing. 

For example, if you’re getting a ton of traffic but have a high bounce rate, then there must be something wrong with a design element on your site. To accurately pinpoint what you need to fix, use a heatmap to track user behavior to know the elements that hurt user experience. 

Take a look at this heatmap from Hotjar:

This tells a lot about the call to action buttons on different parts of the page. If they want to improve their conversion rates, they can test different variations in the design, such as button placement, in line with Gutenberg’s principle to see which version converts best. 

Balancing web design while still optimizing it for conversions is hard. It’s easy to think that beautiful design is the cure to low conversion rates. However, we both know that it doesn’t work that way. 

You’ve clicked away from beautiful sites that didn’t help you find what you were looking for. 

Similarly, your visitors will click away from your website if it doesn’t help them find what they are looking for. 

In the quest to balance beautiful design and conversions, it’s difficult to always get it right. 

However, you can still work towards it by embracing the design elements we’ve talked about to drive conversions and achieve your business objectives.