2018 Website Design E-Book
Your Blueprint for a Successful Website Redesign
Think of your business’ website like a house – no matter how good it looks when you move in, eventually it’s going to need some renovations. Your website is often the first impression potential customers will have of your business, so knowing when to update and rebuild it can make a huge impact on customer perception.
That’s because in today’s digital world, statistics show that 75% of consumers use a website’s aesthetics to judge whether a website or business is credible or not. Moreover, consumers’ first impressions of a website are strictly related to design elements 94% of the time.
Poor website design, experience, or architecture costs businesses in many ways, including poor branding, abandoned purchases, and bad online reviews. On the other hand, websites that are well-designed, customer-centric, and easy to navigate give businesses better brand perception and customer experience.
Most importantly they drive leads and sales.
To compete and win, companies must learn to identify and understand when they need to make changes to their website, which elements contribute towards a successful website rebuild, and how to optimize a redesign for conversion and sales. Yet, this can be difficult if your website was constructed years ago, you lack dedicated web design staff, or aren’t sure what technologies to use in the rebuild.
Start With An Assessment
Contact us and have our expert team evaluate your website.
Why Rebuild – and What Does it Take?
Knowing when you need to start mapping out a website rebuild is, in the end, is a judgment call. However, there are signals to look for that will likely indicate that you should start developing a blueprint for a refresh. Here are some common signs to look for:
- Your Website is visibly unappealing or outdated
- The Website is low in search rankings
- It is confusing to navigate
- The site is not up-to-date with your branding
- There is limited conversion on Call to Actions
- Website traffic is steadily decreasing
- Your sales team doesn’t like sharing your website with prospects
Primarily, businesses struggle to really build and design a website that’s truly optimized for their customers, resulting in some of the negative symptoms mentioned above. These are just a few of the reasons you might plan a rebuild. Others might be to increase online purchases, re-brand your business, or generate more sales leads. Whatever your motivation for planning a rebuild, it’s important to make your customers the center of the process.
“Your website is not just about you. Your visitors ask, ‘what’s in it for me?’ Speak to them in their language by designing content around buyer personas. If you’re a hotel looking to bring in new business, you might target five buyer personas: an independent business traveler, a corporate travel manager, an event planner, a vacationing family, and a couple planning their wedding reception.”
Jessica Meher, Co-Founder @ Clickify
The biggest culprit of poor website design is usually developing the website based on what looks best from your perspective – and not your customers.
Secondly, it’s common to build and design websites based on (often erroneous) assumptions about the target audience or users. In both situations, the case is usually that people are too close to the company to makes objective decisions – especially from a content and design perspective.
To avoid both these mistakes, you need to identify, analyze, and design for the customer personas you’ll be catering to. Customer personas are based on demographic profiles of your best (and most profitable) customer segments. An art supply store might identify art students from certain upper-income neighborhoods as their primary clientele, and therefore design their website for a younger demographic.
For each buyer persona created – you’ll likely have three or four – it’s imperative to consider what information they look for on a website, the key message you want to convey to them, and the primary call-to-action you want them to take. Below are three examples of what your buyer personas might end up looking like, using a tool like PersonaBold.
When creating personas, always ask yourself, “What would a prospect think?”
Once you’ve decided that it’s time for a website rebuild and identified the target personas who will be engaging with it, you’ll need to make sure your blueprint includes all the core elements necessary for a fruitful rebuild.
The five core elements for any website rebuild that we’ll discuss in this white paper are –
- Content – What will your website say?
- Design – How will your website look?
- Technology – What will your website do (and how)?
- Traffic – How will you get people there?
- Conversion – How will you get people to take action?
Oren Smith, Marketing Manager
Creating Great Website Content
Rebuilding your website requires planning your content, first and foremost. Website content will communicate who you are and what you do, in keeping with your brand voice or identity. Here are the three areas of content to focus on during your re-design planning – Architecture, Brand Voice, and Layout:
The architecture of your new website encompasses what web pages you’ll include and how they’ll be structured. If you offer multiple services, for instance, you may want to group individual service pages under one general “services” webpage. The rule of thumb for website architecture is to keep things simple and logical.
First, you’ll want to take an inventory of your existing pages and post them to your website. You’ll want to see what you currently have and how they’re organized in relation to the overall architecture. Once you have all your pages mapped out, you’ll want to audit them to determine which ones you can remove. Think about things like if you can consolidate content from multiple pages into fewer ones, removing content that’s incorrect or out-of-date and generally how you can make your messaging more concise.
Next, in addition to determining which pages you’ll keep (and which you’ll discard), you’ll want to decide if there are any new pages that should be added. Maybe you’ve started a new product line that deserves its own page or want to start a blog page. Once you’ve identified those, you’ll be able to merge and reorder the content of these pages to finalize where (and how) your content will be presented. This will enable you to merge and reorder the pages and create a hierarchy for how they’ll be organized.
Once that’s complete, decide on how you’ll cross-link pages and present navigation options to the user. Try using website architecture tools like Slickplan to easily visualize and map out the content of the rebuild.
“Information architecture is the practice of organizing content so it’s easy to understand. In web [re-designs], structural diagrams map the relationships between all the screens of a site, giving you a high-level overview of your site’s components.”
Filipo Di Trapani, Web Designer @ Shopify
The content of your new website, both visual and written, should stem from your unique brand voice and identity. Whether you know it or not, your business has a brand voice, which sometimes needs to be discovered and refined while planning a website rebuild. Typically, your brand voice will be a combination of your customer-facing brand and your internal culture. Who you are and your company’s values should shine through clearly in your content.
Here are the key factors to hone in on as you polish your brand voice as part of your website rebuild:
Core Values – These represent who you are as a company. Do you value providing the best price for customers? Maybe sustainability is one of your core values? Whatever they are, make sure they come through in your design and copy.
Value Propositions – What makes your company different from all the rest? What’s the unique value proposition you offer to consumers that they can’t get anywhere else? Your content should be written in a brand voice that emphasizes your key differentiators.
Brand Voice – Aside from communicating exactly what makes you different, you want to voice that in a way that sounds different from the competitors. Think of unique verbiage, slogans, catchphrases, and design elements that will be memorable to consumers.
Company Mission – Your brand mission is an extension of your core values, but put into action. If one of your core values is sustainability, what is your brand’s mission towards achieving that goal? Maybe you source only organic materials or donate a certain percentage of profits to organizations that support sustainable business practices. Make sure these activities are noted and presented in a congruent way with your brand voice.
Positioning Statement – Determining your unique value proposition will go a long way towards determining where your brand is positioned in the market. Maybe you’re the low-cost provider? Or perhaps you’re the most reliable? Whatever your market positioning is, talk consistently about the topics that are important to your audience and how your brand can address them in a unique way.
Brand Identity – Whatever your brand identity is, it needs to come across clearly and quickly. A professional tax service will have a much different identity than a housecleaning service, for instance, so make sure your content tells the user right away who you are, what you do, and why they should be interested.
Below is Insivia’s Brand Voice Framework, to give you an idea of what factors to consider when perfecting your brand voice prior to a website rebuild:
The layout of your website will go a long way towards influencing how users interact with your new site, as well as how they perceive your brand. Your rebuild layout should be simple, easy to navigate, and optimized for viewing on multiple devices. Known as responsive design, your layout should alter and optimize itself depending on whether the user is browsing on a PC, tablet or smartphone, Safari or Chrome, Apple or Android device, etc.
The main thing to keep in mind is that, since a website rebuild is such a big investment, your best bet is to work with a design professional. While do-it-yourself might seem like a cost-effective approach to designing your layout, most times the DIY costs of time and money are much greater than initially anticipated. Moreover, odds are that your completed DIY layout won’t be completely optimized for all platforms and devices, or will come across as unprofessional.
Here are some critical factors to consider when working with your design professional to optimize your new website’s layout:
Todd Johnson, Managing Director @ Avatar New York
Website Design To Win
As the saying goes, “Beauty is in the eye of the beholder.” While there’s no objective criteria to determine how “good” your new website will look, appearance is the #1 representation of your company to each audience you’re targeting. You’ll want to focus on the following areas to make sure that the look and feel of your new website is professional and on-brand.
The look and design of your website rebuild should be positive, inspirational, and uplifting in congruence with your brand voice and desires of your target personas. You want to authentically portray your company and brand culture in a way that’s appealing to your audience.
The biggest thing you want to focus on in terms of using design to inspire your audience is the use of photos and imagery. In fact, not having high-quality images on your website might be one of the primary drivers for a rebuild. The main thing to remember is that it’s important not to skimp. The best option is using your own high-quality photos of your team, product, or locations. This helps visitors connect with the human element of your company or brand and build an initial level of trust. A second option is using high-end stock photos for some of your pages. Sites and services like Google Photos, Unsplash or Pexels offer free access to a wide array of high-quality photos.
However, you’ll want to be careful about which ones are actually available for commercial use. Google Images, for example, now allows you to sort images by those that are available for public commercial use. Also keep in mind that you may need to attribute any photos you use from these sites to the original source. Many businesses invest in professional service like Shutterstock to gain access to an even wider array of images available for commercial use. But optimally, you’ll want to go with high quality custom photography that will present images unique to your business and brand.
“Favor high quality custom photos over stock imagery. It’s worth the money to create more personalized, unique, high resolution photos. People are more likely to respond to and engage with these. Nobody wants to see pixelated or low-quality pictures, so also invest in a quality web host so those photos load quickly.”
John Boitnott, Digital Consultant & Contributor @ Inc.com
Moreover, often one or two changes in color scheme can make an enormous difference in terms of how your brand comes across. Think about picking a specific “Statement Color” that you’ll be able to use across different web pages. If you run a law firm, for instance, having a professional, muted statement color like dark blue will convey a consultative, non-threatening message, as opposed to having bright orange or red across your web pages. You can also integrate your statement color with newer trends designed to inspire, like duotone coloring:
“Duotone effect is a new trend we’re seeing time and time again. It’s powerful, impressive and dramatic. While others are chasing after spectacular images to thrill visitors and users, such a banal detail of the design as coloring manages to achieve the same result without a hitch.”
Matthieu Aussaguel – Founder @ UpLabs
When you are looking for inspiration, don’t focus on just competitors. Looking at sites across industries can give you an outlook that helps create a site that will truly differentiate you in the marketplace. Leverage websites like SiteInspire or Webby Awards that allow you to browse example sites by industry, style and a load of other attributes.
Next, you’ll want to take a content inventory of existing design assets that you have used (or could potentially use) in a website rebuild.
This can include (but is not limited to):
- Your Brand Guide & Logos
- Images & Photos
- Web Copy
- eBooks & Whitepapers
- Blog posts or News Articles
- Sales Presentations
If you have data around which assets are most viewed or clicked on, it provides a great starting point to determine which assets to incorporate moving forward and which ones you can afford to ditch. Also, think about which images or blog posts, for example, that are generating good SEO and resulting in a good amount of inbound traffic.
A key factor is to collect or develop content that spans the full buying cycle of your visitors. You want to make sure that whether someone is just doing the first round of research or about to make a decision that there is information to help move them in their process. The graphic below helps illustrate the wide range of content you can have for your site and what is best for visitors depending on their stage.
Content Usage Matrix
Also make sure that your assets, along with overall website rebuild, will follow the American Disabilities Act (ADA) so that your content is accessible to those with impairments. Organizations like the World Wide Web Consortium are there to help businesses develop websites that are ADA compliant, in addition to developing overall website standards. In general, here are the steps you should take to make sure your rebuild will be in ADA compliance.
“Under the law, websites should be just as accessible as ATMs, elevators, terminals and other user interfaces. Not only should your site be accessible to all on a laptop or desktop but also on tablets and mobile phones. Failing ADA compliance creates poor and awkward experiences for people with physical disabilities. Simply put, ADA compliance is [ensuring] your website falls within a set of prescribed accessibility standards.”
Mike Schawel, Co-founder @ Schawel + Coles
Finally, the look of your website and how it’s designed should facilitate customer conversions. What a “conversion” means will depend on your business – maybe you want people to spend more money in your online store, inquire for a demo, or sign up for a newsletter. Whatever your strategic business goals are, your website’s design should reflect and augment.
This really is the most important aspect to consider when designing your site. The layout, placement of elements, colors, feel, calls-to-action, forms, images — nearly every single element that will be created should be thought about for conversion.
These stats just scratch the surface of proof, but clearly show the importance.
65% of website visitors wouldn’t submit a form if too much personal information was required
86% of visitors who land on a company’s website homepage say they want to see information about the company’s products and services.
Only 1% of users click on a slider content
Almost 40% of users will stop engaging if they find the content or layout of a website shabby and tatty.
Including video in a landing page can increase conversion by 80%
The entire process of developing a strategy for a website from the architecture and layout to the design must not just leverage best practices, but also be tested once launched. No matter your company size, A/B testing should be part of your marketing strategy. Spending money on driving traffic without getting your conversion under control is a waste of your budget and time.
Take a look at the following quick tips from mashable:
- Keep content as concise as possible
- Use headings To break up long text
- Help readers to be able to scan
- Use visuals strategically
And to add to those:
- Keep contact forms simple and only require the necessary fields
- Always provide Calls-To-Action (often multiple)
- Make sure headlines clearly let the user know where they are
The Right Technology For Your Site
How you choose to implement technology in your website rebuild will depend on your technical requirements, in-house resources, budget, and overall business objectives. The three aspects to technology you’ll want to consider for this are your content management system (CMS), website features and functionality, and systems integrations.
Content Management Systems (CMS)
A CMS is the basic technology platform you’ll use to manage the design and content of your new website. Depending on the tool you use, you’ll have varying amounts of control over customization, design, and functionality.
There are literally hundreds of CMS systems available, but while evaluating you’ll want to ask yourself the following questions:
- Is the CMS easy for your team to use daily?
- Does it have the core features you need?
- How difficult will it be to add new features?
- Does the CMS provider have a good track record? Are they likely to stick around?
- How often (and quickly) does the CMS provider produce/create new features?
- Who do you plan to have manage the site, and can they work with the CMS?
- How will it scale as your business (and number of visitors) grows?
Here are some of the most commonly used, and easy to work with, CMS providers to consider when planning out your website rebuild:
An open-source CMS built for technical folks.
One of the most used CMS platforms in the world.
A low cost and popular CMS.
An enterprise content management system with a wide range of features for large organizations.
A mid-level CMS that caters to sites looking to be built on .Net.
The marketers CMS, Hubspot is a full-featured CRM and Marketing platform.
The key to the selection of a content management system is that it is easy for your team to manage and scale. Marketing today requires the ability to add content, create pages and integrate new features quickly. If your site is too hard for your team to use, it is basically a roadblock to lead generation and sales.
“If you’re running into a lot of roadblocks when you try to update your current site, your [website rebuild] will often be accompanied by a switch to a new CMS. This will mean that the entire site needs to be built from scratch, not just the design, and that the staging server will contain a brand-new website that eventually takes the place of your current one.”
WebpageFX, Complete Guide to Redesigning Your Website
Features & Integration
Your website is likely designed to contain multiple features and functionality designed to engage your target audience. This encompasses things like embedded videos, interactive calculators, and social media widgets. Over time, you’ll want to evolve your feature set to your visitors to make sure your site is just as engaging as your competitors.
Features can either be implemented in-house or provided from third parties. So, take stock of what features are “must have,” which are “nice to have,” and how much each will cost in terms of time, money, and ongoing maintenance. Then you can prioritize which ones to dedicate internal resources to and which to outsource. Think about not only which providers you want to choose, but make sure that they seamlessly integrate with your current systems. Where will the data be sent, to whom, and – most importantly – will it be secure? The number of visitors and traffic you experience, as well as volume of media and feature requirements, will affect your choice of vendors – and in turn integration strategy – so make sure providers’ servers have the bandwidth to accommodate your needs.
Also keep in mind that the number of features and functions you have on your website will ultimately impact user experience, search engine optimization (SEO), and speed. You want to include as many relevant features as possible without affecting load times.
Dom Nicastro, CMS Wire
Rebuilding your website to be twice as good as it was before is only half the battle. Optimizing your rebuild to generate traffic and engagement is critical to the ongoing success of your redesign. You’ll want to take a look at your marketing strategy, SEO, and content production to get people to your site.
At Insivia, we are big believers in developing a smart strategy before executing. A typical mistake that companies make is to build a site and then engage a firm to create a marketing strategy or execute marketing tactics. The challenge is that the website needs to be aligned with the marketing strategy more than the other way around.
Make sure to build a marketing plan before you rebuild your website. This way, you’ll make sure to build in the right features to support and optimize your marketing and traffic generation efforts. Your marketing strategy for the rebuild should include the following:
Utilized for marketing campaigns and search optimization, landing pages are a cornerstone of any marketing plan. If your site does not allow you to create smart landing pages that are funnels for conversion, then you have a huge hole in your bucket.
Today’s marketer leverages a lot of tools to do their job right and marketing is part of a larger revenue generation system. A plan for integrations with a wide range of tools including CRMs, Automation, Chat, Social Media, and Analytics should be planned well ahead.
Content has become the center of many marketing programs for search, e-mail, social media and conversion. Not only should you have a content strategy to understand what types of content the site should support, but also a process to publish content.
Of course, the next and most important piece is to determine what your success metrics are and what goals the organization has for the site in relation to marketing.
Search Engine Optimization
Perhaps the most important part of generating traffic to your redesigned website is search engine optimization. You don’t want to degrade the SEO that your current site has established, but find ways to enhance it. Here are the steps you need to take:
- Consider the SEO
Don’t just throw out existing links; find out which ones contribute most to SEO.
- Crawl Existing Site
Use a tool like Screaming Frog to get a sense of how your XML sitemap and current metadata are structured, and how they affect SEO.
- Conduct an SEO Audit
Tools like Woorank will help you discover what search engines like – and don’t like – about your site. Also get your hands dirty and look for SEO unfriendly content like missing page titles, broken links, and canonical tags.
- No-index New Site
This is a simple step that is often missed. By no-indexing, you’ll prevent search engines from picking up your test site before it’s ready to rollout. If you no-index your test site while in production, it’s critical to make sure you reverse it once it’s launched.
- Setup 301 Redirects
Make sure that Google and other engines know where your new pages are. Skipping this step can cause your entire site to be delisted from Google and have to start your SEO journey over from scratch.
- Optimize Meta Data
Ensure your titles and metadata are optimized.
- Get Fast & Responsive
Your site should load extremely fast and work on all mobile devices.
- Crawl Test Site
Crawling your new test site will enable you to compare what’s going to be SEO friendly compared with your old site. Again, use a tool like Screaming Frog to run a crawl analysis.
- Analyze Data
Take the test crawl data, and make any necessary improvements in terms of titles, headings, tags, broken links, or any other SEO issues that surface with your new site.
Content marketing has quickly become one of the most effective and expedient ways of generating web traffic and establishing a firm brand message. It’s one of the key considerations of any website rebuild, as producing content for a target audience is now mandatory for businesses of any size.
First, make sure that the layout of your content is easy for readers to scan. This means using bold headlines and dividing blog posts into sections, for example, so readers can easily get to the meat of what interests them the most. Create hierarchies within your content to define importance, and guide visitors to the latest, best, or most relevant content. Making content SEO friendly means avoiding tactics like keyword stuffing or overly sales-oriented messaging. Take a more marketing-, versus sales-, oriented approach.
Just remember, your audience may not interpret content the same way you (or those within your company) do. Develop content that is concise, to the point, on brand, and provides useful information to the reader. Finally, use an editorial calendar to make sure content is published at regular intervals. Tools like Trello can help manage the calendar, while others like Hootsuite can aid in scheduling posts at optimal times and running analytics reports.
Kayli Kunkel, Digital Marketing Manager @ SparkReaction
Ensuring Your Site Converts
Formulating a blueprint for your website rebuild means designing it not just to get people there, but to get them to take some form of action. Whether it’s downloading an eBook, setting up a sales appointment, or signing up for a free trial, conversions will largely determine the success – or failure – of your rebuild. You want to set up conversion goals for the new site, implement analytics to measure what’s working (and what’s not), and continually optimize your conversion tactics.
Planning your rebuild for conversion means setting up concrete goals and tactics you’ll use to encourage conversions. While SEO activities fall under the “Leading” category, conversion goals usually contain many of the following “Soft” marketing tactics:
White Paper Download
Social Media Follow
Each of these micro-goals will support your overall goal of increased sales at some point, and you’ll need to have effective calls-to-action (CTA) to drive conversion. You’ll need to think about how things like your “Sign Up Now” button play into overall design and appeal to the user.
“Although better CTAs are sometimes a simple matter of rewriting your copy or making minor changes to your approach, sometimes a redesign is the best way to drive clicks and actions. If your most important CTA isn’t having any effect – whether it’s ‘add to cart’ or ‘sign up’ or something else – consider changing the design to give it more power and attention.”
WebpageFX, Complete Guide to Redesigning Your Website
In order to see what content and features are converting the best, you’ll need to implement a website analytics tool and strategy during your rebuild. But first, it’s important to get insights from your existing analytics. Like SEO, take an initial conversion audit of your current site if you already have a tool like Google Analytics connected with your site.
Once you’ve mapped out which analytics tools you’ll use, and which conversion metrics you’ll measure, you want to continually optimize your conversion rates. This means not just optimizing your site to increase conversions, but also to drive down the cost per lead. If you can generate more leads by re-positioning your “Contact Us” button, for instance, you can generate more leads at a lower cost than producing a white paper for download.
Tools like Pingdom and CrazyEgg can help you visualize which areas of each webpage are getting the most hovers, clicks, and overall interest from visitors. You can then use that data to shift around assets in an A/B testing fashion to optimize your rebuilt website for conversions over time. You’ll want to focus on the more “Hard” marketing conversion activities like Contact Us forms, sales calls, and actual online purchases.
A/B Testing + Conversion Rate Optimization
Once you’ve established a baseline, you can then engage in measurement and split testing. You’ll especially want to split test your priority pages, using A/B variations. Try tweaking the colors, verbiage, and positioning of your call to action buttons on your priority pages to see which variables get the most conversions. When choosing a CMS system, it’s good to inquire about the A/B testing and analytics capabilities so that you can optimize your CTAs and conversion content.
Some content management systems have A/B testing integrated, but these testing tools are not always as strong as software that focuses on testing.
A website must be a constantly evolved marketing asset. From the day it launches, regular evaluation should continue to happen to make sure that it is delivering on objectives. There is always room for continued improvement and more often than not most sites have low hanging fruit that can make a huge impact on results. The 80/20 rule often applies for website conversion.
Qualaroo, Beginners Guide To CRO
Planning a website rebuild and creating an effective blueprint can be a massive undertaking for businesses of any size. However, by breaking down the project into manageable – and measurable – chunks, you’ll be able to transform from “just a site” into a strategic growth tool that helps take your business to new heights.
Based on this whitepaper, and our experience at Insivia, here’s what businesses should focus on when planning for their website rebuild:
- Always look for signs of when you need a rebuild and something might be wrong
- Stay on brand with both visual and written content
- Inspire your audience with unique, on-brand design elements
- Evaluate technology based on goals, resources, and internal capabilities
- Take Marketing into account with all aspects of a new site
- Optimize for conversion with analytics tools and continued testing