5D Web Design Process: Increase User Engagement and Profit

Looking to redesign or rebuild your website? Here's the web design process.

Why Use Web Design Process?

What happens if you build a website without process?

Web design process Good Process vs Outcome

A website is not just about the aesthetics or the looks, the hero image, fancy background or good looking call-to-action button. It is more than that. it needs to be aligned to your marketing strategies and making it usable for real people.

One of the biggest setbacks in web design is not having a strategy or building a website without following the process.

Note: This is not a basic web design process, it’s as deep as it gets. But I’ll try my best to keep it simple.

Why Did I Develop the Web Design Process?

I want businesses to get good returns from their website investment (even if you don't build your website with me). As Alan Stein Jr (writer) said,

"Control the Controllable".

Why leave to chance when we can control every aspect of the outcome?

In this article, we're gonna look at how I design a website using 5 simple web design processes that I have used for the past 10 years in my web designing business.

The 5D web design process is the same as the web development process. There are also no web development process best practices

My process of building a website for a client is the same for government agencies, big corporations, small-medium businesses, and influencers.

The starting point of website design.

Any website development can be broken down into three phases which are ‘the before’, ‘the during’, and ‘the after’. Here’s how the website design process flow looks like:

Web Design Process - Before During After

Most web designers jump straight to ‘the during’ or web developers like to jump to building it without understanding the true scope of web development.

Why Follow the Web Design Process?

Without a process, there is bound to be chaos. You don’t have a fixed direction where to go. Sometimes there are overlapping jobs and tasks.

Most of the time, web developers have to re-do the coding when there’s a new ‘a-ha’ moment. You waste time and resources when you can do it once.

What You Avoid When You Follow the Web Design Process?

By following the web design process, you are able to improve the time to develop the website whilst ensuring that you cover all grounds before launching it.

This way, you do not launch a half-baked website that is .. ‘meh’.

Who Can Use this Website Design Process?

This article explores the web design process for clients. But can also be used by Web Designers, Project Managers, Corporate Communications. It can be applied to corporate websites, landing pages, eCommerce websites, digital products.
As long as there is design and coding involved, then you can use it.

Let’s begin.

Periodic Table of Web Design Process by New Design Group

How is this different from the Periodic Table of Web Design Process? It is about the same, however our 5D method covers the holistic approach, inclusive of the marketing and sales team.

5D Web Design Process Overview

The 5D is an acronym of Discovery, Design, Develop, Deploy, and Dedicate. Each signifies the stage of Web Design Process with different expertise working together. Marketing, Designer and Programmers.

5D Web Design Process: Increase User Engagement and Profit 1

(Click image to download the web design process) (No Email required.)

Step1 - Discovery Web Design Process

The discovery happens way before design. This is about understanding what you are trying to build and who it is for. Think of Discovery as part of Strategy.

Without Discovery, you will be running around like a headless chicken. Shooting everything in the sky, hoping to catch a bird.

We do not want that. We need a solid direction.

Discovery can happen through question-aires, physical sessions or through phone calls.

web design process - Discovery

The Goal of the Website

What do you want to accomplish from this new website? Is to:

Whatever the goal may be, it has to have some measurements (metrics). Example: Get 1,000 visitors daily. Reduce call center phone assistance by 25%.

This way we can design the website that has actual benefits and focus on realizing that goal.

You can also use the SMART Model. Specific, Measurable, Accountable, Realistic, and Time-based. Here’s an example:

“The new website will generate 1,000 daily visitors organically, by April.”

If the current website can only manage to attract 20 daily visitors, then it does not make sense (realistically) to multiply by 50 without any external factors (press release, billboards, etc).

The Business Challenge

What is stopping you from getting to your goal? What's the hurdle that we are trying to jump over?

Example: All my competitors are doing digital marketing. If I don't do it, they'll wipe me off the market.

The Current Website Challenge

What are the website challenges that you are currently experiencing?

There could be a multitude of challenges.

The Target Market (Audience)

I usually like to focus on 1 key focused group, but you can easily expand to multiple groups of people.

Demographic

Demographic - What do they write in Formal Forms? Age, Sex, Address, Office Address, Kids, etc.

Having the demographic will definitely help when doing targeting advertising platforms like Facebook ads.

Psychographic

What is going through the target demographic mind? What are they feeling?

By understanding the target audience psychographic, you will be able to draw them closer to your brand, business, or product.

For example, a mother of two has problems sleeping at night and wakes every morning feeling lethargic. You can address these challenges immediately in the copywriting like so:

“Are you tired of waking up in the morning? Try our mattress for 100 days. Full Refund if you do not help you sleep better.”

Pain - What the visitor is going through? What is their current condition?
Gain - What do the visitors get from solving the pain?
Plan - What can you do to help the visitors from pain to gain? (besides buying your products)

I like to put a single target market in a table like below, one page that summarizes the target market.

Awareness Level

Is the target market aware of the challenges they are facing?
If yes, how do they find information to address those challenges?
If no, what can you do to tell them that these challenges can be addressed?

By knowing exactly the awareness level, you can segment the market into different parts of the website.

For example, if they are not aware of the pain they are experiencing, you can create a video that explains their situation and post it on social media with a link to your website (blog) that explains how to address those challenges.

Search Terms

What keyword are the target market using in order to find the solution, challenges, or gain?

Example:

  1. How to sleep better at night?
  2. Medicine for sleeping
  3. Natural way to sleep
  4. Tips to sleep better
  5. Wake up easier
  6. How to wake up early
  7. How to feel fresh in the morning
  8. The keywords center around ‘sleep better’.

By knowing the search terms, you can effectively plan basic SEO for the website to rank.

You can also use Google Trend or check Google Search Console to find the keywords that you rank for.

The Brand

The brand is about who you are as a company.

People want to feel connected, not speaking to a robot. They want to feel secure and listened to.

Let’s go deeper into the brand

Brand Promise

What can people expect to get from you?
What is the experience when they engage with you?
What do you make your visitors feel?

Here a few examples of the brand promise.

Nike - Makes you feel like an athlete even when you are not.
Milo - Makes your kids feel like a champion
BMW - Makes you feel young, living on the edge and sportier
Apple - Wants you to think differently.

Brand Perception

How do you want your customers to look at you?

Are you upmarket and premium?
Are you offering cheap and low quality?

For example, Apple has a great ethos of innovation and design. When you buy a Macbook Pro, it’s going to look good, performs really well and it’s above the average price of laptops. But people see it as, ‘if you are serious about your creative jobs, you use an Apple laptop”.

Brand Value

Brand value is the core foundation of your business.
Brand value is not how much the brand cost, that is brand valuation.

Example: Honest, Clean and Organic.

These will be all the value that is preached throughout the entire chain of command.

If a staff member is being dishonest with a customer, then the possible outcome is to retrain or fire them.

The brand value does not have to be explicitly stated on the website, it could be in a form of subliminal message in your tagline, images, proposal, etc. However, every one of the staff members has to know and practice it.

Brand Voice

Brand voice is the tone and language used to address the customers or visitors.

Let’s consider a Government Official vs Hardware Shop owner. The language used to address people are different. Government officials are inclined to use professional expression and the later using casual daily conversational.

Brand voice is spread across multiple channels like website copywriting, content, articles, social media, infographic. It has to be consistent throughout the channels.

What you want to do is identify the right voice for your audience. At Laman7, we speak and address people as if we are addressing high-school friends, friendly but not too casual.

The Web Design Task Force

You need to assemble the team for the web design process. This would greatly increase the speed of decision making and entrust responsibility to the right person.

I like to breakdown based on the DARCI Matrix

DARCI Key Role Position in Company
Decision Maker Makes the decision CEO, Chairman, Marketing Manager
Accountable The person in charge of the task Marketing Manager, Product Manager, Corporate Communication Manager
Responsible The one performing the task Graphic Designer, Photographer, Web Designer
Consult External (or internal) party to consult Customer, Customer Support team, External Consultants, Sales team.
Informed Get notified of the project, no contribution to the project Finance Department

 

The Design Style

Design; the layout, the aesthetics of the website, the style or how it looks like. But we are not going to design yet, we want samples of websites we can relate to.

Next, is to find those websites that you like and explain in what way do you like the website?

Find the following:

3 x Websites that you Like and explain why you like it?
3 x Websites that you Dislike (optional step)

The Competitors

In order to build an outstanding website, you need to know who the competitors are and how to beat them.

The goal here is to be differentiated from them.

Pick Top 3 Competitors, do research on the following websites.
Keyword: ____

Competitor Name & URL Keyword Ranking Color they Use Main Message Main Traffic Source
Competitor 1
Competitor 2
Competitor 3

 

Requested Features

Features are functions on the website that will be helpful for the users and website owners.

Here are some samples of features that are recommended by Mashable.

The good news is that most Content Management Systems (CMS) already have this in place. Your only concern is to know the feasibility of the usage. I.e. Will people use it, and how much will it cost?

Plan the Test

The tests and benchmark are agreed prior to starting the project. This ensures that the designer and developer build a website that works. Planning the test also reduces the time to develop.

The test also requires you to sign off. However, additional tests may be added on a case to case basis.

Step2 - Design (The Work)

Once you have completed the Discovery phase, it’s time to get down to start doing actual work.

Without Discovery, you would not be able to build a website that is appreciated by the website owner. I can not further emphasize the importance of Discovery.

For Website Owner: You avoid frustration because the web designers understand your business context and objectives.

For Web Designers: You do not have to ‘test’ design by creating multiple full versions of the mockup.

The most difficult part about Design is translating the Discovery into Design, and that’s our job to figure out.

There are 3 parts of the Design Process

  1. Technical - What feature would be beneficial to the target audience
  2. Design (Noun) - The look and feel of the website, images, photography, videos, rendering of products, etc.
  3. Marketing - The content, the copywriting, the messaging.

Once you have all this in place, you can start with User Experience (UX).

Information Architecture: User Flow vs Site Map

Information architecture is done before any design takes place because we need to identify the pages that need to be made before we design or sketch.

Content Before Design. Design without Content is Useless.

Think of Information architecture like the following.

web design process information architect

User Flow: How do customers get in, where (page) do you want to lead them?

As opposed to the sitemap model, User Flow helps to create an engaging experience.

Sitemap model: A traditional method of displaying the hierarchy of the website.

I personally use both. Here’s an example

UX + Sitemap

User Experience for corporate websites is about the same as any website. It is not as custom as mobile apps or digital products.

Content Planning

Since we know the target audience (in Discovery) we can plan out the content for the website using these simple questions.

  1. What does the user want to know?
  2. What are they trying to solve?
  3. What frustrates them?
  4. How can your product solve the user's problems?
  5. How do we take users from their current state to future state?
  6. How can we help the customer makes a purchasing decision?
  7. Product page arrangements
  8. Standard pages, about us, location, address etc.

I personally like to use post it. We can rearrange to fit the user flow.

web design process - Content Planning

The key point is to write the Basic Headling (or Headings) before we jump into copywriting.

Copywriting

While the sketch is being done, you can start the copywriting and content planning. It does not have to be perfect. As long as you have some solid idea about the headline and direction, that is already good enough.

For Copywriting, I like to use the CPASO Model

C - Context
P - Problem
A - Action/ Plan
S - Solution
O - Outcome

Or use the brand story model.

You can never score the right copywriting the first time you write. The key is in the edit. Keep editing until you are satisfied with it.

Hand Sketch

Once you have the website sitemap, you can start scribbling the pages. I prefer hand sketches because there is no ctrl + z and you do not have to worry about being wrong.

Keynote:

  1. Do not be critical of any new ideas
  2. Allocate 1 hour per design session and do not stop.
  3. For every page, create 2-3 ideas.

This helps you to give a basic idea of what you are trying to achieve. You can skip the hand sketch if it’s not for you.

web design process - Hand Sketch

Wireframe

The next step is to redraw your sketches using the software. No images are being used. Only a flat grey area for images (with x) and text placement.

Start incorporating the headlines into the design. Avoid using “Lorem ipsum”, because the website owner would not know the context of the space created.

web design process - Wireframe

Once you have the wireframe, be sure to run through with the website owner. Get approval now and reduce change requests (design) in the future.

Photos and Illustrations

Start finding the right photos for the final design (based on the wireframe.

Use as many possible internal photos (photos that you own) rather than stock photos.

If you do not have a photobank, you can start by hiring professional photographers.

For the eCommerce website design process, the best images are rendered from 3D models. You get to control every aspect of the lighting, packaging, placement, sizing, etc. It is not cheap, but definitely worth it.

Style Scape

In style scape, we showcase the theme (inline) with Corporate Image (CI) and the website preference. It should look something like this.

web design process - Style Scape

The elements that should be in considerations are

  1. Font type
    1. Headline Text
    2. Body Text
  2. Colors
    1. Main Color
    2. Accent Color
    3. Link Color
  3. Shapes
  4. Photo style
  5. Icon Types
  6. Form Style
  7. Logo Style
    1. Full Color
    2. Dark Background
    3. Inverted Color (if any)

The goal is to ensure the web design (outcome) is similar or matches the owner’s preference and tastes.

And make sure to approve the style scape before proceeding.

Web likes, Web dislike, Style, Shapes, Text > Style Scape > Mockup

Mockup

Once you have completed the style scape, collected the photos, copywriting and content, it’s time for mockup.

As you have realized, the mockup is not something that can be produced out of nothing. There are several design processes that lead up to it.

Here is how it looks.

web design process - wireframe to mockup

At this point, you can go through multiple rounds of changes until you are satisfied with the design but it has to stay true to the style scape.

There are many pages for mockup, but I like to group them in the following format:

  1. Main - The first load of the website
  2. Product/Service Page - The products or services
  3. Landing Page - Your lead magnets, pdf downloads etc.
  4. Info Page - About Page, Mission, Vision, Board of Directors etc.
  5. Contact Page - Contact form, Map, Address goes here.
  6. Article Page - Articles, blog posts, news.

Step3 - Develop (Design to Code)

The good news is that development can happen concurrently in the web design process (specifically for features).

Development can also start without waiting for the design process to be fully completed. You can start running the server, install WordPress and plugins, add pages before the new design and content is ready.

Development Server

web design process - Development to Production server

The development server is typically viewable from any device and not usually found on Google or by outsiders.

Once the website is completed on Development Server, we migrate it to the Production Server which I will explain later in ‘Deploy’.

Coding the Features

You can refer to ‘Discovery’ about the features of the website.

In most Content Management Systems, some features are free, some paid, and some have to be custom coded.

  1. Free - Free to use. Sometimes Freemium when you need basic features
  2. Paid - Either subscription per year license or perpetual (one-time payment)
  3. Custom Code - These codes are written for specific requested features.

Generally, we want to avoid Custom Coding because of code continuity. Codes may be obsolete in 3-5 years time. When that happens, you may need to hire web developers to recode the features to match current technology.

Incorporating the Styles

The styles are coded into CSS. This way you can recall the style like call to action (CTA) buttons without having to rebuild the same styles.

Most common styles in CSS are as follows:

  1. Forms - Contact Form, Application Form, Subscription Form, Search Form.
  2. Call to Action Button - Buy Now, Subscribe, Secondary CTA
  3. Header - The top part of the page
  4. Footer - The most bottom part of page
  5. Links - Every link of the website, when hover, active or visited.

 

Building the Page

The web pages are predetermined in the Discovery process. Think of this process as data entry.

The pages are coded and uploaded based on the design in mockup, written content and copywriting.

There three ways to build the page
Using the default editor
Using Page builder
Using Custom code

Whichever way you use, as long as the web page matches the mockup then it’s good.
Browser Compatibility and Mobile Responsiveness
Perform browser test and mobile responsiveness. Here are some browser statistics in 2020 that you may want to prioritize.

Browser Statistics Usage in April 2020

Rank Browser Percentage
1 Google Chrome 48.88%
2 Safari 32.12%
3 Firefox 11.57%
4 Internet Explorer 3.73%

 

Most browser runs on WebKit or Blink as their rendering engine. The display should be about the same.

Mobile vs Desktop Statistics in April 2020.

Desktop Mobile Tablet
45.32% 52.03% 2.65%

 

From an SEO perspective, Google has prioritized mobile-first indexing. This means, if your website is not mobile-friendly, Google would not recommend your website as part of the search result.

Optimize Images

Every image loaded on the website must be optimized based on the screen size.

There are 3 ways to optimize the image

  1. Resize - Based on the screen size
  2. Compression - JPEG and PNG compression
  3. Right Format (illustration use SVG or PNG)

The goal is to balance between aesthetics vs loading speed.

For photos, use JPG. Using PNG and GIF will make it a 50-100% bigger file size. For illustration and screenshots, use PNG. When possible, use SVG format for vectors because it is 10-20% of PNG size.

Code and Database Cleanup

Before you migrate to the production server, it’s best to take time to remove the files, codes, and database tables that are not longer in use.

Remove codes that are no longer in use, especially test scripts that do not work, commented out.

Perform database cleanup by removing orphan tables.

Internal Acceptance Test (IAT)

Internal Acceptance Test is usually performed by the internal team. The team may consist of (but not limited to) web designers, web developers, and project managers.

The IAT is performed before the final test by the owner users.

The scope of IAT covers the following:

  1. Functional testing (as per requirements)
  2. Design Coherence and Consistency
  3. Browser compatibility
  4. Image and Page size

This is done for every single page.

Be sure to test the loading speed using Chrome - Web Developer Mode - Network like below.

web design process - Network Test

User Acceptance Test (UAT)

User Acceptance Test is the most rigorous test in the Web Design Process. This test is usually planned in the Discovery Stage and has to be agreed upon.

The test should cover three major areas

Functional

  • Features works are intended
  • Links work
  • Forms
  • Page Loads
Design

  • Navigation
  • Content Accuracy
  • Content Alignment
  • Font and Colors
  • Mobile Responsiveness
Security

  • Forms are using recaptcha
  • Directories can’t be accessed directly
  • Protected page can’t be accessed
  • Spam protection
  • Firewall

Step4 - Deploy (Going Live)

Once the development is completed (in the web design process), it is time to roll out the new web design.

Hosting*

Hosting will determine the loading speed of your website. Choose your hosting by anticipating the traffic.

You can check for hosting reviews at https://hosting.review/.

Criteria for Hosting

  1. Speed - Check the responsive time (Ping Test)
  2. Reliability - Downtime SLA
  3. Location of Server - Serve content closer to visitors.
  4. Social Proof - What people are saying about the hosting company
  5. Environment - Shared or Dedicated
  6. Operating System - Based on your CMS.

Migrating the Development*

There are many different ways to migrate the Website. I’m going to spare the details and share the known methods.

Migration Method

  1. FTP - Classic way
  2. WordPress Plugin - All in One WP Backup
  3. Uget - Expert level (Linux), server to server transfer
  4. Change of DNS A Record - Easiest.

HTTPS - SSL/TLS*

Install SSL/TLS certificates on the website. This can only be done on the production server.

Without SSL/TLS your website will look like this, and reduce your authority and credibility.

web design process - http-vs-https

Google also prefers websites with HTTPS over HTTP. So if you want to rank well on Google, get HTTPS.

You can purchase SSL/TLS from providers or sign your own free certificate through Let’s Encrypt.

Marketing Tag*

Marketing tags are codes that are given by marketing software. These tags are very useful to track the performance of the website. Here is some marketing software that I normally use.

Marketing Softwares

  1. Google Analytics - Monitor Traffic
  2. Google Search Console - Monitor keyword ranking
  3. Hubspot - Capture email into CRM
  4. Google Ads - For Remarketing & Tracking
  5. Facebook Pixels - For Retargeting in Facebook Ads
  6. Hotjar - Test Design and Behavior of visitors
  7. Google Tag Manager - One tool to manage all (of the above)

Email Send Out

In order to maximize the usage of the server, emails (sent from the website) are processed using 3rd Party Engine. These are commonly referred to as transactional email.

Recommendation

  1. ElasticEmail (no longer free plan)
  2. MailChimp (free plan available)
  3. Amazon SES (cheapest, but very tricky to set up)
  4. Mailgun
  5. PostMark
  6. Moosend

Firewall

You are bound to get DDOS or spam comments from bots. The only way to avoid getting SPAM is to add a firewall. Firewall will filter known bad IP addresses.

For WordPress, I normally use Ninja Firewall. There are other options like WordFence, Cerber and more. It depends on what features you want from the firewall.

You can also set up firewalls at the network level using enterprise-grade like Fortinet, Sophos, Cisco, etc. if you are running your website from your own data center.

Cache

In order for you to serve content quickly, you may need to cache the content. What it does is render the codes as HTML instead of processing PHP files with every request.

Cache can be done in 3 levels: application (your website), server level or network level (CDN - technically not cache).

For WordPress, you can use any of the following Cache solutions.

  1. Swift Performance (paid, recommended)
  2. WP Rocket (paid)
  3. Super Cache (free)
  4. W3 Total Cache (free)
  5. WP Fastest Cache (free)

Anyone of these cache solution works fine (I have personally tested and used it in my projects)

There are compatibility issues especially with Windows Server, so you have to test each plugin separately.

Optimize Load Time

Not all pages require the same JS and CSS files. Examine every page and check the usage.

For example, the main page does not have any form, therefore we should not be loading JS and CSS files related to form because that will be wasteful.

Load scripts that you only need.

For WordPress, you can use the followings:

  1. Asset Cleanup - Paid plugin
  2. Perfmatters - Paid plugin
  3. Dequeue Script using functions.php - very technical

You can check load time using Chrome - Web Developer - Network (like in #Optimize Image) or use Google Pagespeed Insight.

Website Load Test

We do this by creating false traffic to the website to ensure the server does not go down when the traffic spike.

You can use either of these tools

  1. Windows Website Load test - Paessler
  2. or Loader.io

*Be sure to scale max concurrent users based on your expectation. For small sites, 50. Large sites 1,000 above.

Final Acceptance Test (FAT)

We perform FAT for the last activity in the deploy stage before going into the warranty.

FAT is a lot simpler than UAT. You need to check the following.

  1. DNS Propagation Test
  2. Marketing Tag
  3. Loading speed and response time
  4. Basic Firewall Test
  5. Cache
  6. HTTPS Check
  7. Email Send Test (Transactional Email)

FAT is a must for high-end web design project. Without following the proper web design process, the FAT usually end up in disaster.

Step5 - Dedication

‘Dedication’ is the phase that most Website Owners neglect. There are four key activities that have to be in place.
Warranty - Provided by Web Designers

Warranty*

Warranty is usually provided by the Web Designers. This warranty usually covers minor changes, bugs and any issues pertaining to the website.

Warranty can be 30 days - 90 days and usually turns to Maintenance Contract after the warranty period is over.

Check with your web designers on the warranty.

Marketing - Get Traffic

Without marketing or traffic, your website is as good as a fax machine, waiting for transmission that rarely happens.

There are many options to get in more traffic into the website,

Online Offline
Free
  • SEO (partially)
  • Guest Blogging
  • Podcast
  • Video (Youtube)
  • Social Media
  • Email existing customers
  • Word of Mouth
  • Referrals
Paid
  • Billboards
  • Prints (brochure etc)
  • TV & Radio

Traffic Ads are going to get more expensive as new players join the market. What you can do is determine the cost of obtaining customers and use it to spend on advertising.

Maintenance*

Like other assets, the completed website needs to be well maintained. Without proper maintenance, your website will be hacked, break or outdated.

The scope of maintenance varies depending on the size of the website.

Maintenance can be done quarterly, monthly or weekly, depending on the criticality of the website. With every maintenance, there should be a report supporting and explaining what has been done to the website.

Metric - Measure*

The website design process steps are incomplete without measuring the true outcome of the design. With every human design, there are bound to be improvements.

Thankfully web design can be easily measured. Here are the tools that I use.

With all this information, we can map it to Google Data Studio to see an overview of the website without login into each application.

5D Web Design Process: Increase User Engagement and Profit 2

Monitor

The last step in web design process is to monitor the website, visually (front end), and internally (after login, back end) for any possible threat, error and grammatical mistakes.

What good is a website if it's inaccurate?

Note: Those with * are required.

Conclusion of the Web Design Process

A website can be built overnight, but if it does not help you (website owners) achieve your business goals (link to top), then it is a useless marketing tool.

I hope I have covered the steps to design a website, from Discovery to Dedication.

Now you have a clear idea of what it takes to build a website and the amount of effort required in the web design process. They cover so much area from Design, Marketing, and Technical perspectives.

Final thoughts, Good outcome comes from Good Process. Use the best web design process, don't gamble on your first interaction.

Ready to build your new website? Let's talk about Web Design Process (or your project)

The New Marketing Funnel for B2B

The New Funnel Explained, For B2B Marketers and CEOs

Whether you are running a small business or large organization, the funnel plays an important role in your business.

It goes by multiple names, Customer Journey, Marketing Funnel, Sales Funnel, Marketing Hour Glass, Sales Pipeline.

Different gurus give a different name. To me, as long as there is a process, from start to finish and beyond, it's called the funnel.

Why Funnel?

B2B 'sales' is a complex process. It involves multiple interactions for different types of buyer readiness to make the purchase. Therefore, this process has to be broken down into phases, so that we can address objections and craft the right message at every single stage and for every multi-buyer.

What Does Funnel solve?

The funnel solves marketing divide. It segments the process so that we can use different tools for different purposes.

Is Every Funnel the Same?

The concept is about the same any business, can be applied to almost all business. However, the tools and message may differ from one business to another.

What's the Difference between B2B and B2C Funnel?

The concept is identical however, the usage is slightly different.

For B2C, the funnel should address a single buyer with multiple products. You don't need more than 1 funnel.

For B2B, the funnel should address multi buyers with multiple products. This is because the world view and concerns of B2B varies depending on role in the company. CEO has a different perspective than a procurement manager.

Who Needs to Learn the Funnel?

If you're starting out marketing, the funnel is fundamental of marketing. Not knowing would hinder your progress. You'll spend too much time tweaking ads, SEO but never get the intended result.

For experienced Owners, Head of Marketing, I'll show you more advanced stuff on the funnel.

Who invented the Funnel?

The funnel was first coined by Elias Elmo (American advertising in 1889), the famous AIDA.

The New Marketing Funnel for B2B 3

Awareness - Let people know you exist.

Interest - If it's relevant to the audience, they express interest and becomes a 'lead'.

Desire - The lead learns about the benefits of the product.

Action - The takes action to purchase.

AIDA is now widely used in Copywriting as a mean to expedite the funnel. It's a funnel in a funnel.

This the most basic funnel you can build. Today, the funnel has evolved to meet the demands of a sophisticated buyer.

What's the New funnel?

There are 8 phases of the new funnel.

The New Marketing Funnel for B2B 4

Stages Audience Point of View What You Can Do Media and Tools
Awareness Target audience does not know about your business Invest in brand awareness strategy. Show the value that you offer upfront. Don't waste time with fluff marketing (gimmick). Share checklists, white papers, viral content, infographics, and industry reports. Google Ads, Facebook Ads, Billboards, Flyers, SEO, Social media, Downloadable pdf (website)
Engagement They make a point to find out more about your, through website, catalog, social media, etc. They try to understand what problem you solve. They become a lead. Make known the pain points, problem, and challenges that you can solve. Demonstrate your ability to solve the problem. Do webinars, share videos, case studies. Blogpost, Newsletter (website), Portfolios.
Consideration They are now considering your solution against your other competitors. They become prospects. Position yourself as experts, the one that can solve the problems by showing the key benefits, differentiator, and competencies to build trust. It's important to qualify the prospects because unhappy buyers can backfire. Provide risk reversal, testimonials, reviews, product demos and irresistible offers. Website (eCommerce), Phone call, Presentation, Pitching, Proposals, retargeting campaign.
Purchase They have decided to buy from you. Now they need to know how to pay you. Provide assurance, share them your guarantee, return policy (if they need to) and guide them through the purchasing process. Credit Card checkout (website), Invoice, Purchase guides.
Adoption They are now your customer. They might have buyer remorse. Provide onboarding tools, resources, and knowledge to reduce the remorse and ensure they've made the right decision. Deliver your product and services well. Download area (website), Thank you notes (email, cards).
Retention They are delighted with your products but always considering other solutions and competitors. Makes another purchase and becomes your client. Nurture the relationship by providing value, help them uncover more problems. Learn how to make them happier. Customer Satisfaction Survey (website or web form), Reports after delivery (pdf, graphs, analytics)
Expansion They are looking for a one-stop solution to all their problems. It's easier and less messy than having to deal with multiple vendors or brands. Cross-sell, Upsell solutions that might solve your customer's other problems. Catalog (website or printed),
Advocacy They become die-hard fans. They will like every Social media post and love to be in a relationship with you. They become an advocate. Provide the materials to share with friends and family. Word of Mouth advocacy is priceless. This loops new potential customers to the awareness stage. Promo images, Blog post

 

Key Take-Away for Funnel

Buyer Journey of Funnel

The New Marketing Funnel for B2B 5

If you examine closely, a buyer journey starts from Stranger to Lead to Prospects to Customers to Clients to Advocates. There's no single silver bullet to solve these problems, just hard and structured work.

Know-Like-Trust-Love

The New Marketing Funnel for B2B 6

To progress from Stranger to Advocates, you need to learn how to trigger Know, Like, Trust and Love in your buyer journey process. The best book I can recommend is by Dale Carnegie, How to Win Friends and Influence People.

Website as Core Marketing Funnel

Your website is the pivotal point in the funnel. It helps your buyers from Stranger to Advocate. Invest in good design, plan the information architecture, plan for content marketing. Keep track of the Conversions, Traffic (new and returning users), bounce rate, page views, time of Websites and Search Engine Ranks. You can plan for this through our Free One Page Web Design Strategy.

 

The New Marketing Funnel for B2B 7

If you already have a website, perform a website audit either internally or hire professional website auditor.

Common Mistakes in the Marketing Funnel

1. Selling to Early

According to Hubspot, only 3% of buyers are ready to make the purchase and you have to compete with others for this market share. Which is why we see price war (where companies lower price to win sales).

Purchasing is a question of when, not how to sell.

For example, my wife and I are expecting a third daughter in 4 months time. We may need newborn-size diapers, but we don't stock up now until we reach 1-2 weeks before delivery. For now, we might want to do research on the latest rash-free diapers. It's a matter of when, not now.

This applies to any business. Amateurs (new business) tends to enter the market at a lower price only to get thin margins or probably at loss.

2. Not Nurturing Leads and Prospects.

Nurturing can be done in many ways. Whether through the newsletter, follow-up calls, retargeting ads. We sort of understand the technicalities of these, but what about the content? What do we talk about?

Like you, I too struggle with content creation and follow up.

It's a shame because we need to know for certain, is this a valid opportunity or is it dead rather than letting it fade away. If I let opportunities fade away, I wouldn't know where to fix in the funnel. So do that follow up call.

As for content creation, you might want to search for Content Marketing Strategy. It will give you an idea of how to plan for your content and keep it as your arsenal. Use it at the right time and for the right problems.

For example, in my follow up, I shared with my prospects my new findings in my newsletter.

3. Stop Communicating After Purchase.

In most cases, we stop after we won the sale and delivered a good job. This is ok if we're selling lower-tier goods like milk and bread, but we're not. We are professional marketers, we don't stop there.

The New Marketing Funnel for B2B 8

Here's an example from Petronas. When I've made the purchase, they will cross-sell me a loyalty card. They now have my email and phone number. Whenever they have a promotion, they can blast directly to my email (cheapest way to connect customers).

Find ways to delight your customers. Turn them into clients and advocates.

4. No Value Ladder.

Your product and services should start with an Entry Level to Mainstream to High-End (Flagship) Level.

Entry Level - products that are no brainers. It's so cheap, you don't really have to think hard to make the purchase. Usually sold at lost or break even.

Mainstream - products, and services that are available and probably known to all. It does take a bit of thinking and decision making to purchase.

High-End Level - flagship products. These are products that are top of the line. Limited edition, highest technical specification. Requires a lot of thinking for someone who's looking to upgrade, but instant purchase for someone who demands performance, durability, and experience.

Here's a value ladder of a fast food joint.

The New Marketing Funnel for B2B 9

Ice creams are no brainers entry-level product because it only costs some pocket change. Meal combo is mainstream, which cost about the same price of having a meal outside. And birthday parties are highest-level for fast food joints which can go up to thousands.

Look at your organization, and do a quick assessment of whether you have a value ladder. What is your Entry Level, Mainstream and High-End products?

4. Not Measuring and Fixing the Funnel

Before you can fix the funnel, you need to have a set of measurement. Measure the following

a. Number of Leads, Prospect, Customer, Clients
b. Conversion of every stage
c. Average Order per Sale
d. Lifetime value
e. Cost of Marketing per Sale

In my business, the biggest bottleneck is the proposal. It seems every prospect wants one to show their boss. Out of 10 proposal, 3 shown interest, 1 win. That's very poor considering the amount of effort spent on every proposal (takes about 2-3 days for 1 proposal). In short, spent 30 days to win 1 project, that's bad.

Instead, we changed the qualification process. We do call interviews, ensure that we diagnose the problem and good fit before getting a verbal agreement. Now, our proposal winning rate is 3 wins out of 4. That's 65% improvements.

You Are Done with the New Funnel.

That's it. That's all there is to the New Funnel. Now, go build your funnel.

I can assure you it's not an easy and straightforward process. Take your time building it.

We Can Work Together.

Before we start building website, we always go deep with strategy. From here, we'll uncover the problem, root cause and set up the right metric for your business. We'll assist in building your funnel and integrate the goodness into your website. If that sounds good? Then head over to Let It Be Heard, learn our manifesto and schedule a call.

7 Biggest Reasons Why B2B Companies Need A Website

B2B companies are missing the opportunity to include website as part of their marketing campaign and branding purpose. Conventionally B2B are active in offline marketing, ie. meeting prospects, joining an event, exhibition. These activities are costly. It’s 2018, customer behaviour has changed from offline to online.

b2b business need a website - manager

Statistics shows that 80% of business decison makers (CEOs, managers and high level decision makers) would rather looking for company information through articles or websites compared to an advertisement. (source: B2B PR Sense Blog)

Although 95% of B2B business marketers do have their own corporate social media accounts, but only half of them using it in their daily routine. Social media seems to be less committed when it comes to providing detailed information about a company. Sometimes, prospects might want to read lengthy and detailed case studies just to know what problem you solved and the solution offered.

Despite many DIY web design tools, B2B companies should refrain from building websites themselves and leave it to the pros. It’s like building a house, do you do it yourself or leave it the pro? Website and digital marketing is the same. Hiring professional can help you to grow even bigger and reach more prospects.

But if you’re not convinced that B2B companies need a website, here are the 7 biggest reasons why your B2B company need a website.

  1. Your B2B Business Will Gain Credibility
  2. As Your B2B Business Online Facade
  3. Medium To Showcase Your Work
  4. Improves Your B2B Business Customer Service
  5. As Your B2B Business Digital Assets
  6. Quick Update, Saves Time & Money
  7. Your B2B Business Single Source of Truth

92% of consumers are searching online before making a decision to purchase. So, if you can pave their way for what they’re looking for just by reading your website/blog, there’s a gold to dig!

1. Your B2B Business Will Gain Credibility

b2b business need website - b2b startup

Credibility is about being qualified as a trusted one. Speaking of credibility, newly startup company and small business are lacking in this aspect. Some don’t even know how to established themselves, what more build credibility for their brand.

Today, prospects search everything online. Prospects search for solution to a problem, comparison of price and information in a faster and more efficient way. They’re expecting to get what they want in just a blink of an eye like “ Poof! I got it!”

Potential customers or clients always have unanswered questions. If you don’t have a website, prospects will start to look for your competitors.

But remember, stay professional to get in control of your credibility. Here are some ways on how to make your website to look like a professional trusted website.

  1. Have a professional B2B business logo.
  2. Make sure to use only high quality images.
  3. Useful content. Helpful contents likely to engage them more.
  4. Always be human. Prospects prefer interacting with human compared to an organization. Be sure to keep your human sense of humour in your content to make it lively and closer to your potential customers. Win their heart!

2. As Your B2B Business Online Facade

b2b business need a website - impression

In architecture, a facade is the principal front of a building, the front part of the building that facing the street or open space. Anything stays at the front is significant as part of the screening process. Human tend to screen out at something they look at the first place before they come out with a thought.

The perceptions.

Having a website is like giving your prospects a basic mental image of your business. It is essential as it provide your prospects with the overview of what is your business is all about. If you want your prospects to see you as a professional B2B business, then you’ll need to have a professional design website as well. This is to let your prospects to get to know you first before making the decisions to contact you for further appointment.

For instance, before staying at a hotel for a vacation, what will be the first thing you do? I think most of us will be surveying the accommodations of the hotel. You’ll begin to look around before decided to stay or otherwise. If it is enticing enough, then let’s book a room!

Well, same goes to website. It is easier for your prospects to roughly find out about your B2B business. Your website is your - online facade.

You can visit our post on Top 7 Website Design Trend for 2017.

TIPS: First impression Matters!Be sure to dress up your website professionally (depends on the concept of your company) and be presentable enough.

3. Medium to Showcase Your Work

b2b business need a website - work showcase

Often we heard prospects using their portfolio to showcase their artworks. For most of B2B companies especially designers and builders, you will need to show the quality of your work and demonstrate your skills. The portfolio could be either printed on papers or digitally. This is quite essential to gain trust from customers and clients and free them from doubt.

Besides, this isn’t just a matter of showing but also b2b business need a website - showcaseto sell it. In fact, you’re actually selling your ideas. As for retailer (B2C), you might consider to showcase your product lines which include e-commerce system for them to purchase online.

Thus, if you have a website you can include your portfolios as many modern websites practices now. It can be in the form of image gallery, videos and testimonials of your artworks and products. The things that you’ll going to show are the things that makes you unique in your own way.

Note: You might not want to display all your work, be selective and chose the ones that only gives good impact to the customer.

4.Improves Your B2B Business Customer Service

b2b business need a website - service

Customer service is the act of taking care of your customers by assisting them professionally throughout the service. It could be either pre-sale service or after sale service. Good customer service means being able to give the customer the best service experience and help them in making the best choice, from start to finish.

Thinking of improving your B2B business customer service? Customer service is important to make sure our customer gets the best service from us. This is significant if you want your customer or clients to keep coming back to purchase your products or services. Website do provide a valid touch point. Good customer service also gives customers first impression on your business as well as a long lasting impression.

b2b business need a website - article

Implementing customer service in a website, one of the way is that you can include a FAQ page on your website as “ The Book” that answers all their questions and query. Consistently post articles and up-to-date news feed to notify your customers in every occasion. This will keep them well informed.

For instance, in Laman 7 we're helping our customers to grow their business by developing websites. We do web design, web development and digital marketing. So, to improve our customer service we provide advice and tips to manage their website through the articles that we blog.

Hence, whenever they have questions to ask regarding your service and products, all they need to do  is to visit your website.

Let your website be the “Book” that gives - everything!

5. As your B2B Business Digital Assets

It’s a known fact that employees are a company’s greatest assets. I have no doubt on this. It’s true. Assets is anything useful and valuable owned by an individual, company or government. Your website can be one of your assets too. Having your website as business digital assets is like owning a property regarded as its high value towards the growth of your company.

b2b business need a website - digital assetWebsite is meant to be your long term marketing platform. It remains there as long as you didn’t demolish it. In the matter of fact, it can be your company legacies. We are living in an era where capital market is a trend and long term investment is a success mantra. As long as it gives you future benefits and can be converted into cash, you can consider it your assets.

While developing a website might need you to spend some bag of money, just remember investing on assets is never a squander.

The wealthy buy assets, the poor buy liabilities, and the middle class buy liabilities believing they were assets.

6.Quick Update, Saves Time & Money

b2b business need a website - promotion marketingSome B2B business are still relying on the conventional method of telling prospects on their latest updates like brochures, pamphlets, billboard, newspapers and many other printed literature. It could be the latest promotion or newly invented array of products that are coming into the house. It has been a debate to choose between conventional or web marketing. Well, everything has its pros and cons. While the conventional way let our prospects to kept the material but when it comes to cost and time, web marketing is just the thing.

Having a website will let you update your latest products or service lines in a quick way instead of printing it on brochures, pamphlets, banners and other printed literature. Printing jobs may take at least 2-3 days before you can distribute them to your customers/clients. Think about the distribution too. This is time consuming don’t you think?

b2b business need a website - quick update

With website, once your products or services are ready to be launched you’ll just have to post it up on your website and are ready to be grabbed! Besides, if you mistakenly print it with errors such as misspelling the words, wouldn’t it be cost consuming too?

As far as I concern, more and more prospects are going online. As long as there is internet connection even in remote location, your website is accessible. In such way, you can have a wider target prospects.

Website could be your time saviour!

7.Your B2B Business Single Source of Truth

Most companies use a policy that has been made to make sure all the decisions is standardized in any situations. In large companies, it involves several top teams to agree with a word. The absence of policies thereby slowing the pace of decision making and can cause things to go haywire.

b2b business need a website - standard source

So, by having a website it can be your B2B business single source of truth. Your prospects can refer to your website for any information regarding your products or service. Instead of asking your staff, they might mistakenly give the wrong information. Different people have different understanding. Human makes mistakes sometimes and your website can be the savior.

By hook or by crook, your website can be your “cookbook” for your prospect and also the rest of the staff to consult in managing repeatable process. You can consider placing the specifications of your products or detail of your service on your website. Just my two cents.

So, If you’re considering on building a website to grow your business, you can check this out at Website Design Price 2017 Malaysia.

I think that’s all from me by now. That’s just my cup of idea. You probably just have more stuff wandering inside your mind. Feel free to drop some comments if you have any enquiry regarding website design and development. We at Laman 7 would love to hear it from you.

Till then. All the best!

Get More LEADS Today!Your website can help reach your target audience while you are asleep. Start sleeping today and leave the boring bits to us​BUILD WEBSITE WITH LAMAN7

Funnel or Ecosystem Digital Marketing?

Above the Line or Below the Line, these are very old concept of Marketing. When it comes to Digital Marketing, there are 2 school of thoughts, funnel or ecosystem.

In this post, I am going to briefly share with you the difference between both Funnel or Ecosystem.

1. Funnel Digital Marketing

Funnel or Ecosystem Digital Marketing? 10

In funnel, you qualify the leads from TOFU (top of funnel). This means you need to capture audience from SEO, FB ads, Twitter etc. From here, you get them to click on CTA (call to action). Some of them might leave because it's not relevant to them, some stay to become an avid reader. Depending on your content and target market, when you hit the right button, they will reach out to you and become a leads.

The BOFU (bottom of funnel) is the bit where you have to close the deal. Deliver an excellent service so they can be an advocate of your brand.

The Good

The Bad

 

2. Ecosystem Digital Marketing

Funnel or Ecosystem Digital Marketing? 11

In an ecosystem digital marketing, it works to harmonize the every touchpoint of your prospect's experience. In some ways, we can call this a digital marketing experience. It's broken down into 3 different activities, generate traffic, capture leads and convert.

Obviously the first step is to garner traffic, without traffic, it's pointless. The second step is generating leads. You need to capture their interest, make them stay and evaluate your products & services. The last bit is to convince them that you are up for the job.

The Good

The Bad

Verdict for Digital Marketing Concepts

Which ever method you choose, it's never wrong. Just use one that you understand completely and work with what's ideal for you. Like always, plan and pivot as you go along. Digital marketing changes a lot, quickly. There is no perfect formula, experimental is the only way. With that, Good luck!

Get More LEADS Today!Your website can help reach your target audience while you are asleep. Start sleeping today and leave the boring bits to us​BUILD WEBSITE WITH LAMAN7