We have updated our Privacy Policy and Privacy Options

Got It

How a Homepage Makeover Can Help You Create a Loaded Visual Testing Queue



By now, we all know that testing is a strategic, methodical practice. In order to get learnings that can be applied to the next iteration, and that can further inform the strategy, small elements must be changed and pitted against the control. So how do we get a big picture of testing, or develop an effective testing queue that can quickly react to results?

Control and test versions of a webpage

Here at Brooks Bell, we create what we like to call a Roadmap. After brainstorming all of the testing possibilities, we pull out the best, prioritize them and put them into a spreadsheet. This lets us carefully track each test and allows us to make adjustments when necessary.

What’s even more helpful, especially for visual types like me, is a Visual Testing Queue.

The VTQ is a way to see the future of the page, and how to get there. It is especially useful when you have a homepage that you can immediately identify a lot of issues with, but know you’ve got to take it slow and steady. Having an end game that’s in visual form also helps during brainstorming and when reassessing the queue. And while it’s not something we’d show the client (because that might create an impatience with the testing process and a desire to test a completely different homepage against the control, losing any learnings), we use this VTQ method to show them the tests we plan to run. It helps the client to see exactly what we plan to do, and gives them a very helpful visual reference.

In the case of kokofitclub.com, I saw a homepage that could benefit from a lot of optimization. I initially went into this post with the intention of writing up some quick tests, but I saw so many opportunities, I decided to redo the page in a VTQ.

(Please note, this is just a quick-and-dirty Photoshop job, not a designed page.) From there, I’ve zoomed in on specific quadrants and explained my changes.

I do this with the caveat of: It needs to be tested into.


Screen shot of Koko FitClub

1.    What’s in it for me? Reworking and testing into the top portion of this page would be a smart move. Instead of featuring three tiny pictures at the top, I moved the video and headline there. I also pulled the scannable bullets (which are wayyyy down the page) up, and put the CTA button underneath. The CTA copy is changed, too, because right now, it doesn’t really read as such due to the logo font. Additionally, this button brings you to a search bar further down on the page, so it should say what it’s going to do: find your nearest location.


Screen shot continued

2.     You got some ‘splaining to do. Rather than keeping the body copy that further explains what KokoFitClub is further down, I moved it directly under the top portion. As we’ve explained before, there are two types of customers online; the one that wants a few key points before they make a decision, and the one that wants to learn more. So moving the copy up, and adding in one of those little pics for visual break is a good idea.

3.     Take out what you don’t need. I took out the giant Facebook module and added in Twitter and Facebook button links at the bottom. I also took out the link to watch the TV ad, and the workout counter. (That counter would be really impressive if it was set to automatically refresh the number. In this case, it’s just adding a busy look to an already busy page.) In addition, I eighty-sixed the tiny little photos, additional video and copy, as well as the very small Franchise Award. They take up space, and don’t work hard to sell the FitClub to potential members.


Screen shot of Koko FitClub

4.     Keep what sells your product best. The “How Koko Smartraining Works” module has great information, and it’s organized well. And the headline I moved above it is a nice messaging reminder of what this program is, especially for someone scrolling down the page.

5.     Be clear with your message. I turned the orange bar above the search field into a search bar. I changed the messaging to be more clear, because “Be our guest” doesn’t automatically read “Try us FREE,” which is more compelling. There’s no need to use a logo in copy; in fact, it’s graphically unappealing, and takes away some of your SEO power.

6.     Shorten the scrolling road. This is a very, very long page. By cutting out superfluous content and reconfiguring other, I made the page more scannable and less overwhelming.

While the creative in me would want to make all of these changes, because I can see all the issues on this page, the optimization part of my expertise knows that’s just not the way to go. But having this VTQ would be really helpful, to create a road map, to react to results, and to have a goal to work towards. When it comes to revamping your homepage, or any page on your site, it’s vital to test into it. You may be surprised by some of your assumptions being proved wrong. You may be right across the board. But in the end, you’ll know what won, why it won, and you’ll be looking at a higher conversion rate.