How to build better websites
Written by: Daniel Davidson
What’s the first thing you think of when you begin a website project? What are your first steps? Are you hunting for design inspiration on step one, or soon thereafter? Maybe, you’re more of the developer type. You might be exploring code and functionality needs soon after your first consultation meeting.
Regardless, if you are more focused on design and code at the start of the project, then you’re heading for disappointment.
I can promise you, your fancy new website will fail. It will fail not because you’ve done a bad job. You’re probably more than capable of building beautiful masterpieces that your clients often rave about upon delivery.
No, you and your new website will fail because you’ve ignored the purpose, the sole reason for the website’s existence.
Yes, stunning design and clever code are important, but they’re not the make or break success factor you and I have been conditioned to think they are.
It is impossible for any website to succeed without a deep understanding of its site visitors.
When you get to the core of any website, it’s not built for the designer, it’s not even built for the client. It’s built and it exists to fulfill the need of the site visitor.
You Need A Plan
Failing to plan is planning to fail.
You’ve heard it so much, you probably cringe at the cliché. It’s so ubiquitous a saying it’s easy to ignore its importance. But, it’s true.
Without a plan, you’re relying on your gut instead of research and real customer insight. If you do not take the time, if you do not invest in research and strategy, you should reconsider your reasoning for even building a website.
Now, I could be wrong. Maybe your gut is incredibly intuitive, but if I were you, I’d hedge my bets with some solid research.
Building Your Plan
A website is more than a digital brochure, at least if it’s going to be successful, it should be
A website is more than a digital brochure, at least if it’s going to be successful, it should be.
For any business, their website is the hub of all their marketing efforts, on and off-line, whether they realize it or not. It’s often the first-touch point, and potentially the only touch point, with the customer.
81% of shoppers conduct online research before buying , and if your client is in the B2B market that number jumps up to 94%. With those kind of numbers, it’s imperative you, and your client, understand how to communicate with the ideal customer.
You need to set measurable goals for the website.
“Drive more traffic” or “generate more leads” isn’t specific enough. Your goals need to be specific, measurable, timed and achievable.
For example, if one of your goals is to drive more traffic, you can make that a specific goal by defining:
how much more traffic;
generated by what keywords;
what quality of traffic;
over what period of time.
Your goals will be your guiding light for the website. They will guide you through your strategy sessions, your initial build, and your client’s long term marketing initiatives.
They’ll allow you to identify what was a success so you can replicate what worked. They’ll also show you where you missed the mark and by how much.
Zig Ziglar said it best:
How can you hit a target you can’t see? Even worse, how can you hit a target you don’t even have!? If you don’t know where you are going, you will probably end up somewhere else. You have to have goals.
Even the best plan can go sideways if you neglect the primary purpose of your client’s website. Odds are, efficient communication wasn’t at the top of your goals list. It should be.
Before any other goal, your client’s website is first a communication tool.
Yes, your website can achieve a wide set of goals, but not if you fail at communicating with the customer. To effectively communicate, you need to understand who you are trying to communicate with, and creating a set of customer personas will help you do that.
A customer persona is a detailed profile of a unique individual who will represent a part of the customer base. You should create a few personas depending on the variety of the client’s customer base and business size.
Build customer personas with market research and insights from the client’s very own customer base. The goal is to develop an understanding of who their customers are.
You want to identify each persona’s interest and specific needs.
You will begin to see each persona as a very real and unique individual. Each persona will have their own set of specific needs and challenges. This will allow you to tailor your content, messaging, landing pages, and strategy for each persona group.
For example, one of your personas could be a 40-45 year old male who is:
a husband, father of two;
works approximately 50-60hrs per week as an engineer;
tech savvy with a bachelors degree in computer science;
researches options online before making a purchase;
average household income of $110k a year;
quality is more important than price;
prefers email communication over telephone;
is active on reddit, twitter, and linkedin but not facebook, snapchat, or instagram.
What’s the Point?
Well, with the example above, you can now know that price isn’t an issue for this visitor, but time is. The visitor is comfortable with researching, online and prefers to be well informed before making decisions. You should gather quite a few more insights and build a more robust profile, but even with this, think of the “what ifs”.
Your client’s website needs to be a tailored experience for each of your discovered personas, so gather as much information as possible.
Imagine if you had made pricing the dominant content strategy of your landing page with very sparse, remedial content. Make that faux pas and you could be saying goodbye to your ideal customer. You’ll miss the mark, and no amount of design will save the day.
Your client’s website needs to be a tailored experience for each of your discovered personas, so gather as much information as possible.
Buyer Journey / CTA Strategy
Once you have a solid foundation for who the ideal customer is, you will need to address where they are in the buying stage. Not everyone who arrives on your client’s website will be ready to buy.
A large segment of the site’s visitors will be researching their problem, unaware of what solutions exist. Another segment will be aware of the solutions and they’ll be researching feature options.
A third segment will be the motivated buyer who is actively looking for a vendor to fulfill their need.
Every customer goes through a process of awareness, consideration and decision, known as the buyer’s journey.
Don’t make the mistake of only targeting the motivated buyers. Most customers will purchase from the vendor who educated them during the earlier stages of their buyer’s journey.
Increase your sales potential by offering relevant content and calls to action for each stage of the buying cycle.
1. Awareness Stage
You want to describe the problem and industry solutions.
Customers are trying to figure out what they need. They know they have a problem, but they’re not aware of what types of solutions exist. They don’t know enough to have specific questions.
Avoid feature based content that is specific to your client’s unique solution, that’s too granular. The visitor has to “buy” the industry solution before they’ll know enough to understand what makes your client special.
You should aim to design and build landing pages for the site visitor who is uninformed and stepping into the market for the first time. They are green, fresh off the boat and unable to even speak the language yet.
2. Consideration Stage
Customers at this stage are informed and familiar, if not well versed in the industry’s solutions. This customer has bought the industry solution and is researching features.
Give the customer everything they could need. Answer every question they may have about your client’s features, support, warranties, and so on.
3. Decision Stage
This customer is ready to buy. They’re sold on the solution. They know the features they need. This customer is looking for the right vendor to buy from.
Make it clear how they can buy and make it as easy as possible. Answer any question and remove the obstacles the customer faces when deciding to purchase.
Once you have a good understanding of your client’s customers you can begin to form the content strategy.
It might be easier to mention the most common mistakes you’ll be susceptible to your first time around. Sometimes, knowing what not to do makes it easier to define what you should do.
1. Don’t Let Your Client Talk About Themselves
Customers are selfish. They don’t care about anyone else. They care about their own needs. So, don’t say what you want to say, say what the customer wants to know. If you need to educate the customer, you can do so by first addressing their initial concern. Then pivot to what you need them to know.
2. Never Create Content Inside a Vacuum
Avoid random content. Every piece of content you or your client generates needs to be done as part of an overall conversation.
Consider all the content pieces like wooden planks on a suspension bridge. Each plank fulfills the purpose of helping an individual cross from point A to point B. Do the same with your content. Stay focused on what is necessary for the customer progressing further down the buyer’s journey.
3. Stop Trying to Sound Smart
Drop the “marketingese” and the industry lingo. Nobody likes to feel stupid. All you’re achieving with your acronyms and large vocabulary is alienating the customer. Stop creating friction between you and them. Write so that the customer feels smarter because of your content.
Your website is not a vanity exercise, it’s a tool to get the job done.
The most important thing you need to keep in mind when generating content is that you are writing for one person. Even if you have 100,000 site visitors a day, you are having 100,000 individual one-on-one conversations. The 100,000 visitors are each interacting with your client’s website individually. You’re never talking to a crowd.
Using Your Plan
Because you’ve done all this planning up front, you’re now ready to start your website. You should have a clear understanding of the website’s goals and how to achieve the desired results.
You’re now ready to build your new website.
How Your Plan Helps Site Mapping
Site mapping, also known as site architecture or site structure, is the process of defining what specific web pages are needed. Here you define how the pages interact with each other, and what basic functionality is needed for each web page.
Your planning enriches this process. The goal is to map out what is needed for the website based on your understanding of each customer segment.
Your sitemap will define the following:
all the pages needed for the website;
the website navigation and behavior;
how each page interacts with the other web pages;
the expected entry points for each customer persona and buyer’s journey segment;
the expected user interaction for each web page for each persona and segment;
the expected exit point for each group.
In addition, every web page needs to have a call to action (CTA), or conversion point. Your customer personas and buyer’s journey segmentation will help you define your CTA’s and which will be relevant to your website traffic.
How Your Plan Helps Wireframing
Wireframing is the process that maps out what content goes on each page. Your wireframes will define the page layout and required functionality for each web page.
Most wireframes stop there, but you can go much further than content blocks filled with dummy content. Your planning allows you to dive deep during this stage and plan your intended user-behavior for each of your customer segments.
For each individual page, you can now ask yourself:
how will each customer persona and buyer’s journey segment interact with this page?
how did they arrive on this page? What content or action preceded their arrival to this page?
what is each segment’s expectation for this page? What are they hoping to get on this page?
what are your intended exit points? What does each segment need from this page to leave satisfied? What should their next action be?
Your wireframes will map out what content goes where. They’ll also define what it will say, and how it will interact with your other page elements.
You will also create your calls to action (CTA’s) with the wireframes. Define how each CTA will display, what comes before, what comes after and the language used.
How Your Plan Helps Design
Finally, the fun part, design!
Think of everything we have covered up until now. All that research, all that planning, and you’re just now getting to design. As you should expect, this isn’t a free-for-all either. Your planning and research will guide your design as well.
Good design is design that gets out of the user’s way.
Your website should establish trust with the site visitor. Familiarity is your best bet. Make sure your branding fits the user expectations, so avoid your personal preference and fit within your market. If you’re designing for a lawyer, don’t make them look like the next hip startup.
Your website is not a vanity exercise, it’s a tool to get the job done. That job is facilitating clear communication. It should direct customers to the solutions they are hoping for and expecting to find.
It’s incredibly seductive to ignore your research and give in to your personal aesthetic. Yes, design is your bread and butter, and your work should reflect what makes you special. But, I can not stress this enough: the website is NOT for you, or even for your client. Your website is for your client’s customers. It is their tool to accomplish their goal, not anyone else’s!
Unless your research has directed you otherwise, you need to restrict your design to follow conversion-centered design best practices. Avoid unnecessary design trends that do not add contextual value to the customer. Keep the navigation clear and in its expected location. Your website should function like road signs, if they’re not clear, chaos will ensue!
The Take Aways
Congrats, you’re now miles ahead of most of your competition. Most designers and developers go straight into designing and building their client’s website.
Knowing what you know now, could you imagine? Would you ever consider jumping straight to the design without all your new found insights?
Develop your plan. Follow these web design best practices. Put them all together. Do the work each step requires. I promise you, if you do the process, your website will be much more successful than it could ever be without it…but at this point, that’s a no brainer, right?