Web Design Process: How To Create a Sales-Generating Site
Table of Contents
Step 1: Understand your target buyers
Step 2: Identify your site differentiation
Step 3: Map site navigation and conversion paths
Step 4: Create your website content
Step 5: Design and develop your website
Step 6: Get feedback and iterate
Disclosure: We include products we think are genuinely useful for our readers. If you buy through links on this page, we may earn a small commission. Read product selection criteria.
Website design is half art and half science. That means you can’t create an effective website with just stunning aesthetics, nor with pure logic and best practices.
This is where the web design process comes in.
A good web design process helps you take into consideration all the important aspects to convert visitors based on your specific context. It helps you make decisions with clarity and confidence.
Web design processes tend to be written for professionals. But I believe even if this is the first time you create a website, you should be able to take advantage of a good process.
So in this post, I’ll share with you a simple process to create a high-converting website.
Here are the 7 steps of effective web design.
Step 1: Understand your target buyers
The kind of customer research you need for website design is slightly different from the typical marketing research.
It’s half facts, and half interpretation based on empathy.
This is because you cannot ask someone to articulate what they are looking for in a design. It’s an “I know it when I see it” situation.
While that sounds like a challenge, it actually gives you a lot of flexibility with research methods.
You don’t need a lot of data to back up your decision. You don’t need to create (another) customer personas if you don’t want to.
Your main goal is to answer just two questions:
Q1: What problems or goals matter most to your target buyers?
Your target buyers are not on your website to check out your company. They are there to solve their problems.
When you understand and communicate your buyers’ goals and/or pain points, you get their attention. There’s a much higher chance of them buying.
However, it’s very easy to mix up between a specific solution and the customer’s real goal.
For example, “finding an innovative vacuum cleaner” is not a real customer goal. “Having a clean house without spending a lot of time” is.
So make sure your answer to this question is something your customers would actually say.
Q2: What do your target buyers need to see to feel convinced about your solution?
Once you have established the customer problems or goals, the next questions in their mind are “Is this the right solution for me?” and “Can I trust this company?”.
The information your target buyers need to feel convinced depends greatly on your industry and the type of products/services.
In some cases, you need to provide a lot of details. In other, too much information will cause the buyers to leave.
The ways you can find the answer to this question are:
Direct: Talk to people who have bought (or are planning to buy) the type of products/services similar to yours. Ask them what their considerations were, what made them choose a company vs another, what questions did they have etc.
Indirect: Put yourself in the shoes of a customer and go to your competitors’ websites as if you were evaluating whether to buy from them. Pay attention to how you feel as a consumer - is it too much or not enough information? What parts were helpful vs. unnecessary?
Both: If you can, do both to get a more complete picture.
Generally, to build trust, you will also need to provide some of the following:
Testimonials
Case studies
Press appearance
Impressive stats (eg. 500 projects completed)
Real photos of people behind the business
Social media links
Step 2: Identify your site differentiation
Your website doesn’t need to be better than your competitors in every way.
But, it does need to have differentiation.
Something that leaves an impression on your customers and gives them an “excuse” to choose you over everybody else.
Your website differentiation can be in:
Experience: provide a more streamlined, intuitive browsing and buying experience with elements of surprises and delight
Messages: share perspectives different from your competitors, tailor your messages to a specific niche, or write your content in a distinctive voice
Visual: use a different style from your industry norms
Choose one or more categories and start brainstorming ideas: how can your website be better than your competitors?
Step 3: Map site navigation and conversion paths
Website navigation design has two goals: to make it easy for visitors to find what they need, and to nudge visitors into taking the action you want them to take.
Start by listing all content pages
Some of these will be based on the information your buyers need, which was discovered in step 1. Others will be information to serve your current customers, sponsors, partners…
The typical pages for small business websites are Home, About, Service, Portfolio, Products, Blog, FAQs, Contact, Terms & policy.
Define conversion paths
A conversion path is a planned sequence of pages to turn a visitor into a customer.
It can include one or multiple pages, depending on the level of awareness of your visitors. For instance, if your visitors are already following you on social media and trust your brand, the conversion path can be just one sales page.
For example, let’s say you’re a service provider and your website goal is getting people to contact you. Your conversion paths might look like this:
Pinterest (50% traffic) > Blog > Service > Portfolio > Contact
Referrals & networking (50% traffic) > Home > About > Contact
You will need to make some assumptions as to what visitors already know based on the marketing channel they come from. From there, plan a path that provides the rest of the information they need to feel convinced.
Aim to minimize the number of pages (because clicks can be annoying), but also avoid squeezing too much information in one place that overwhelms the visitors.
Design Site Navigation
Here’s how the conversion paths will help you with navigation design:
If your website’s primary goal is getting new customers, the top navigation should include only pages on the conversion paths. The fewer options you give, the easier it is for visitors.
On each page that is on the conversion path, strategically place buttons to lead visitors to one next step. Don’t provide multiple options and ask them to pick which way to go. Any time they have to stop and think reduces the chance they will finish the conversion path.
Step 4: Create your website content
With the planning phase completed, your next step is gathering website content, which can include written texts, logo, photos, icons and videos.
I’d recommend starting with an outline of headings before you write your content.
Online users rarely read, a behavior pattern that has been consistent since 1997.
Because a number of your visitors will scan instead of reading, your headings need to be a summary of all the key information.
Don’t use general headings like “about us”. Give meaningful information, such as “20 years of experience in the industry”.
You don’t need to write all content before design, but you should have a general idea of each page’s structure and how long each section is. Don’t start the next step until you finish this because the design layouts depend greatly on the content structure and length.
Some helpful resources:
Website Content Checklist by Gill Andrews
23+ Sites for Free Stock Photos by Buffer
Step 5: Design and develop your website
With the number of tools and templates in the market, designing a website has become much easier for beginners.
Start with choosing a platform
If you haven’t already, decide which technology tool you want to use to build and host your website. This can be WordPress, Squarespace, Shopify, or any other website builder.
If you’re not sure, here’s a good article to start exploring the options.
Personally, I use and recommend Squarespace for its ease of use and beautiful free templates. You can get a 2-week free trial with Squarespace by clicking here*.
*this’s an affiliate link: if you buy from this link, I will get a small commission at no cost to you.
Get inspired
Look at other websites (but not your competitors) and collect ideas of what you like. Maybe it’s their colors, background imagery, or a certain layout.
Some websites to look for inspirations are:
Choose fonts and colors
Your website fonts and colors need to be consistent throughout the site.
Typically, you will need one font for headings and another for paragraphs. Here’s an article on how to choose fonts that represent your brand.
For the color palette, choose about 5 colors that are harmonious with each other. Here’s another helpful article that can help you pick the right website colors.
Creating a mood board can help you find colours that go well together
Design layouts or find a website template
There are several common layouts that almost every website uses. You can either design layouts from scratch, or, take the easier route and find a template that fits your website content.
Whereas fonts and colors need to be consistent across the site, layouts can vary depending on each page’s purpose.
You can also use more than one type of layout within a page to make it interesting. Ideally, your site layouts should have ample whitespace to make the content easy to digest.
At this step, you may tweak the content after seeing how it looks on the screen.
Helpful resources: Website review checklist
Step 6: Get feedback and iterate
The first version of your website is almost always guaranteed to have mistakes. That’s why you should get a fresh pair of eyes to review your site.
The feedback you get is only as good as the way you ask questions.
If you simply send your website to a bunch of friends and ask “what do you think?” (or worse, post it on a forum or social media), the feedback you get will mostly be personal opinions with no real value.
Ideally, you should get someone to go through the website in front of you. Give them a specific task as an actual potential customer. For example, “walk me through how you would use this website if you were looking to hire an accountant”.
This has two benefits:
You get to observe how a potential customer might use your website in a realistic way. You can see which parts get their attention, which parts were easy or hard to use, and most importantly, you can ask them why so.
You adopt their objective eyes. Having someone actually use what you’ve created makes you more conscious of details. You find improvements they didn’t even mention because of that new viewpoint.
The feedback you get may require making significant changes to the website. So, ask for feedback early.
Don’t wait till you think the website is perfect to ask for feedback because by then, it’s really hard psychologically and time-wise to make changes.
Step 7: Launch and Monitor
We’re almost at the finish line.
But before your launch, make sure all the set-up details are in place. Is your website secured? Does it have a favicon and a social sharing preview image?
If you have contact forms or buy buttons, make sure you test all interactive functions before going live.
After the site is made public, don’t forget to set up third-party tools like Google My Business profile, Google Analytics, and submit a sitemap to Google Search Console and Bing.
Finally, keep in mind that having a website is not a one-time project. Be sure to review site analytics periodically and make improvements to the site.
Final Words
Though the steps I will share with you seem linear, design is actually a messy process. You discover insights and ideas as you go. One step may take three times longer than another.
Regardless, I hope this web design process provides a general structure for your project. If you have any questions, leave a comment below.
