The Captain Coder Podcast

8 Web Design Tips that Improve Conversions

February 23, 2022 Marisa VanSkiver, Captain Coder Season 1 Episode 43
The Captain Coder Podcast
8 Web Design Tips that Improve Conversions
Show Notes Transcript

The main goal of any website is to drive conversions of some kind. If you want to command the premium fees for the websites you're building, you have to be providing the value that matches those fees. About the only way that you can provide value with website design and development? Make it convert!

For many of your customers, conversions can be direct product sales. But if you're working with service providers, coaches, or even local businesses, a conversion might be defined a little differently. For many of my clients, conversions can look like getting a contact form, a phone call, or a person walking through their front doors.

You can't just throw a website up and hope it converts. You have to follow proven steps that take a browser from cold lead to interested buyer.

While a lot of that is done through the copy (we talked about how to write website copy that sells in episode 9), there are plenty of things you can do with the design of the site to increase and improve conversions.

Especially if you're not a trained graphic designer, this episode will help you to create websites that sell with just a few simple design tips.

Make sure you listen all the way to the end, because #7 is my absolute best tip for improving conversions.

Mentioned Resources:
Contrast Checker - https://webaim.org/resources/contrastchecker/

The main goal of any website is to drive conversions of some kind. If you want to command the premium fees for the websites you're building, you have to be providing the value that matches those fees. About the only way that you can provide value with website design and development? Make it convert!

For many of your customers, conversions can be direct product sales. But if you're working with service providers, coaches, or even local businesses, a conversion might be defined a little differently. For many of my clients, conversions can look like getting a contact form, a phone call, or a person walking through their front doors.

You can't just throw a website up and hope it converts. You have to follow proven steps that take a browser from cold lead to interested buyer.

While a lot of that is done through the copy (we talked about how to write website copy that sells in episode 9), there are plenty of things you can do with the design of the site to increase and improve conversions.

Especially if you're not a trained graphic designer, this episode will help you to create websites that sell with just a few simple design tips.

Make sure you listen all the way to the end, because #7 is my absolute best tip for improving conversions.

Ready?

1. Focus on Good UX

Our number one concern when building a website is always to ensure that the intended customer can have a good experience. We don't want to confuse them, because confusion leads to a browser jumping off a website and heading for a competitor's instead.

Pretty much everything else we're going to talk about here will help you to provide a good user experience for your clients' customers. After all, great design on the web is about providing a great user experience.

When a website is built for the users first, you're going to improve your conversions. After all, the best website strategies focus on putting the customer first above all else.

Beyond the points we're going to cover in more depth, a few other ways you can improve the UX on your websites are:

  • Ensuring your site loads quickly (within 3 seconds)
  • Making sure everything is legible (colors, font choices, etc)
  • Declaring the purpose of your website/business immediately with a problem-solving headline
  • Telling users exactly what's "next"
  • Keeping your sites updated and stable
  • Focusing on functionality over looks

2. Design for Mobile First

Globally, over 54.4% of website traffic comes from mobile devices and just over 60% of Google searches were done on mobile. What does that mean to you as someone who builds websites?

You need to be focusing on building for mobile first with responsive web design. Full stop, end of argument.

Now, your particular client may still get more than 50% of their traffic from desktop devices, especially if they're a B2B company. But that doesn't mean that you don't prioritize mobile first.

Why?

Google Loves Responsive Design

Google loves responsive web design because it means there's only one version of your website to crawl. It also prioritizes the mobile version of your website before it will crawl your desktop. So if nothing else, you'll want to please the SEO gods, right?

But it's more than that.

Responsive web design - where the design responds to the size of the screen instead of the type of device you're on - is that it's flexible. It's meant to literally respond to the device it's shown on. That flexibility mindset with responsive design means that we want the website to work just as well on a phone as it does on a large desktop screen. There was a time where we used to hide blocks of text or even other functionality on a phone because it "didn't work well," but that's long been considered a bad practice.

Instead, we want the browsers to have roughly the same experience on a small device as they do when they find a website on their largest desktop screen. No missing text, pages, or things they can't do on a mobile device.

Starting with mobile first means that we ensure that we get everything we need into the website and can choose to add any flourishes later in the desktop website.

(Yes, I usually recommend against some features on a mobile device - like video backgrounds and animations - that get added into the desktop, but those are decorative only, not functional.)

3. Point Images Towards the Copy

Take a look through my own website. Do you notice that the eyeline of every single person used throughout my website is largely pointed towards the copy? Even the body language I ensure is pointed inwards at the copy instead of off-screen.

It’s a small, subliminal thing but absolutely helps the user keep scrolling through my verbose copy and also tells their eyes where to go. Pointing your images in towards the copy helps to point your customer’s eyes in as well, gearing them to read instead of getting lost offscreen. We have a natural ability to follow where someone’s eyes are (think of the creepy paintings that seem to follow you as you move), so use this to your advantage!

Masters at this also work to have the body language point in and just a little down, which helps encourage scrolling as well.

If you're working with a solopreneur or personally branded company where your client is the face, encourage them to schedule a photoshoot and have their photographer take pictures of them and their team facing multiple ways so that you have more options for facing to the left, right, or just a little down, depending on your website’s design.

If you're using stock photos, try to choose images that point the way that you want them to. Don't flip them in Photoshop to fit your needs, as you can be reversing text and other things that can look a little bit off.

4. Choose the Right Colors

Depending on the size of the companies you're working with, they may already have brand colors. Whether they do or not, it's your job as the web designer to decide which of those colors actually go on the website. With most professionally-done brand guides, you’d typically have 2-3 main and maybe up to 3 accent colors. While all those colors are great, you want to avoid using too many on a website.

For most, I’d recommend using 3-4 maximum on a website to keep the design simple and easy to read throughout. Done well it can work great to include more (especially if there’s a purpose to those colors), but typically I’d say 3 brighter colors and a neutral or two for those non-graphic designers like myself.

You also want to ensure that whatever background color you use, whether white itself or a dark black like my own, that you’re using a font color that has a high enough contrast to be legible by a variety of seeing abilities. Especially those with low vision or color blindness, you want to ensure that it’s legible no matter who’s viewing your website. Black text on a white background is safe, for instance, or vice versa, but you can also use a Contrast Check tool to make sure you’re within an acceptable range.

Pro tip: avoid using text on background images. A quick fix would be to add a little bit of a drop shadow or outline to the text to make it stand out and improve the contrast, but any images with heavy patterns can be hard visually to read on.

5. Use White Space to Your Advantage

Let your text and images breathe! In the past as a developer, I and other dev colleagues were often accused of “choking” the text or design pieces.

White space or negative space (for darker websites, different colors, patterns, etc) not only helps to let elements breathe and balance, it can also help to lead the user from one topic to another. White space also prevents your website from looking overly busy, which in turn can cause a lot of confusion for your users on where they should go next. That open space is really important to keep people moving and help them to be really clear on their path through your website. It also does a lot to improve conversions because they're not getting lost in your busy design.

White space is also important for a good mobile experience. Remember that people are navigating your website not with a tiny mouse pointer, but instead using their thumbs of varying shapes and sizes to click and get around. Leaving plenty of white space, especially around clickable elements, makes that easier and helps prevents accidental clicks that annoy and frustrate people (not just me, right???).

6. Make Navigation Super Simple

Do you want users and prospects to be able to easily get through the website you're creating and find the pages they need? You have to keep the navigation easy to follow, easy to use, and easy to understand.

I see a lot of design agencies especially try to showcase their "creative" sides by getting cutesy with main navigation labels. The things I've seen a Blog named, for instance.

Look, here's the truth about that - your target audience isn't going to have a clue that's what you're talking about. People are browsing your websites and they'll make decisions on whether or not to dig deeper in a split second. Don't make them second guess whether or not your client can help them by making the navigation confusing.

If it helps, you can look at competitors and see how they're labeling main navigation links. However, I'd honestly recommend just keeping it super simple. About pages should be "About." Pages with all of the services should be "Services." Where customers can go to buy products should be "Shop" and so on.

Keeping it all super simple will also reduce the number of clicks they have to use to find what they're actually looking for.

7. Use Can't Miss Calls to Action

I've been saving this one towards the end because it's one of the easiest, best things you can do to improve conversions on a website.

Make the calls to action impossible to miss.

Ask your client what they want their dream client to do when they get to the bottom of a page on their website. Are they looking for newsletter sign ups? Do they need them to fill out a form? Pick up the phone and call? Whatever they're looking for, you simply have to ASK the customer to do exactly what you want.

Mind blowing, right?

One of the biggest mistakes I see on clients' websites is that they never ask for the sell. Or their calls to action are buried or even at the top of the page before someone's had the chance to read the content.

You can definitely sprinkle multiple calls to action throughout a page, but every page should end with some kind of CTA.

If your client wants customers to fill out a form, add a form to the bottom of the page. If they want a phone call, add the number and make it a click-to-call link.

The gist is that you want to make CTAs almost impossible to miss. Tell those dream clients exactly how to work with your customer now that they've read the copy and make sure it stands out in the design with a contrasting color or some other design element so you literally can't miss it.

8. Keep it Simple, Stupid

If you've get nothing else from this episode though, let it be this.

When it comes to digital and web design especially, you have to focus on simplicity.

I actually teach the K.I.S.S. or Keep it Simple, Stupid method to my Digital Marketing students every semester.

Why?

Because simplicity is what works!

One of the biggest mistakes I see other designers make is including "pretty" pieces that add nothing to the functionality of the site. Much like those "creative" navigation links, when you focus on form over function, you're going to lose those conversions.

If you instantly want to improve the conversion rates of the websites you build, focus on keeping it simple. It improves your UX, helps you to have better color choices, makes the Calls to Action stand out more, etc.

Literally this entire episode has been about keeping it simple.

But it's more than that. When you offer a simple, easy-to-use experience, your browsers don't get confused. You turn a cold lead into a warm one pretty quickly. And most importantly, it's far easier for your users to convert into buyers.