B2B Website Design Process

When we do a website it can be divided into 8 phases, which are then have its own steps. They are not necessarily sequential, but this will give you an idea.

Discovery Phase

Discovery Questionnaire

Main Objective

Understand the most important aspects of the business and its offerings.

The best time to bring to the forefront-

• USPs
• Key Differentiators
• What the competition is doing differently- both good & bad
• Why the ICP goes to you/ should go to you
• Any major trends in the current market/ landscape

How the team will utilise the information

This questionnaire will help the team build the foundational understanding of the business.

The answers will help us pinpoint any problems with the current state and any factors that will help build a differentiated positioning (can be in terms of visual design, messaging, tone of voice).

The lack of the this information / step will

Affect not only the understanding of the business but also limits in envisioning where the (re)design exercise can lead to.

Choosing the right benchmarks & parameters to study + Observing and gather relevant findings and insights during the research process.

‍

Inputs on Key Goals

What will a prospect find compelling?What will encourage them to engage?Where are they getting stuck in learning about us?What information do they need before talking to us?

Main Objective

The inputs on the key goals will determine the objectives of the project. Here it is important to narrow down 1-2 goals(the overall values & desires associated with the project).

This will help put down objectives (operational targets that are need to be completed to result in a successful project)

How the team will utilise the information

The information provided will help team evaluate the level of importance to the goals and objectives. This information also feeds into the Research Phase activities like setting parameters to study.

The lack of the this information / step will

Without the inputs the research parameters may not reflect the essential information required to be studied.

Overall, the project’s alignment between both teams may vary eventually resulting in different expectations.

‍

Brand Assets Collation

Main Objective

Collection of all relevant Brand Assets that are up-to-date and latest versions.

How the team will utilise the information

Collation of these files will ensure any gaps or additional requirements can be flagged early on and processed before the design process.

Provision of all the assets will clarify all the supporting components that need to be built during the Visual Route stage.

The lack of the this information / step will

The gap will cause delays during the Design stage in either — wait time or additional time required to create the assets to complete the requirement at hand.

On time intimation of the gaps will ensure the team can plan ahead and build necessary assets that can be presented during the Moodboard/ Stylescape stage for approvals.

• Brand Book and Guidelines - P0
• Logo Files - P0
• Technical Content - P0
• Product Documents - P0
• Videos of Product or Brand - P0
• Access to Google Analytics and Search Console - P0
• FAQs - P0
• Imagery - P1
• Login to any Platforms - P1
• Sales Pitch Deck - P2
• Team Pictures and Bio - P3
• Social Media Links - P3

Project Team Alignment

At this stage the team for the project is put together with certain parameters like scope of the project, previous experience with the subject matter.

Detailed Timeline Creation

Main Objective

Project timeline with important milestones with details of Client requirements (approvals, feedback, content requirements, presentations)

The lack of the this information/ step will

This step maps all the milestones in the project. Adhering to it becomes crucial for a successful and timely roll out of the project, in a smooth and seamless method.

Internal Checklist

An internal checklist of the requirements before the kick-off to familiarise the client team if required.

• Google Drive for Files
• Click Up Space
• Timeline
• Figma File
• Figjam File
• Estimated Project Completion Date
• Notion
• Communication Channels --> Whatsapp Group/ Slack Channel/ Google Chat

Internal Kick Off Meeting

Main Objective

Get up to speed with all the relevant information provided by the client.Objectively check all essential requirements to eliminate any gaps.

At this stage the team is encouraged to hypothesize & discuss internally on the key goals based on any prior study of the landscape.

Roles the team is comprised of

Project Owner: Responsible & Accountable for the Project

Design Lead: Designer in charge of leading the project's design

Development Lead: Developer in charge of leading the website's development

Project Team: Comprised of the Design Team + The Development Team

Project Manager: Co-ordinates and Manages the Project

Why this is essential

During this step, the team member allocation is confirmed and the team begins with the prep for the Kick Off Meeting. Clear allocation of project roles ensures clarity in the flow of the responsibilities.

The team also gets together to discuss and exchange notes and thoughts before the Kick Off meeting resulting in better and insightful questions asked.

Kick Off Meeting with Client

Main Objective

An introduction of the project team with the client team, giving a brief overview of the team's experience and their role in the project.

Why this is essential

This is beneficial for the client end in getting to know the team first hand and also direct any specific questions or requirements to them for further clarity. The client team also introduce all the members that are going to be involved in the project with their levels of involvement, i.e. SPOC, Decision Makers, Subject Matter Experts,

This also marks the official beginning of the project.

Product / Service Demo from Client

Main Objective

Understanding of the product/ offering in as much depth as possible.

How the team will utilise the information

With added depth to the understanding of the workings of the product, the team will be able to create better and clearer communication + visual design and concept.

It helps the team, furthermore, in interpreting the information, workflows, diagrams and other product related content with better understanding, resulting in simpler and consumable designs for the intended end-users.

The lack of the this information / step will

The lack of this step at a well timed juncture of the project cycle, may result in back & forth between the teams to get clarity about details that affect the design.

Research

Based on the information provided at the previous stages of the process, the team conducts a secondary research to study companies that are competitors, parallel, industry benchmarks and leaders.

Research and Benchmarking

• Define Parameters for Research
• Cross Industry Learning
• Study Competition
• Industry Learning

Main Objective

Researching the current landscape of the market to get relevant and up to date understanding.

How the team will utilise the information

With the help of a secondary research conducted to gain latest understanding of the market landscape, the team will be able to work with a deeper insights.

The parameters set are based on the information obtained in the earlier stages of the process. These parameters coincide with the objectives detailed earlier, to get a clearer understanding from the industry. This also aids with how the competitors are approaching the customers in various aspects - communication, tone of voice, level of complexity etc.

The lack of the this information/ step will

Without the research and benchmarking, the project will lack a fundamental issue in the position of the company and its offering in the market. Without this point of reference a challenge of where the company stands today vs. where its headed is posed, ultimately resulting in unclear project goals and objectives. At this stage, the team also performs a Cross-Industry Learning leveraging findings and insights from companies unrelated/diagonal to this industry.

Understanding the Brand and Product Offerings

Main Objective

Understanding the basics of the brand, company and product offerings.

How the team will utilise the information

A fundamental understanding of these aspects helps the team get context with respect to the solutions they bring to the table. This is a good point in the process to explain the conception of the offering and the challenges it was created to solve. This also gives cues regarding the buyers/decision makers and users.

The lack of the this information/ step will

Skipping this step results in back tracking at a future step due to lack of resonance and disconnect in terms of the copy or content, the visual design, flow of the pages, information architecture to name a few.

Sitemap Creation

Main Objective

A high level overview of the entirety of the project, all the pages that have to be designed and developed.

How the team will utilise the information

The team is able to better plan with clarity, a workflow that prioritises pages based on importance of publishing. Availability of content for the pages is noted.

The lack of the this information/ step will

No set priorities regarding pages, lack of clarity in number of pages, affecting the overall website flow and information architecture, haphazard publishing of pages, fragmented info provided to the users.

Overall the lack of a confirmed sitemap will affect the complete website, without dedicated information that users require to successfully convert into customers.

URL Structure

Main Objective

An adjoining step with the sitemap, the URL Structure for each page is detailed with respect to the objective of the website, and each of its pages.

How the team will utilise the information

The step correlates with the objectives of the website by enabling SEO for the pages making sure it ranks high on Google when users search keywords.

The lack of the this information/ step will

Results in a weak SEO, ranking low or not at all when related keywords are searched, losing prospective clients.

Findings & Insights Collation

Main Objective

Dedicated to assembling all relevant and important findings and insight from the research stage.

How the team will utilise the information

Accumulation of the top findings and insights that can be utilised during the design, strategy and content creation stages. These points unearth important understandings that will help shape the narrative, the visual design language, the copywriting, website flow etc.

The lack of the this information/ step will

A misalignment, or a lack thereof, without any real value addition to the process and the project's output.

Needs Assessment

Main Objective

Assessing any other requirements beyond the ones mentioned in the previous stages.

How the team will utilise the information

Any information required apart from the usual requisites, based on the scope, offerings, the brand or company are highlighted at this stage. The team will ask for specifics that will mostly be unique to the project and its respective variables. This could range from a toggle for language change, details specific to geography of the ICP,

The lack of the this information/ step will

Cause a lag, back and forth or unnecessary retracing steps to account for the missing pieces. The lack of this assessment will affect the future steps.

Research Presentation

Main Objective

The team presents the findings and insights.

How the team will utilise the information

The presentation of the findings and insights ensures both teams are aligned on the understandings obtained from the research. The client team can highlight specific points that they resonate with the most, since this has a bearing on all aspects of the project henceforth.

The lack of the this information/ step will

Create a gap in the understanding of the project team and the client team which could result in uncertainty in the application of this information.

Strategy

Main Objective

Strategise the best way of navigation for the project's communication, messaging, narrative, copywriting.

How the team will utilise the information

Based on the information provided about the company, its offerings and the findings and insights, the team will build and use frameworks that will aid in laying down the website's primary, secondary, tertiary objectives, goals, the flow and structure best suited to achieve the said objectives.

The frameworks can be as elaborate or concise based on the project's brief and scope, forming a fundamental base that will create a clear and crisp pathway to actualise the goals at hand.

Home Page Sections: What the user needs to know absolutely clearly without any doubts, how deep or high-level the information flow must be. What sections will ensure they continue to browse through pages and learn more about the offering, eventually clicking the primary CTA.

Sitemap Refinement: Taking into account all the data acquired upto this point, the team may suggest changes and edits to the sitemap that will be best for the website depending on its objectives.

Defining Site Objectives Page-wise: Each page must fulfil a specific objective adding upto the complete website's objectives and goals. These pages will also have a targeted user group to ensure the communication and messaging is aligned.

Sections for Remaining Pages

What’s the Hook?: Defining and applying the hook across the website's messaging, strategic narrative and positioning. The hook is unique to each website, its offering and the ICP. The hook makes sure the user is hooked and scrolls through pages and fulfils the action required by them.

The lack of the this information/ step will

Result in unclear and misaligned website with no unified base for the project. This will result in a website --> that is a hit or miss with the users, low traffic and high bounce-rates, ultimately meaning, no one knows what the company or product does.

Messaging

Keyword Research - SEO

Low Fidelity Wireframe - Home Page

Base Content Review for All Pages

Tone of Voice

Refine Messaging for Home Page

Copywriting

Address Objections of Potential Clients

Ideation/ Conceptualisation

Marks the beginning of the visual design phase. All the stages leading upto this stage are used and applied as bridge to create a concept that best captures the company, its offerings and the objectives.

Brainstorming

Main Objective

The team comes together to brainstorm ideas and to connect the dots with the emerging patterns.

How the team will utilise the information

At this stage, the team is focused on elaborating and expanding on any points of references, patterns, thought-starters that can lend to diverging thoughts. The idea is to put down and discuss any viable thoughts that can extend into a visual language.

The lack of the this information/ step will

Result into a generic concept/idea, with either no originality or no resonance with the company's USP, value proposition or other differentiating factors.

Redefining the Key Objectives

Main Objective

Assess and redefine the key objectives of the website with respect to the next steps taking a direct effect on the visual design and website as a whole.

How the team will utilise the information

Given the information gathered upto this stage, the objectives are redefined if necessary based on how the website will enable the achieving the goals set in the beginning. In other words, the overall goals remain the same, but the means to achieve, the objectives, may change specific to the website and its function with the help of the visual design.

The lack of the this information/ step will

Cause a mismatch in the objective and how its being carried out on the website. Without a reassessment at this stage, there may be serious gaps in the website's ability to fully produce the outputs required.

Design Approach

Main Objective

Amalgamating the strategy detailed in the earlier stage with relevant design and visual ideas.

How the team will utilise the information

This forms an overarching approach for the design of the website. The team has at this juncture, distilled all the learnings and findings into a concise note that explains how the design is being approached.

The lack of the this information/ step will

Pinpoint a glaring gap between the strategy and the design. Without this step, the design will have difficulty/miss out in translating the strategy into actionable functions on the website.

Conceptual Routes Creation

Main Objective

How the team will utilise the information

The lack of the this information/ step will

Visual Route Mood Boards

Two to three visual routes with mood boards that represent the design style, colour palette, typography style, imagery etc.

Main Objective

A glimpse of how the visual route can be applied to the website and any other relevant touch-points based on the scope.

How the team will utilise the information

This step provides the client end a brief look into the visual routes with the application of the Design Approach in some of the most important aspects of the website, like the homepage hero section, services or product showcase section, usage of images, application of the colour palette.

The lack of the this information/ step will

Create a massive drawback on the timeline front. Without the prototype, the two teams will not have a common ground of understanding where the design is headed. This step is necessary in discerning, with different perspectives, the best suited visual design language to achieve the objectives at hand.

Stylescapes instead of Visual Routes

Main Objective

A prototype of the design with wider and expansive application of the design approach in various touch-points relevant to the project's scope.

How the team will utilise the information

The team produces a prototype that will provide a deep understanding for the client team regarding the design and how it can be leveraged. Stylescapes, contrary to visual route mood boards, is a longer exercise with respect to time, and the output produced.

The lack of the this information/ step will

With projects that require a deeper level of intervention in terms of design, need stylescapes to ensure the various touch-points are taken into account. This step cements how the visual design will turn out for about 70%-80% of the entirety of the project, at this stage.

Visual Route Presentation

Main Objective

Present and collate the client team's thoughts with respect to the objectives set.

How the team will utilise the information

The project team looks for valuable insights on user and buyer behaviour, and expertise on subject matter, that need to be showcased on the website by means of the design.

The lack of the this information/ step will

Lead the project team without insights from the stakeholder perspective. This can cause gaps concerning users and their requirements to fulfil the function of the website successfully without hurdles.

Visual Design

Approval on Visual Route Direction

A go-ahead on one route selected to carry forward for the visual design

Main Objective

This step is crucial to clarify and convene upon, in a unanimous manner, on one visual route direction.

How the team will utilise the information

The project team at this stage, requires inputs on the aspects that the client team believe will strongly resonate with the users and buyers. The teams will discuss and come to a conclusion with one resounding visual route best suited to apply for the project.

The lack of the this information/ step will

A misalignment in expectations from both teams. It is important at this stage for the project team to receive sufficient inputs regarding the showcase of the offerings, and other technical aspects that make up the subject matter. Any ambiguity in the feedback for these components could result in inaccurate representation of the product or services.

Stylescape

Main Objective

How the team will utilise the information

The lack of the this information/ step will

Brand Visual Asset Extension

Main Objective

Based on the inputs provided and the chosen route, the project team proceed to 'extend' the design approach to other relevant assets for a cohesive brand and website.

How the team will utilise the information

The team will build the visual route further incorporating assets such as

• Iconography:
• Typography
• Image Bank Creation
• Graphics
• Character Building - Unique Style

The lack of the this information/ step will

Make for an inconsistent visual look and feel, ultimately impacting the user engagement levels. This may result in the website seem like a subpar, generic one.

Lottie Animations

Lottie Animations or Lottie is a file format for vector animations that provide high level output in a small file size.

Main Objective

By leveraging Lotties, the design can be enhanced ten-fold. The application varies from project to project, but Lotties are an amazing option to elevate user engagement on the website.

How the team will utilise the information

These animations can be a great medium to showcase workflows, processes and other aesthetic elements for interactivity on the page. They can be an effective way to draw attention to important information, displayed in an easy way to understand.

The lack of the this information/ step will

Make the website too static. Workflows, processes or technical diagrams can become to difficult to decipher for the users, with a possibility of skipping important information.

Website Design

Low Fidelity Wireframes for Key Pages

A skeleton of the website with WIP content placed to get a basic idea of the flow of the page.

Main Objective

The design team, based on scope at this juncture works with the content team, builds a low fidelity wireframe with the flow of the page. The wireframe is based on the content, dividing it as required, translating it into tangible sections. There are no visual design elements introduced at this point.

How the team will utilise the information

By giving a foundational understanding of the page's flow based on the objectives. At this stage the team may reassess the position of certain sections for optimum flow and information architecture.

The lack of the this information/ step will

Cause a back and forth in the homepage design process. The finalisation of the position of the sections ensures the design is created accordingly for a seamless flow.

Setting the Styleguide

Main Objective

The styleguide is quite literally the guide for the style of the website.

How the team will utilise the information

The design team sets the fundamental and foundational style for the website. The hierarchy in the heading styles, the colour palette with the hex codes, typefaces and the fonts that will be used on the pages along with the CTA button styles.

The lack of the this information/ step will

Most definitely result in a messed up design system creating a domino effect leading to a messy backend of the website. The issues can range from differing Heading sizes, mismatch in colours to differently sized buttons on every section. This step is crucial to maintain a cohesive and consistent style for the entirety of the website ensuring future pages also follow the set styleguide.

Homepage Design

Main Objective

Incorporation of the visual design based on the finalised wireframe.

How the team will utilise the information

Marks the beginning of the website design process. The homepage is an essential page with a higher level of complexity than most pages. This usually also means there is more time taken for the design and development of the page.

Copy Optimisation

Main Objective

Optimisation of the base content provided by the client team's subject matter experts.

How the team will utilise the information

The copy requires to be optimised to be understandable by the target audience of the website. Apart from this, the website copy also needs to follow good SEO practices, leveraging certain keywords relevant for the subject matter, product offering or company.

The lack of the this information/ step will

Result in a confusing, non-comprehensible and complicated content, which could have a direct impact on the website's effectiveness to reach the right audience.

Motion Graphics Planning

Main Objective

Planning specific to the motion graphics required for the website, based on the scope of the project.

How the team will utilise the information

With a basic outline of the style and type of motion graphics already created during the visual route or stylescapes stage, the team further details the components. The team may require some inputs specifically with any technical diagrams, workflows or processes.

The lack of the this information/ step will

Make for a static and monotonous website. The lack of the motion graphics increases the reliance on content for all the information to be provided to the audience.

Interactions Planning

Main Objective

Detailing all the interactions required along with the visual design.

How the team will utilise the information

The design team includes interactions that may involve motion graphics or might be purely built on Webflow. These interactions aim at providing the most effective way to showcase the content and increase user engagement. Interactions range from the entrance appearance of the sections to cards that flip to show further information.

The lack of the this information/ step will

Make the website lack some finesse. Similar to lack of motion graphics, without interactions, the pages will seem too static and rely heavily on content provide full context and information.

Scalable Components & CMS Pages

Main Objective

Planning specific to the motion graphics required for the website, based on the scope of the project.

How the team will utilise the information

With a basic outline of the style and type of motion graphics already created during the visual route or stylescapes stage, the team further details the components. The team may require some inputs specifically with any technical diagrams, workflows or processes.

The lack of the this information/ step will

Key Pages Design

Main Objective

Planning specific to the motion graphics required for the website, based on the scope of the project.

How the team will utilise the information

With a basic outline of the style and type of motion graphics already created during the visual route or stylescapes stage, the team further details the components. The team may require some inputs specifically with any technical diagrams, workflows or processes.

The lack of the this information/ step will

Approval of Homepage Design

Main Objective

Getting a complete buy-in from the client team decision makers with regard to the objective of the website.

How the team will utilise the information

All inputs, on the homepage are taken by the design team at this juncture. The team needs confirmation on the design of the homepage along with the plan for the interactions and motion graphics.

The lack of the this information/ step will

Create back and forth, if the team were to proceed to development without the approval. It could lead to revisiting design not only for the homepage but for other pages too.

Approval for Animation Concepts

Main Objective

The design team presents or shares the key frames of the animation which will provide a fundamental overview of the end result.

How the team will utilise the information

Similar to the approvals across the process stages, the team can proceed to the next steps after making the required fixes or updates.

The lack of the this information/ step will

Lead to a misalignment in the overall animation concept. A lot of time can be lost if the team proceeds into production, which can be time consuming to redo or change.

Handover for Development

Main Objective

A seamless handover of the design to the development team with detailed explanation.

How the team will utilise the information

The design team gives the complete picture to the developers on the projects. All the interactions, animations, and any other specifics. This ensures there is minimal difference from design to the developed website pages.

The lack of the this information/ step will

Without this step the development team will not get a complete understanding of the requirements. The design team's focus is to provide complete context for a seamless handover.