First looks

A quick look at the fonts and text colors used throughout the page

Doing a site audit

Before I got into the more in-depth reasons why the site wasn’t working, my first task was to take a look at the site as a whole and audit it, visually. Things I noticed right off the bat were cataloged and sent to the client - the font sizing, kerning, and colors. This site hurt to look at, and was not pleasing to the eye for the user. I had a hunch the red was an issue, and using colors.review proved the red accent color was inaccessible on all backgrounds. According to originalbox.co, on average you have between a 10-20 second window for your visitor to decide whether or not they are going to stay or leave your website. It's typically about 8 seconds or less in which a person has already formed an opinion of your site. 94% of negative and bad user feedback has been design related, and 38% of users have said that they stopped engaging with a website that had a poor or unattractive layout.

Gathering data

Google Analytics

Well this doesn’t look good

Problem statement

Learning where users came from, how they entered the site, and how long they stayed on each page

Solution:

By installing Google Analytics and HotJar we can see so much data, but we’re looking for bounce rates, how users entered the site, how long it took them to leave, and why

19 seconds. That’s enough time for users to look at the page, scroll down a little bit, scroll up, and decide “Nope. Let’s see what’s next.” It takes less time to click the back button and go back to Google search results, than it does to strain to read an intro. According to a classic study by Nielson Norman:

“If the web page survives this first — extremely harsh — 10-second judgment, users will look around a bit. However, they're still highly likely to leave during the subsequent 20 seconds of their visit. Only after people have stayed on a page for about 30 seconds does the curve become relatively flat. People continue to leave every second, but at a much slower rate than during the first 30 seconds.

So, if you can convince users to stay on your page for half a minute, there's a fair chance that they'll stay much longer — often 2 minutes or more, which is an eternity on the web.”

For users entering through the home page, we aren’t hitting the 20 second mark. The good news is that for our highest-viewed page users are staying for 3/4 of a minute, but where are they going next? What about this page is turning people off from contacting our client?

Reverse Path Exploration

Tracing the steps backwards

Problem statement

Our goal is, at a base level, to have potential clients reaching the Contact Us page

Solution:

Taking a look at a Backwards Path Exploration we can see how and if users reached the Contact page

GA4 offers great insights with their Path Explorations. While we can use them to see a user’s path forward, it’s less time spent clicking around when we can define the end page / goal and see the path backwards from there. We can see users are entering through Google searches and guess at what their searches are that brought them here. And in some instances the pages aren’t labeled with Keywords (titled here Not Set), which is a good find to help with optimization and SEO. We can compare this Reverse Path Exploration with the regular Path Exploration chart (not pictured) to see where dead-ends are happening and where users are exiting the site. Ultimately, not enough users are staying on the site long enough, or are not clicking-through, to reach the Contact page.

Additional Client Asks and Approach

Upon presenting this data to the client, they asked for a high-impact, low cost change that could be implemented immediately while we gather more research and come up with a longer-term game plan. I decided the easiest change would be color and text. In discussing the options with our developer this was the consensus, as it would only require editing to the existing templates and then QA the changes to make sure there are no site errors - a half day’s job. I presented several color options, and several fonts.

Color and font choices for the client to choose from

The impact is immediate - the client chose one color (gold), and one font they liked (Lato).

While we wait…

As we are waiting for the changes to be implemented, I pitched surveys to the client. They were willing to listen and gave their approval. Using HotJar, I set up two surveys: one on approaching exit, and one that lives on the side bar that is user-activated with slightly different questions hoping one would speak enough to a user for them to leave feedback. These will be the final piece of research for this client as we are at budget, but I am excited to see what users have to say about the existing design, and then the post-change design. We will circle back around to this client in a couple of months to see how the changes are impacting their conversion rate. Overall, the client is happy we have answers to a problem, and our client manager is happy that the client is happy. Wins all around with more to come.

Summary

This was a great journey into research, and why UX is important in every website design. I’m glad the client was willing to listen and understand the impact my pitched changes would hopefully have to his business.

I will update this as we have more data rolling in, both on the research side and the client side.

Key contributions

Research into poor conversion rate

Pitched changes to the client

Continuing research to see if changes are effective

Client response: they wanted to stick with their original branding

After much back and forth, the client wanted to stay with their original Red branding which posed a pretty big problem - the hex color of the red on a true black and grey background is inaccessible. But, ultimately it’s their choice so I had to do the best with what I had.

Changes:

• Implemented Lato across all pages. Lato is a great font because it has a high x-height, it has open apertures for more legibility, and it’s a modern, clean font
• Bumped up paragraph text size from 16px to 18px
• All text that was highlighted red will now be bold / 600 as well as bumped up 1px to help it stand out against the white text and dark background
• Change in font & size of the Header menu
• Added hover states to buttons - default, hover, & on press
• Enlarged phone number in Header

One month later…

Let’s take a look at the data for the past 30 days coming in after the changes have been implemented:

Here we can clearly see that the time spent on the home page has significantly increased from 19s to 1m19s.

Call and form submission data:

Using CallRail, we can see that the both incoming calls as well as form submissions to the client have increased over the past month.

Summary

From this data, we can conclude that these changes are having a positive effect on users. This is a 44% increase in submitted forms, and 12% increase in calls.

Bonus design flaw

I was recently re-reading one of my favorite books Don’t Make Me Think and thinking about this very client when I stumbled on this illustration:

The illustration in question…

…represented on the client’s website

This was an exact design element I had called out to our client manager. It was the genesis of this entire research study - I had thought users were rage-clicking on these “buttons” and wanted that hypothesis validated. Was I right? Nope, for some reason. But I WAS right about the poor design, and I’ll take it as a win 🙌🏼