How to Redesign Your Website Redesign

Welcome back to Conversion Rate Optimism, Jeff Blettner,  a web designer and conversion optimization specialist at Formstack. Having just completed a complete redesign of formstack.com, Jeff spoke with me about the role AB testing tools played in the process.

Formstack_old-v-new-crop

Optimizely: How big of a role did A/B testing – actually doing it, or knowing you were going to do it – play in this redesign for Formstack?

Jeff: Very large role. Everyone has an opinion on what a website should say or include, and sometimes those strong opinions lead to disagreements in planning or design. When we reached those spots, resolution was a lot easier when we knew that post-launch, we could A/B test our different hypotheses to see what is the better approach.

In addition to examining analytics and user testing, how did A/B tests help inform this stage of the redesign process?

From tests that we had performed in the past year, we knew that pages that had more marketing content, such as testimonials, case studies, features, etc, had performed better. However, we also paid close attention to how we were displaying that content to users. We have a high visitor rate, but are low on the amount of pages and time spent on the site. So we designed a site that highlighted our best performing content in simple and scannable ways.

You and the team conversed heavily in the planning and design phase. What was the tone of the rhetoric, knowing A/B testing could help solve any debates on UX?

I think one of the early discussions (or disagreements) was what we we were going to display in the main navigation. The main nav is so important in establishing the flow of traffic and the focus of the site. We all agreed on highlighting our forms, features, examples, and pricing, but we were not sure what would be the best page to use as a lead.

We settled on a page called “Why Use Us” to give users a quick overview on why Formstack is a better choice. Part of the reason to redesign the website, besides technical reasons and better design, was to focus on retelling the Formstack story. The “Why Use Us” and the “Examples” pages were completely new pages and were part of that push to try telling people about Formstack in a new way.  ”Why Use Us” was untested, but we felt that it might be a big win for convincing visitors. After successfully launching the new site design, we noticed visitors weren’t going to the page as much as we would expect. So that prompted a follow-up test where we changed the page name to see if that would prompt more visits.

formstack-nav-old-v-new

We changed the name to “How It Works” which we had tested earlier in the year, and as another variable removed it entirely from the nav and tested a link to our “Integrations” page. What we found was that renaming it to “How It Works” increased page views by nearly 50% and overall site conversions (2 week free trial sign-ups) by 8%. The “Integrations” version lost overall conversions, indicating that the “How / Why” page had effective content on it.

formstack-ab-test-optimizely-results-nav_visits

When selecting content, did you know you’d test it?

Yes, eventually. I think that was a great motivator to keep moving on the site discussions and redesign. Instead of getting bogged down in disagreements, we moved forward on the content that we felt most strong about. And if there were disagreements, we knew that we would be able to come back after launch and test our hypotheses.

Did you develop the new site differently to enable easier A/B testing?

ABSOLUTELY! Having better organized and accessible site templates not only make updating the site easier, but makes us super agile in launching new tests.

What metrics are you most concerned about measuring in the redesign?

Overall site conversions, which in our case are 2 week free trials. After launch, we saw conversions go up 21%! We also made sure that there was not a shift in paid plans that visitors were choosing that might decrease our revenue. Luckily, all plans saw a high increase in conversion. Last we took a look at Engagement to see how visitors were interacting with completely different homepages. We saw that through thousands of visitors, there was a 13% increase in user interaction. Not only were people showing more interest, they were converting more. A solid success.

formstack-ab-test-optimizely-results-redesign

ReStory was Formstack’s code name for the site redesign.

“How It Works” on the top navigation did almost 50% better than “Why Use Us”!

Have any idea why? Join the conversation below.

7 thoughts on “How to Redesign Your Website Redesign

  1. the How It Works gave people the sense of objectivity, I agree that the self-discovery factor was valid here as well. Why Choose Us is associated with persuasion, something that not every user likes. Good job with increasing the conversion!

  2. People look towards a site that provides objective and truthful information. The ‘How it Works’ is a natural place to learn more about a product/service. The ‘Why Choose Us’ is immediately perceived as one-sided spin to convince people to use a product/service by highlighting the positive and disregarding the negative. It not surprising to see it convert much lower.

  3. We have recently used optimizely for one of our client and tha’s how i know about you guys, love this blog post a lot, i’ve already shared this with our designers so that they can get some good tips from this case study.

  4. What a great win. I definitely like hearing about teams that quickly move past internal disagreements knowing that those disagreements will be solved in the near future with a bit of testing.

    The reason I think “How It Works” worked better than “Why Use Us” is that the former invites the user to do the investigation on his or her own whereas the later feels promotional and make users feel like they’re being sold to. Users never come to a website because they want to be sold something. They come to websites because they want to learn more and make a decision for themselves.

    • Ryan, great way to verbalize what we were thinking. “Why Use Us” was the end message of what we wanted to communicate and hoped being upfront and simple in the messaging might facilitate it better. But I agree, I think it sounds too promotional and people dislike that on the web.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>