Picture this – You have an interview tomorrow for your dream job.

You are confident that your skill-set and experience in the field give you a fighting chance. However, is that all it takes? The answer is no.

Your outfit, how you carry yourself, how approachable you are – all of these aspects matter just as much. These will meet the eye first and a subconscious judgement will be made the second you walk into that room.

See where we’re going with this?

Your website’s design is the outfit of your brand in the digital space. Every line mentioned above stands true for your web design. Which is why it’s imperative for us to discuss this and help you achieve optimal design through the following web design best practices.

In fact, a report by Stanford found that three-quarters of people judge a company by their web design. This influences their feelings and place in the user journey.

Now that we’ve grasped the importance of web design, let’s look at a 25 step web design checklist for 2021. 

Step 1 – Customer Research

Just as a manual is required to understand how to use a product,
Customer research is required to know exactly whom you’re catering to. 

Learn and understand everything you need to know about your consumer. We’re not talking about hiring a private investigator and tailing your potential consumer (don’t do it). 

Focus on attributes that’ll help you draw a better conclusion about your target market. Likes, preferences, interests, motivations and general buyer behaviour. Digital Marketing has made it 10x easier to gather such data about your consumer. 

From pre-inception of the brand – Surveys, Focus Groups, Interviews.

To the lifetime of the brand – Feedback, Social Media Platforms, Analytics Tools.

Why is Customer Research so important? 

Focus

There will be a lot of decision making involved in every step of the business. And it’s easy to lose sight of why you started up/what’s most important to the brand. This is where customer research helps. It brings your focus back to the core – your customer. Decision making gains clarity when you know your end goal. 

YOU centered

This is at the heart of what we do here at Profitcast. The entire brand is client centric and in order to do that, we carried out extensive customer research.

Your business depends on your consumer. Naturally, you put them first. How do you do that? You learn about them and create your strategy accordingly. 

Relevance

You did your customer research and built your brand based on it. Great! That should clear your road to success automatically, right? 

Wrong. Customer research is not a one time stint. On the contrary, it is an ongoing process that keeps you up to date with the ever changing market. 

Risks

The bread and butter of every entrepreneur. They say a business person should have a stomach for risk taking in order to succeed. But does that mean you go in blind and leave it to fate? Taking calculated risks and only when actually necessary is more appropriate, don’t you think? 

In this case, consumer research allows you to mitigate risks by creating products that will sell to your target market. 

Target Market

Customer Research helps define your target market. And ongoing customer research helps you find new demographics that could be added to your target market.

Step 2 – Customer Personas

A customer persona is the bible you create for yourself when it comes to any information regarding your target audience. 

It is a representation of your target audience. You can create a few personas for different segments of your target audience. Each customer persona will have a detailed description and depict a whole personality of that particular segment. Likes, dislikes, demographics, traits, occupation, sex, goals, pain points, all of it. 

The idea is to add layers and define the customer persona as you keep going. This makes the targeting much more defined and increases your chances at success. 

The customer persona spring covers the Content you should be making, the Channels you should be using and the Data you should be gathering.  

Use the image above as a template and get cracking on your customer persona. You can also go ahead and use free templates available online like the one by Hootsuite. 

Step 3 – Competitor Research

So far, you’ve studied whom you cater to. Now you study who caters to the same audience as you do.

Knowing your competitor

This is probably the only situation where ‘’You are your competition’’ doesn’t stand. Sure your brand has to be better than before but you also need to understand how the competitors in your market function. 

Competitors are of the direct and indirect kind. 

Direct Competition – Businesses dealing with the same products/services as yours. In this case, price, place, service and other such factors come into play for decision making. 

Indirect Competition – Businesses that offer similar products/services and target the same audience as you do. This might be a juice bottle or Coca Cola. Both are different products but they’re used as a beverage or to quench your thirst and that makes them indirect competitors. 

Now in order to properly understand your competitors website strategy, answer the following questions: 

• Do they have a proper website strategy in place? 
• Do they have a similar objective as yours? 
• Are they working toward that objective? 
• Do they target the same audience? 
• How efficient is their website design? 
• Is there clear usage of CTAs? 
• How are they using their white space? 
• Is their website cluttered? 
• Is the flow confusing? 

Step 4 – Brand Values

Mission Statement 

A mission statement talks about the brand’s core values and goals. It’s important as it drives the entire team towards a unified goal. It helps your employee and your customer understand the brand and what it stands for. 

When your employees are tied and in full agreement with your brand’s mission, they believe in the brand and have vested interest in its success, paychecks aside. You will find a sense of purpose in employees who work for a brand with a clearly defined mission statement. 

Brand Positioning Statement

What is your brand? 

Why does it exist? 

Why does it provide a particular product/service? 

Why should a buyer choose your brand over others? 

Your brand positioning statement should answer the above questions. It might seem like this is only something your marketing department needs to adhere to. But it goes way beyond that. Your brand positioning statement ties your entire brand’s What and Why together. It helps steer your brand’s mission statement a step further. 

A popular example of a well written brand positioning statement is this one by Nike – 

“For serious athletes, Nike gives confidence that provides the perfect shoe for every sport”

Additionally a clearly defined brand positioning statement serves as a good anchor for your marketing strategy. 

Product/Service Benefits

Not features, benefits. We often confuse the two and there’s a distinct difference between them. 

Features explain the WHAT of the product and Benefits explain the WHY of the product. 

Features give us descriptive details about the product whereas benefits tell us how the features can be useful to us. 

And don’t consumers just really want to know the latter? Thus, it’s important to clearly define the benefits derived from usage of your product/service. 

Five Words

List out five words that represent your brand. These five adjectives help understand your brand better and evaluate business objectives and goals. 

Three messages

List out three messages your brand needs to communicate. These messages will act as the website’s backbone to hold all the pieces together. 

The WHY

In the Golden Circle theory, Simon Sinek explains that the WHY of whatever you do outweighs the What and the How. 

Your consumer wants to feel connected to your product and your story. They buy from you based on the value you offer and why you offer it to them. 

Define your WHY clearly and have it tie in with everything. 

Step 5 – Brand Guidelines

Guidelines that clearly state how your brand is represented to the audience. This includes the logo, the colors used and the general messaging across all platforms. 

Some of the details in your Brand Guidelines – 

• Color palette 
• Typography
• Tagline
• Logo
• Grammar
• Brand Tone
• Brand Language

Why do you need brand guidelines? 

• They offer consistency to the audience’s perspective of your brand. 
• This in turn increases your credibility. 
• Less scope for internal confusion when it comes to decision making. 
• Zero confusion when it comes to the creation of messaging for the brand. 
• Create a unique identity for your brand. 

Step 6 – Abstract Values

Personify your brand, assign it qualities and mannerisms. This helps you and your team understand your brand better. 

Some of the questions you should answer – 

• If your brand were an ice cream, what flavor would it be? 
• What would your brand’s description be? 
• Where would your brand hang out? 
• How would you describe your brand’s style? 
• How old is your brand? 
• What’s your brand’s gender? 

We understand these questions might seem odd to you. But just give it a go and see how it helps you down the road. 

Step 7 – SWOT Analysis

Strengths, Weaknesses, Opportunities and Threats. 

A SWOT analysis gives you a clear picture of your brand’s position vis-a-vis the above aspects. 

One sure shot way of performing a SWOT analysis for your brand is to take the question approach. 

For each segment mentioned above, develop questions that will lead you to the answers automatically. For instance, for the strengths section, ask the following questions – 

• What aspect of your brand works for your audience? 
• In which areas do you outshine your competitors? 
• What does the audience love about your brand? 
• What is your USP? 
• Your brand’s best attributes? 

The answers to these will find their place in the strengths column of your SWOT analysis. Similarly, develop questions for the other three sections as well and complete your analysis. 

Step 8 – Sitemap

A sitemap is essentially a list of all the pages on your website and how they’re related to each other. You can have one sitemap or more, depending on whether you’re dividing it by images, blogs, etc. 

Why do you need a sitemap? 

• It helps streamline your conversion process. 
• Works as an effective planning tool. 
• Helps with team coordination. 
• Helps avoid unnecessary pages. 
• Helps provide clarity. 
• Helps with clear next steps for the consumer. 
• Helps identify your site’s purpose. 

Step 9 – Wireframe 

A wireframe is simply a mockup of the website pages/app. The initial layout that defines the structure of the pages, placing and user flow. Wireframing is practiced by UX Designers and they keep the iterations to a minimum, ignoring color, graphics and other layers until after approval of the basic layout. 

This process takes place in the very beginning of the website development process. It’s important to know how your website will look and an inexpensive mock up seems like the most efficient way to go. It can be done by hand or digitally, depending on the requirement and the complexity of the layout. 

Step 10 – Write Web copy

Let’s start by eliminating the notion that ‘Content’ and ‘Copy’ are the same.

We looked for memes on the subject and this was all we could find. It’s slim pickin’s out there, y’all. 

Content is written to engage with the audience. 

Copy is written with an intention to sell to the audience. 

There’s a significant difference between the two styles and this difference can cost you your audience. It’s customary to write keeping SEO and basic guidelines in mind. But that’s something that everybody will abide by. 

What makes you stand out from the crowd in that case? 

Effective and compelling website copy. Well written copy is memorable and works for great brand recall purposes too. It persuades your consumer to – 

• Spend more time on your website 
• Share it with a friend just because it’s that good 
• Note it down/Take a screenshot and share it on social media 
• Become a customer to the brand 
• Advocate the brand 

All of the above are direct and indirect conversions. Key indicators of well written copy. 

We’ve put together 5 steps to serve as a Guide to writing good website copy – 

1. Click Next – The idea is to nudge the customer to take the next step, go to the next page, in short, keep them engaged and on your website for a longer period. To do this, you must be sure of what each page is supposed to convey to the customer. 

2. Deep Dive – Once you’ve understood what each page should convey, go deeper into the descriptive aspect of it. Understand what and how much your customer would want to know and use that data to craft your copy. 

3. Information – Give them the features, the benefits, general information they need to know about the product/service. 

4. Copy meets Design – As meet-cute as it sounds, this part usually turns into more of a battle. It’s important to decide the placing and the design of the copy on the website. A meeting between the copywriter and the website designer is required at this stage, not earlier or later. 

5. Not the First Step – Be sure to go through the first four steps and then get to the actual writing. Yes, this 5th step is writing the website copy based on the information collected. Without them, you’re driving blind. 

Step 11 – Time for Photography and Videography

Humans are visual beings. Our eyes are attracted to visuals before words on a page. 

When we look at a website, we first notice the visuals and then go about reading the text. It’s natural and it’s the reason why good imagery is crucial for your website. 

Slot out time for getting the photos and videos that will go up on your website in order. Preferably, put some up and keep a stock of any future requirements you know will come up.

Step 12 – Legal Text

You open up a website and they ask you to agree to their usage of cookies. Sound familiar? You’ll also notice a hyperlinked “Privacy Policy” text in that dialog box. 

Privacy Policy is a legal document for the website. It lists out all details regarding the establishment. Some other topics lined out in the Privacy Policy – 

• About the company 
• Information taken from the user 
• Usage of Information 
• Contact Details 

Step 13 – Website Design 

When we speak about website design, we discuss UI/UX best practices. 

UI – User Interface 

UX – User Experience 

These two are your primary website design requirements. The difference between effective UI/UX and anything lesser is the difference between winning a customer and losing them. 

6 out of 10 shoppers say the usability of a website is important when they’re online shopping, according to Statista.

• The usability of your website 
• The typography of your text 
• Maintain consistent design throughout 
• Keep in mind sizing of text and design elements 
• Contrast is your friend 
• Maintain an overall balance 
• Highlight buttons appropriately 
• Let your forms be direct and simple 

Be mindful of pop up dialog box usage 

Step 14 – Website Development

You must be thinking, ‘’One of the parts I definitely want to outsource, what with the code and all.’’ 

While that is an option, you must know that there is an option to build your own website. Yes, it’ll take much more time but it’s possible. 

Platforms like WordPress and Wix allow you to develop your website. These platforms have been developed by website developers with pre written code that makes it easier for us. 

Some website best practices are: 

• Always start the process with planning out your goal and how you intend to achieve it. 
• There are some web development norms that you have to stick to. Industry standards, if you will. Creativity is good but these norms have to be complied with (Eg: The logo goes in the top left section). 
• Take baby steps. Rewriting code every single time is quite the pain (we checked with our Web Developers) and the idea is to make small changes gradually instead of an overnight case of changing your brand’s name and shipping it off to China. 
• Make sure to link all your social media channels for easy access to your customer.

Core Web Vitals are standards set by Google in order to evaluate website user experience. They mentioned it might even weigh in as a ranking factor. 

Step 15 – Hosting Account

1. Ensure you’ve bought hosting or created a hosting space for your website

2. Create a new database(s), and database users as necessary if you are using a CMS, or a website which requires a database

3. Upload the website source files

4. Install/configure the CMS to use the database you have created
5. If your website has been created already and you need to migrate it, export the database from the testing/staging server and import it to the production server

6. Change the nameservers of the domain you will be using to the nameservers of the hosting server you will be using

Step 16 – Website Content

Collate all the data points and content you’ve arranged for, from various sources. This is your website content, possibly the most important among all other pieces of content that will be available to the audience. Perform quality checks and make sure to ask for changes where necessary. 

Populate the website with the content as discussed with the designer in Step 10. And if you feel like sneaking in on some changes, we advise against it. They’ll find out. 

One of the most off-putting things when browsing a website is not finding a hyperlink where it should be. Be sure to populate all your icons with links to the relevant destinations. And make sure to have your Contact Us page up to date with all contact information. 

Step 17 – Code Quality

• Validate HTML using W3C HTML Validator, or your preferred Browser extension such as Validity Chrome Extension, or Html Validator plugin for FireFox

• Validate CSS using this CSS Validator, Validity for Chrome, or Html Validator

• Lint your CSS to make it better

• Use JSLint and JSHint to make your JavaScript better

• Check whether your website is internationalization ready here

• Run Pagespeed Insights to optimize your website for fast loading speeds and better performance on search engines. 

• Ask for changes from developers based on the results of the above tests

Step 18 – Double Check Web Copy

This is a reassuring Step 2 of Step 10. Remember how important website copy is? It warrants a double check and a separate step in this checklist for precisely that. 

• Proofread all pieces of web copy. Run them through softwares like Reverso for any spell check/grammatical errors. 

• A rule of thumb is to remove all jargons, metaphors or any generic content. 

• See that all images, videos and audio files are in the correct places, smushed, formatted, width and height specified and working on all devices.

• Verify all linked content, such as case studies, ebooks, and whitepapers.

• Test all internal links across web pages and make sure they’re intact. 

Step 19 – Optimize UI/UX

Print this out and check it off, if you have to – 

• Correct your metadata as necessary to ensure social media sharing is working as intended. 
• Check if Auto-responders are working alright and sending the right messages. 
• Any forms you have on the website should be checked along with the data collection. 
• What does the user see after filling a form? Check the end page and make sure it’s as decided. 
• Use the Facebook linter to ensure your Facebook sharing will work well
• Implement Twitter Cards and confirm it works well on the Preview tool
• The brand logo should be linked on all pages. 
• Check the 404 errors and redirects to ensure all your web pages are functioning. 
• Check on multiple browsers using browsershots or browserling
• Check all website integrations with third party softwares to ensure they are functioning properly. 

Step 20 – Website Responsiveness

Half of the revenue generated on a typical eCommerce store takes place on mobile.

Website Responsiveness is the ability of your website design to align all elements of each page depending on the screen/device it’s viewed on. Based on the above stats, it’s crucial to check for website responsiveness and ensure it’s mobile friendly. 

Check that Google sees your page as Mobile-Friendly. You should have fixed most of the Google Mobile Insights problems here. Make sure you are using the viewport meta tag: <meta name=”viewport” content=”initial-scale=1″>

For testing purposes, use emulators such as iPads, screenfly, and mobilephonesimulator. 

Step 21 – Analytics Setup

• Register and verify your website with Google WebMasters aka Google Search Console. 
• Create a new property and implement the Google Analytics code.
• Quick Tip – Link Google WebMasters and Google Analytics to be able to get better insights from within Google Analytics. 
• Exclude relevant IP addresses (such as office IP) from analytics tracking to ensure your own company’s and the client’s company do not inflate their website hits.
• Set up any funnels, goals, or tracking events which have been properly created in your analytics software.
• Implement visitor tracking software such as HotJar, CrazyEgg, or Optimizely.
• Implement any site uptime monitor such as Pingdom.
• Implement a website backup service as necessary and make sure the site is fully secure, so that it is well protected from hackers and you are not a victim of WordPress site hacking. 

Step 22 – Website SEO

• Ensure that all pages have unique page titles (recommended length – less than 70 characters.)
• Use unique meta descriptions for all pages. (recommended length – less than 156 characters.)
• Avoid keyword stuffing at any cost. 
• Make sure all Alt tags are added to the respective images. 
• A dynamic XML sitemap (which gets updated with every post you make) has to be created and the XML sitemap should be submitted to search engines via Google WebMasters.
• Ensure that Google is able to read it correctly.
• Submit to Bing and Yandex WebMasters. 
• See that all page URLs consistently reflect site information architecture.
• In case of an existing old website, have 301 redirects in place for all old URLs (redirecting old pages to new ones).
• Where necessary ensure that rel=”nofollow” tags are in place on applicable links and pages.
• Use schema creator to insert Microdata into your pages (or tag your content in google WebMasters Data Highlighter)
• Check the semantics of your site using this.

Step 23 – Speed and Performance

• Try to get a PageSpeed score of 90+ – this PageSpeed Insights guide from Kinsta should help. 
• Minify your javascript and CSS. 
• Add Expires Header – Leverage browser caching to ensure that files which don’t change often are fetched from the browser cache rather than downloaded again
• Ensure a Yslow score of 85+
• Optimize the size of images using Y! Smush.It and replace the existing images with the optimized images
• Specify image dimensions for each image.
• Enable zip compression on your hosting server.
• Ensure there are no bad requests, such as missing images or files.
• Combine images using CSS Sprites (use SpriteMe.org to help you generate the sprite image)
• Reduce the number of HTTP requests by combining the CSS and JS files into as few files as possible.

Step 24 – Launch

And et voila! We’re at the end of the checklist for website design. Be sure to follow through with the steps and in the order mentioned as well. Get your website design in order and watch your analytics speak for all the work you’ve put in. 

Until next time, take care and stay safe!