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
.webp)
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.
