nasa2

Published on December 11th, 2012 | by Jeff

4

Redesigning a Website – The Formstack Perspective

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.

Research
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.

Planning
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.

Design
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.

Content
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.

Development
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)

About the Author

(@jeffblettner) is a Web Designer, Front-End Developer, and a Conversion Optimization Specialist. He manages the front side of Formstack.com and is always striving to improve user experience with A/B testing and straight up good design. Jeff is a graduate of Purdue University where he studied Visual Communication Design. In his free time, he enjoys expanding his web design skills, watching Purdue and Colts games, traveling, finding hole-in-the-wall diners, and enjoying a good microbrew.

4 Responses to Redesigning a Website – The Formstack Perspective

  1. Jeb Banner says:

    Jeff- thanks for the great post. The last item in particular is really interesting- rolling out the site to only 50% of your visitors. I think that’s a great idea and one we might use at SmallBox.
    I do disagree a little with your design process and wanted to challenge you to consider a different process. Using filler content often leads to inferior designs. We have found that working with near final content during designs (even wireframes) is always better than filler. Content should drive design as much as possible. Otherwise you described a process that looks very similar to one we use and you added some really nice improvements. Great post!

  2. Jeff says:

    Hey Jeb, thanks for the comment. I agree, content does drive design and it would’ve been great to work with final content. However, our resources and time made that difficult and not very practical. So to avoid waiting on content, we opted for a dual approach where we outlined the content and used that as the design driver. So far that approach has worked great and allows time for tweaking both content and design.

  3. Jeb Banner says:

    Jeff, I totally understand, we struggle with that as well- having content ready for design. We built a content gathering tool- Wrangle- about a year ago to help expedite the content gathering phase on a project. That way the designer can pull from Wrangle to use the copy, whatever draft it is in, for design. Hope to have it launch as it’s own product some day.

  4. Jeff says:

    Jeb, sounds awesome. Let us know if you want any beta testers. We love workflow apps!

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>

Back to Top ↑