We’ve all piddled around in Wordpress, Squarespace or Wix, adding sections or changing colors on a webpage. But alas, the finished product rarely comes out how you hoped. Either the colors aren’t quite right, the flow doesn’t quite flow, and the overall cohesiveness of the site is…off.
The good news is you don’t have to wonder for long where your exciting quest into web design went wrong. The answer is simple: You skipped the planning process. Even the most skilled adventurers don’t set off into the forest without a map. Sure you might get somewhere, but it won’t be where you wanted to go.
Your website is the hub of your digital marketing, so it’s worth putting in the effort to create one that is attractive, informative and easy to use. An effective website is one that clearly conveys your brand message, is intuitive to your user’s needs and creates a seamless experience throughout the entire sales funnel. That’s a lot to pack into a few pages.
In this blog, we’ll hear from our two Senior Designers, Shelby Arnett and Alycia Jones, (plus a few other Lone Firnians) about the value of starting your website project with a blueprint and the opportunities it creates for your business.
What Is a Website Blueprint?
A website blueprint is one of the first steps in the website planning process. It’s where you take a deep dive into your current website — evaluating performance, user flows and messaging — and find areas that can be improved in a redesign. The goal is to align all of your web elements with your central brand strategy.
It’s also an opportunity to see your options and make preliminary decisions before anyone starts editing your website. “In the blueprint process, clients get to see what we have in mind and what kind of work we could potentially do for them. This helps us determine if our design ideas really feel like their brand and match their expectations,” Shelby says.
“It’s a great low entry point,” Alycia adds. “You get valuable feedback about the health of your website and then you can make an informed decision about if you want to go all in on a big redesign.”
What’s Included?
A “website blueprint” is the plan that comes from analyzing your website and creating a plan for your redesign. Whether or not they call it a blueprint, most agencies have a process for this foundational work. Each one should have a few core elements:
- Website and SEO analytics evaluation
- Sitemap structure (both current and proposed)
- User flows
- Copy/content audit
- Proposed design direction (mood board or similar asset)
“During these steps, it’s really important to look at the website and try to find the most simplified way to reorganize it to improve the user experience,” Alycia says. She adds that the sitemap and user flows are great tools to help you accomplish this task.
This is also where you can hone in on your messaging. A combination of the copy/content audit and website analytics will give you a better understanding of what’s grabbing your audience’s attention and where you’re losing them. Your copy will act as the backbone of your website, so you want to ensure it clearly and concisely conveys your core message.
What’s Enough?
As you can imagine, you can really go off to the races with the tasks in a website blueprint. You could spend hours creating detailed mockups of new web pages and analyzing each word of copy…but that’s not actually the point.
“You want to treat it more as a general outline,” Shelby says. “You just need to understand the general structure of the site and the flow of a particular page. The blueprint is intended to start a discussion, not lock in details.”
What Does It Look Like?
I’ve named the elements of a blueprint, but websites are visual things. That means we need pictures! Check out the images below to see examples of a sitemap, user flow and home page mock up.
Why Do You Need One?
“Blueprints are so valuable because they jump start your website project,” says Amanda Sleger, Director of Sales & Marketing.
“They take the guesswork out of creating a site structure, solidifying your messaging and deciding on design because everything is backed by research and your brand strategy.”
A blueprint should always be the first step in a website builders’ planning process, especially if you’re working with an agency. It ensures that the team you’re working with is a good fit your needs, it gives you options and lets you evaluate the agency’s work, plus it gives you feedback about where your site currently stands and how you can improve.
In short, a blueprint is the foundation of any good website redesign. It sets out the parameters of the project and the needs of your users so you focus on building a website that helps you achieve your business objectives.
“If you jump right into a template, it’s like buying a prefab home,” Alycia says. “Sure it’ll work for now, but any big storm might blow it over. When you start with a website blueprint, you have a solid foundation to build a stronger website that can work for you in the long-term.”
Benefits of a Blueprint
Aside from making the entire website design process easier, there are a handful of benefits that come with a blueprint. For time’s sake, I’ll just cover the most important three.
Understand Your Analytics
The first benefit of embarking on a website blueprint is that you get to see a comprehensive picture of your website’s health.
“For me, the analytics are the most valuable part of the blueprint process,” says Linda Quezada, Marketing Consultant.
She explains that the analytics phase shows what users are doing on a website and what keywords they’re using (and not using). It’s also an opportunity to assess competitors and find what they’re doing well and where they’re missing the mark.
“This serves as a foundation for all of our recommendations so we can produce the optimal sitemap and user flow of the new website. It ensures we address the main objective of a website: Help users.”
As an added bonus, the analytics phase of a blueprint also helps you identify search engine optimization (SEO) opportunities. It gives you insights into your domain authority, quality of backlinks and keyword opportunities, all of which you can leverage to capture more organic traffic (read: leads).
Choose All Design Elements
You might spend hours agonizing over your brand’s color palette. Should your website be neutral? Colorful? A pairing of tertiary colors? What many people forget is that choosing your brand’s design elements is about more than just colors.
The overall design of your website includes a color palette, fonts, iconography, logos and images. You want to have all of these elements nailed down before you start applying changes to a website.
“With a blueprint, you get to figure out how your site is going to look visually without immediately applying everything to the pages,” Alycia explains. “It gives you the flexibility to tweak the design while it’s still easy to do and expedites the design phase of your website because you already have a visual roadmap created.”
Ensure Consistency
A successful website is a consistent website. Plain and simple. But there are a lot of moving parts on a site and a lot of people with their hands in the cookie jar, which makes it easy for things to fall out of alignment. That’s why you need a plan.
“Brand consistency is really important if you want your brand to resonate with users,” Alycia says. “Your site needs to match the brand you currently have or want to be and carry that through every single page of your website.”
When it comes to design, Shelby notes the importance of deciding on a vision before implementing changes.
“If we can nail down a solid homepage design, all those elements will get carried over to the rest of the website, which creates a more seamless user experience.”
In addition to design, you need to consider the copy. What you say, how you say it and how it looks on the page all factor into the user experience. So you want to make sure it's perfect.
When you have a single person reviewing all of your website content, as in the blueprint audit process, you have a much better chance of coming out with a single, focused message.
“A copy audit allows me to look through the pages on a site and determine what information is adding value for customers and what’s just taking up space,” says Ali Garbero, Copywriter. “This helps me determine if there’s a clear story for users to follow so they experience success with your brand and ultimately buy your product or service.”
How to Build a Blueprint
As I mentioned a few times, building a website blueprint is a process. You need data from your current site to make decisions about your new one, so you have to start at the beginning if you want positive results. There are four main steps in building a blueprint:
1.) Evaluate Current Performance
You have to find your weaknesses to know what you need to improve. That’s what this initial evaluation is for. Take a detailed look at your website analytics and SEO report to find:
- How much traffic is your website generating?
- Where are users leaving your website?
- What is a typical user flow?
- Are you ranking for relevant keywords?
- Can your domain authority support the keyword opportunities you’d like to pursue?
These are just a few of the things to examine during a website evaluation. The more you can understand about how your users interact with your website and where you can strengthen performance, the better you can design a new website that supports your business goals.
2.) Analyze Copy/Content
Copy audits give you a chance to meticulously comb through your website and assess how you speak to clients. Or more importantly, if how you’re speaking to clients works.
Ali recommends focusing your copy audit on a few key questions:
- What words, phrases or taglines do you use to relate to customers?
- What is your brand personality? Does your copy reflect that?
- Are you positioning your customers as the Hero or focusing on yourself?
It’s critical that your copy tells a story throughout your website, one that readers want to follow. This is how you guide them through your pages to a purchase.
In addition to the above questions, you should also ensure there’s clear, concise language throughout your website and easy-to-find calls to action that take your users to the next step in their journey.
3.) Develop Your Design Direction
Next, you need to consider your graphic design elements. In the blueprint process, it’s critical to comb through your current web design to review your branding, what additional assets are needed and where improvements could be made.
From there, you can decide on a mood board and compile all of the design elements that will go into the new website.
**Hint from Design Team Lead Vanessa Wolfe: “It’s critical to base these decisions on market research so that you know your choices will resonate with your target audience.”
Creating the mood board is non-negotiable because, as Alycia mentioned earlier, you need to ensure consistency across your site. Every page should feel connected by central design elements. You don’t want to hold on to something that causes a disconnect.
“You want to make sure you don’t go into the design portion of your website project with elements that don’t fit your brand or the needs of your customers,” Shelby notes. “This can lead to time-consuming and costly revisions down the line.”
4.) Consider Your Options
After your research is compiled, you’ll have a good idea of what needs to change on your website. This is where you start using that information to create options for yourself.
The first step is to build a new sitemap that outlines the general hierarchy of your website. This helps you determine how many pages you need, how you’ll classify them and provides the foundation for your user flow, which you can add in after your sitemap is complete.
Once you have your site structure outlined, you can turn your attention to design. At this stage you don’t want to focus on advanced elements like interactive features or animations; you just need to build a framework. Work with a design professional to create a few potential homepage designs that will dictate the look and feel of the rest of your website.
With all these options in front of you, it will be easier to determine what you need to create the best website for your business.
Great Plans Make Great Websites
Your business’s success rests on the shoulders of your website. Without a high performing website, you’re at risk of losing leads and missing out on big opportunities.
So don’t dive into your favorite web builder and hope everything works out. Take the time to build a website blueprint so you can craft a site that supports your business goals.
Wishing you knew more about website planning processes? We’ve got you covered. Check out our blog about why you should wireframe your website.
