Redesigning a Website – The Formstack Perspective

Written by Jeff on December 11, 2012

Posted in Form Optimization

Being the conversion optimization specialist at Formstack, it’s against my professional philosophy to do a complete website redesign. So many sites can be drastically improved just through A/B testing alone. Not only that, but a site redesign is an enormous undertaking. However, there are scenarios that call for a complete site overhaul. Sometimes it’s corporate rebranding, other times it’s to keep up with changing technologies. For Formstack, it was when we created the Launch Pad tools. We needed a better way of to tell our story, and our current site couldn’t get it done.

We’ll be unveiling our redesigned website soon. In the meantime, here’s how we went about the overhaul process, as well as tips for your website redesign, accompanied by cheesy black and white photos symbolizing certain steps.

Before we developed, designed, or even planned anything, we jumped in and looked at the current state of the site. We scoured Google Analytics and put together numbers that told the story of the current general Formstack visitor. We looked at where they entered the site, how long they stayed for, how many pages they browsed, where they exited, and where they converted to a paid plan. With the detailed info, we were able to paint a broader picture of where our current site was failing and how we could make up for it in the new one.

In addition to analytical investigation, we did a heavy amount of anecdotal research as well. Using Formstack surveys, we emailed our customers and compiled user feedback. We followed up with them, both good and bad reviewers, and got their opinions on what sold them in the first place and how we can make the site and tools better.

Once we had our research complete, we set about the difficult, and at times, tedious task of planning the site. We wanted to have a fairly specific plan for the site completed before we even started design, so we were thorough during this phase.

We started by identifying the top five goals of the new site, based on previous research. How were we going to address conversion problem areas? How were we going to educate users about our products better? What specific things do we want users to see and read?

Next, we sat down and discussed specific pages we would need to make the site work. Again — back to research. Where were people going on the current site? What pages were included in the conversion process? How many did they view? What pages could we drop?

It’s very important to be specific in this phase. You should leave this step with a full sitemap, because this will be the blueprint for all other steps. It will determine what needs to be designed, what content should be created, and what expectations should be set for the rest of the team.

Now comes the fun part! While designing the site, keep in mind the goals that you want to accomplish, not just the fancy new style you’re trying to create. Start with one page and design it completely from header to footer, but with filler content and graphics. Using this page, you can translate it into a style guide and a base template for the rest of your pages. Complete the phase by designing the rest of the site based on your sitemap.

After you have created initial designs for each page of your site, you can begin the process of developing content to fill in the placeholders. To aid with this, we created outlines of each page with specific points we wanted to discuss. Not only did it help organize what should be written, but also what questions needed to be answered per page.

The content phase isn’t just for writing; it’s also for designing the graphics, finding the images, and creating the video that you want to use to tell your story. Graphics and images are often last a priority nowadays, with the convenience of stock media sites. But these elements are so pivotal in communicating your message and site style that cutting corners here could result in a sloppy overall experience.

Here is possibly the most fun phase — where everything comes together. Taking your designs and coding out a template that will fit the pages of your site. Be mindful of naming schemes for your CSS, and try to come up with a system that works not only for you, but any other designer/developer that will work on the site. If you’re making a large site, it’s a good idea to break your template into chunks or snippets that can be reused and shared across the site so you have one location to edit them. Your friendly neighborhood developer can assist.

With your environment set up, start coding each page based on your mockups. For organization, store page-specific CSS in separate sections of your stylesheet. To keep things more organized, I recommend having a separate stylesheet for your standard template base styles. Organization during development will help you months down the road when you’re adding or editing pages.

Launching & Testing
With a site created, now the best part — launching! After investing all that time, most people are ready to send 100% of traffic to the site. However, doing this may have a drastic negative impact on your sales, many times due to returning visitors. And if so, you could risk alienating the new site design altogether from company executives.

A more apt approach is to A/B test the site at a 50% traffic, or lower, and to only new visitors. If there’s a drastic drop in sales or conversions, you could easily pull back the release and re-evaluate the design and try again. Be sure to give the site enough time to develop a significant result in the test. Hopefully, by the end of the testing phase you’ve proven that your new site not only has a zero to positive impact on conversion, but you’ve accomplished all the goals you set for your site in planning!

This is the step-by-step process we’ve been sticking to as we undergo our website redesign. Have you successfully redesigned your website using a different method? Did you experience a redesign fail using this method? We’d love to hear about your experiences. Let us know in the comments below!

(Featured image cred)