Leverage Branding Triangle Email Icon Map Marker Icon Twitter Icon Instagram Icon LinkedIn Icon Facebook Icon Pinterest Icon Brand Strategy + Planning Icon Print Icon Digital Marketing Icon Search Icon Events Icon Social Icon eCommerce Icon Design + Development Icon Video Icon
Design

How Design Influences Your Website Conversion Rate

Headshot of the Author Laura Benson

Though the specific goals of any given website will vary, it is almost always intended to generate some type of action. Whether it’s a phone call, filling out a contact form, requesting a quote or trial, purchasing a product, signing up for a mailing list, submitting a review, etc.—there is typically a particular action you are hoping visitors will take. The ratio of visitors that take this desired action vs. the total number of visitors, is known as the conversion rate. And if your site isn’t converting, it’s not serving its intended purpose.

So, is there a way you can do more than just hope site visitors act as you intend? The answer is yes. Of course we can’t guarantee a 100% conversion rate, but there are proven ways to influence user action and increase conversions. The design of your website is one of the most influential factors at play. To be clear, design doesn’t just mean aesthetics, though that’s certainly part of it. It also includes things like accessibility, user engagement, navigation, and content flow. People form an opinion about a website in less than a second! (Forbes) That means making a positive first impression is extremely important.

I’ve outlined some of the most influential design decisions that impact the conversion rate of a website so you can ensure your site design is setting you up for success.

Clear Understanding of Goals and Audience

But first, before you can start thinking about your website design, you must align on your goals and audience. What is the primary action you want visitors to take? Is there a secondary action? Who is visiting your site and why—what are they looking for? What engages and incentivizes them? Are their particular accessibility standards that go beyond standard best practice that should be adhered to?

These are some of the first questions we ask when starting any website project. It’s important that we have a clear understanding since they directly influence design decisions, and in turn, conversion rate. There are other things to consider as well—competition, brand positioning, mood/vibe, and so on, but goals and audience are the most influential drivers when it comes to converting.

Now, let’s dive in to the design.

1. Navigation

Defining your website architecture, or in other words, a flow chart detailing every page that makes up your website, is the first step after the initial exploration session. This architecture is translated into the navigation of your website, so we not only need to be sure we have a place for all of your content to live, but that it’s organized in a way that’s simple, intuitive, and easy for users to find what they are looking for.

A well-designed navigation considers things like:

  • the naming of navigation items—would I look in the About section for ‘X’ content?
  • the positioning of navigation items—is it easy to find and access from anywhere on the site, or does it require me to scroll all the way to the top of the page?
  • cross-linking opportunities—is it easy to bounce between content users may find helpful?
  • predictability and consistency—does the site navigation always behave as I would expect?

A thoughtful navigation is not only key to keeping user frustration low, but research has found that if a user cannot quickly (generally within 5 seconds) find what they are looking for, they will leave. And, you will have missed your opportunity to convert. Even worse, 88% of users won’t return to a site after a bad experience, so you‘ll likely only get one shot.

2. Color

As a web designer, it’s important to have a good understanding of color—not only so you can make strategic decisions around what looks best, distinguish from the competition, and influence mood and brand positioning—but also, so it’s used in a way that drives action. The way color is organized influences how users consume information. For example, reserving a color that is more vibrant or highly contrasts any other color on the site, will draw the eye to those items first. We often use vibrant or contrasting colors for important calls to action (CTAs), such as buttons and links, so they stand out, and ultimately increase your chances of converting. A call to action that blends in too much may be overlooked.

In the example below, we strategically kept the color minimal, allowing the vibrant artwork to stand out. Pops of bright pink were then thoughtfully placed to help draw the eye to CTAs.

Typography

Two of the most important factors to consider when selecting a web font are—1. does it properly convey the brand’s personality?, and 2. does it allow for easy, clear readability? Both of these are important when thinking about conversion rate.

Brand Personality

When it comes to creating the overall look/feel of a site, typography plays an important role. This is key when thinking about conversions, because if the wrong font is selected you could give users the wrong impression. For example, you could end up with an established financial institution feeling like a child’s playground, which may leave users feeling like they aren’t being taken seriously. But more importantly, you could choose a font that fits your brand’s personality perfectly, but if users aren’t able to easily read it, you can bet the conversion rate will suffer.

Readability

Selecting a font for the web is different than for print, mainly because a web font needs to be dynamic. It must flow well—meaning it needs to wrap and resize to be legible across any device, from mobile and tablet to laptops and desktops. There are various factors designers consider when thinking through a font’s readability, including: ample spacing between each letter (known as kerning), sufficient space between each line of text (line height), text size and contrast with the background, as well as the styling (all caps, wide vs. narrow, weight, serif vs. san serif, etc). Often designers select a different font for headlines, which are most often short, than for body copy, which is typically longer runs of text.

Scannability

Attention spans on the web are short—website users spend an average of 5.59 seconds looking at written content on a site, so ensuring copy is scannable is also very important. Breaking copy into short chunks and bullets, as well as establishing a clear hierarchy with headlines, subheadings, and body copy—will help users more easily digest the information. And you guessed it, if a user is able to better understand your content, this improves your chances of conversion.

4. Messaging/Tone/Voice

I’d say this goes beyond design, but messaging, tone and voice go hand-in-hand with design when considering conversion rate, and in my opinion, it’s too important not to mention. Knowing you have a limited time to convert, it’s important your messaging is clear, direct and engaging. Not an easy task by any means. Having the proper tone and voice that fits your audience plays a critical role as well. Should you be serious or playful? Formal or informal? Use first person or third? Your design can be spot on, but if messaging, tone and voice aren’t right, it could cause users to bounce or worse, leave them with a negative view of your brand.

5. Photography & Video

As important as messaging is, incorporating proper imagery and video is right up there when it comes to increasing user action. Some might argue it’s more important, given that research has shown the little time people spend reading written copy on the web.

Photography and video help tell a visual story and supplement the written copy. Things like subject matter, lighting, and composition should all be considered. For example, when designing a talent sourcing website, it’s important to highlight real employees with positive facial expressions, whereas when promoting a product such as a fuel additive, imagery that’s focused on the product itself and crops out faces to simply demonstrate an action, might be the better choice.

Because it can be difficult to find the perfect stock image, we recommend conducting a photo shoot so you can capture your own unique images, whenever possible. However, given the right circumstances, you can certainly find great stock images that will do the trick as well. You can read in more detail about why good imagery is so important here, but the bottom line is when it comes to website conversions, it’s important to use imagery and video that communicate the right mood, vibe, and visual message.

6. Layout/Placement

Once you have a clear architecture in place and defined all design elements, you must bring everything together in a way that is both intuitive and engaging for the user. Though you can’t necessarily control the path a user takes, or even the page they initially land on—you can help guide them through the strategic placement of elements.

This process is often started with the creation of a wireframe—which is the basic framework or blueprint, that demonstrates how the content on a page is organized, without introducing visual elements like fonts, color, imagery or messaging.

A wireframe allows you to strategically consider things like content flow and hierarchy—what is most important, next, and so on, and organize elements accordingly. Identify what information is essential for the user to know in order to make the decision to act. And, once they have all the information they need, ensure the call to action is placed in a way that’s highly visible and easy for them to execute.

7. UX – Functionality & Animation

A big part of what’s involved with strategic placement of content is thinking through proper functionality and user engagement. Keeping a user engaged means they will stay on your site longer, and the longer they stay on your site, the greater your chances of conversion.

Functionality

There are generally several different ways you can go about displaying the very same content. Considering user interaction and the functionality that will bring your content to life in the best way can increase engagement. For example, instead of listing several images and paragraphs inline that will require a long scroll, you could implement a carousel that rotates through copy and images, or ‘pin in place’ functionality where vertical scrolling temporarily stops, but the copy and images still change. Utilizing the right functionality can make the user experience more seamless and content feel less overwhelming.

Animation

Animation is another good way to increase interest and engagement. It can be as simple as a subtle bounce or pulse, text movement, or load animation to add emphasis and draw the eye to important elements. Animation has become much more common over the past few years, as continued improvement to developer tools and browser capabilities have made implementation more manageable.

Analytics

There’s a reason so much research has been done to determine the driving factors that influence conversion rate. Though a website can be a big investment, it’s also an essential tool to incentivize your audience and drive business results. There are, of course, additional influencers beyond design that impact conversion rate—load speed, SEO (driving relevant traffic), user-friendly across browsers and devices, but there is no disputing that design plays a crucial role.

Once you have a strategic design in place—you’re all set, right? Nope. The digital landscape is constantly changing and your audience interests are as well. Setting analytics in place that track metrics such as the time a user spends on each page, bounce rate, click-through-rate, etc. allows you to regularly evaluate what’s working and what’s not so you can continue to optimize and improve your website performance.

I get that this is all easier said than done. It requires the time and expertise to understand what the data means. If you’re looking for a strategic partner to redesign your website or to simply help analyze the data and improve your website’s conversion rate—we can help. Give us a shout.

 

 

How can we help?

Start A Project

Beer Institute Demo

I looove a cold beer, so when the Beer Institute came calling for some support in building an interactive website, I was all in. Sneak Peek Here’s what we ultimately built…  The Ask Build an interactive beer glass where...

Read More
laptop with beer institute website on screen