A few weeks ago, we shared why we decided to redesign our new website in under three months. If you missed that post, stop what you're doing and read it here (it's a three-minute read, we promise!).

So, to jump back in where we left off, our target personas were the real catalyst for change and the redesign of our new website. We took specific, purposeful steps to apply our newly established positioning, target personas, and solution offering to the site's design, layout, navigation, content, and messaging. Below, we share the 10 steps we took to pull off our website redesign.

1. Start with the objective

Why do you need a new website? Are there issues with the existing site? What are the business drivers for the switch? Explaining your goal will help drive everything else in the specification. For us, it was all about:

• New positioning
• New target personas
• Accelerating our lead lifecycle
• Delivering on a consistent brand look and feel

2. Define the goals

Below are the specific goal areas we set up for ourselves. Rather than looking at industry benchmarks for quantifying, we looked at our current metrics for each of these and set specific goals that realize improvement in each area listed below:

• Increase unique visitors (from organic search/SEO)
• Decrease bounce rate
• Increase average session duration
• Increase average # of pages per session
• Increase number of “Contact Us” conversions
• Increase number of “Free Trial” conversions
• Increase number of newsletter/blog sign-ups

3. Fully flesh out your target personas

Identify and map out your target personas regarding their pain points, the language they use, and the positioning of your solution/offering. Doing this will help you create the messaging and content that will resonate and lead to achieving your defined goals. Consider what each persona will want to do on your website and what you want them to do. Are you trying to persuade them to engage in a free trial of your product, contact you for a demo, sign up for a newsletter?

If you have more than one target persona try to prioritize these audiences. It will support some of the decisions you'll need to make when designing the layout and navigation of the website. Here are some examples:

• User or purchaser
• Company type
• Industry(s)
• Functional area
• Seniority/job title

In our case, we designed for two broad categories of target personas and then subcategories. Our primary persona is the “purchaser” of our product, defined as a strategic business head who cares more about the solution, success metrics and return on investment. Our goal for this persona is to move them towards the “Contact Us” or “Request a Quote” CTAs or to download a piece of gated content which adds them to our lead funnel and nurture email programs.

Our secondary persona is the user of our product, which is almost always within a creative, production, and technical capacity. These are the people who are responsible for actually using our platform to build the interactive video experiences. Our goal with this individual is to get them to sign up for our free trial of our product. They also enter our lead funnel but on a different type of lead nurture program than that of the purchaser.

4. Provisional site structure

We started with developing an information architecture for our proposed site, which is really just an overview and sketch of pages and flow. To do this, we looked at it from a top- to bottom-of-the-funnel perspective. The home page represents the top of the funnel where the messaging appears inspirational and offers high-level information that appeals to all personas.

Moving down the page is like traveling deeper into the funnel. As you scroll down, we offer our different target personas opportunities to quickly navigate to the specific areas of the site geared towards their needs and interests. For the purchaser and business persona, we created three distinct solutions pages, each catering to a specific audience (in our case People Management, Learning and Development, and Production Marketing and Operations).

Additional pages in our website include our product page, dedicated to our user persona, and our customer showcase page, which meets the needs of all audiences. As visitors go deeper into the website, they travel deeper in the funnel and are more committed to gathering useful information. Calls to action are planned carefully throughout the site to optimize our conversion-to-lead opportunities.

It's likely that your first structure/sketch will change during the wireframe and design stage, but it's helpful to have a starting point that clearly communicates the different areas and navigation/flow of the site. The primary purpose of this stage is to have something to show your key stakeholders that allow them to provide input, ensuring you don't forget to include anything that needs to be on the site.

One word of advice: consider not copying your old website structure as a change could yield benefits. By carrying old assumptions into a new project, you risk missing out on a beneficial change. The best thing you can do is to reference websites that you think represent the kind of experience you would like to provide (but we’ll get more into that later).

5. Technical specifications

At this stage, you need to address technical requirements. For example, what CMS or web framework will you use? Should the website integrate with any other systems?

Traditional content management systems like WordPress (and their associated themes) are typically built for ultimate flexibility for any number of uses, but the site suffers from the weight of the extra code—when in reality your site only needs a fraction of it. You can really speed things up by losing that extra code weight.

We knew our sluggish WordPress site didn't properly convey the high-performance nature of our product, and we wanted the new site to feel fast and responsive. We also wanted to have a site that's more flexible and could grow with us as our messaging needs evolve.

Instead of spending time and effort connecting the site to a traditional CMS which helps convert non-code to code, we chose to use Jekyll, which cuts out the back-end and only serves static pages that load much faster than WordPress and allows us to simply code exactly what we want. This non-CMS approach doesn't work for every company but makes sense for a team that has dedicated developer resources and needs to move quickly while remaining flexible.

6. Brand, style, and tone of voice guidelines

Not all companies have these, but they are an invaluable tool for maintaining consistency of your brand and the tone of voice representing your company. This is not only for your website but across all of your channels, including the sales and client services teams. When we shifted our positioning and our target personas, we knew we had to also shift to a new tone of voice.

7. Websites you like and don't like

Having a list of websites you like and don't like is helpful in guiding the design process. This gives a great starting point (in addition to your brand/style guidelines) to work towards your ideal design.

8. Know your competitors

Looking at your competitor's websites can give you good ideas from a couple of angles:

• What are the most appealing features? Is there anything worth replicating/borrowing?
• Are there opportunities to improve on how something is being presented or featured?
• Are you distinctly differentiating from the competition?

Before we started our redesign, we completed a competitor analysis, which we were able to reference quickly during the early stages of the design process.

9. Know your budget

Being realistic about your budget and timeline helps determine first whether or not to try and do it in-house or to outsource. If you outsource, you have to keep in mind that, depending on your budget, this could lead to whether or not you’ll need to compromise on the site specification.

We've gone both routes in the past, meaning we've both outsourced and created our website in-house. For our latest redesign, we knew more about our business than ever before, and we had the talent in-house from which to design and build our website. Because our timeframe was so tight, and that a redesigned website fulfilled a major strategic need, we knew doing it ourselves was the best route.

10. Timeline

If you have an insane deadline like we made for ourselves, the best thing you can do is tie it to a strategic priority that supports carving out the necessary resources to get the work completed.

Conclusion

The most important thing is not to allow yourselves to get interrupted, distracted, or divert resources to other areas of the business. Get in there, stay focused, and get it done. Your website is your hub, your storefront. Everything flows from there. Get that right and sales and your other channel work becomes easier. Take a look around our site and let us know what you think on Twitter at @Raptmedia.