The process of designing and building a website in our experience requires thorough planning, and a number of structured steps, in order to deliver the best chances of success.
The key stages that are involved in the website design process include:
- Discovery
- Prototyping
- Development
- Testing
- Extended development
- Launch
- Refinement
It is important that the client understands the importance of this process in achieving a website that delivers on their specific requirements, and can support the business in meeting its objectives.
Poor planning risks the project exceeding both the estimated timeline and the budget set out at the start of the project, and in some cases can even lead to a breakdown in the working relationship between the client and the agency, which is in no one's interest, as that may delay or prevent completion of the project altogether.
Below, we will go into detail on the steps involved in the website design process, based on what we do at GWS and as well as on Industry best practice. You can also explore the impact website design can have on the success of your business in our companion article The Complete Guide for Website Design for Business.
What is the website design process?
The website design process describes the steps needed to create an operational and effective website, including an exploration and discovery stage, idea generation and planning, followed by design and development of the site, testing to ensure it works and is usable, eventual launch and then ongoing refinement of the finished site (other than very specific projects e.g. for a one-off event, it's rare that a website doesn't continue to evolve and change over the course of its lifetime).
Although the exact goal and business objectives will determine key elements of the design, ultimately the aim of website design is to create a site that is user-friendly and easy to navigate (and accessible), aesthetically pleasing and inviting for the user, and technically safe and secure.
Image created using ChatGPT.
Why a structured website design process matters
Supports business objectives
Establishing how a website might help in achieving your overarching business goals will enable you to define requirements for the site at the planning stage. Putting those requirements in black and white will help you to achieve those goals.
We recommend thinking about how aspects of the website will impact on key metrics for your business or organisation, such as enquiries and sales. That will mean the design can be tailored around these requirements, offering a thought-through and cohesive experience for the user that bears your business goals in mind.
Ensures an effective user experience
Having a process in place will involve an overhead for your organisation in terms of discussions and meetings. However, provided those are carried out in an efficient way (for example the meetings are properly controlled by someone who moves the conversation forwards if it's in danger of getting stuck or wandering off-track, and people aren't involved in the discussion unnecessarily or when they have no interest in the process), the pay-off in terms of the return on time invested can be significant. For example, a process helps ensure important elements will not get forgotten when thinking about the user experience. This is the way in which a user will interact and experience your site.
User experience can determine whether a visitor stays on your site or not, and if they do for how long and whether they get in touch with you. That includes factors such as load time, content organisation and flow, usability, design and interactive elements and animation. Following a strategic design process will help to ensure all of these elements can be factored into the design, and ticked off once they have been addressed.
Reduces revisions to save time and budget
Ensuring there is an agreed design and development process between client and web agency, not just at the start of the project but throughout it, will mean expectations are clearer, and both sides will know what they are responsible for. This can save time and budget as there are clear channels for regular communication and feedback, reducing misunderstandings and hence the need for revisions and redesigns, which can be caused by lack of communication misunderstandings, or things that were not got across successfully in the requirements gathering stage.
Optimised SEO and AEO performance
Following a step-by-step process means starting from a point with a clear view of what wants and needs have to be achieved. SEO and AEO should be considered if the website needs visibility within search engines, AI answer engines and AI overviews and waiting until the end of the process to think about this may mean there are a number of things that have to be redone.
Planning what is needed for a site to be successful in search and across AI engines helps to make sure that the site was built with this in mind, rather than attempting to retro-fit it after the fact. It will make things easier and lead to a more successful website if you can think about these elements early on, and then bake them into the project throughout every stage.
Overview of the Website Design Process
We covered the website design process in an earlier article ‘The Complete Guide to Website Design’. Below, we go into further detail to give you a more detailed idea of the process.
1. Discovery meeting
Define business goals
Before any project, business goals and aims need to be defined. That includes the client’s general business aims, short-term goals and longer term-targets - and how those intersect with their website in particular. With a full understanding of how the client plans for the business to progress in the future, the agency team can adapt its approach and build the website specifically to support these goals. The overarching goal of the website should generally be to support the business in its core business activities, rather than to impress other designers or win awards for the agency.
Identify target audience
If the website is being created for a new business, a target audience may have to be identified based on the market, industry and goals of that business.
If the business is already established, it is likely to have in-depth knowledge of its existing customer base and potentially the new customers that they are hoping to attract. Whatever stage the business is at, it is vital to know as much about the ideal audience and customer base as possible, in order to build something directly aimed at them. Thinking about their gender, age, location, work status or job, hobbies, and likely ways to use the website will help to create 'personas' you can bear in mind. What does the website need to offer them, and how can it increase its appeal?
Competitor research and analysis
At the discovery meeting, it is useful to get the client’s view on competitors, to be considered alongside the agency’s thoughts, and where appropriate some research and analysis can be fed into this. Having two differing views can highlight points the other party may have missed or not deemed relevant, and help to clarify thinking on both sides. At the end of this discussion, the client should have the last word on things they consider important and that they feel should influence the project.
Review current website
A review of the current website (where that site exists) can be done collaboratively. The client is likely to highlight their pain points and things that they would like to change, remove or improve. The web design team can take these ideas on board, while offering their own take and opinions on the current usability of the site as well as its look and feel.
Image created using ChatGPT.
2. Research and prototyping
Research and inspiration sourcing
Some further research after the meeting will normally be needed based on the goals and audiences identified, and any potential competitors. At this point it is normal to look at sources of inspiration, such as appealing design elements, colour palettes and interesting layouts, both in previous work done by an agency and work done for competitors, to help collate ideas and inspiration that will influence the final outcome the project may take. This inspiration can be shared with the client for feedback before work on the project moves forward.
Content planning
Before starting the initial design, it is worth establishing in consultation with the client exactly what content will be needed on the home page (some clients may be guided by the design; but depending on the type of business, some will have specific requirements). It will then be possible to build the design around this, rather than having to attempt to squeeze in content after the design has taken shape, which may impact on the layout, and the impression the design was intended to convey.
SEO strategy
We try to discuss with the client any potential SEO strategy they may want to incorporate as that may need building into the design. The design will often need to consider heading structure, content, internal links, images, media and page speed. Creating the design with Search Engine optimisation in mind will ensure that the site has a solid basis for future work, and that it won’t be an afterthought.
Drafting a low-fidelity home-page design
A low-fidelity home-page design can optionally be created. This can be done by hand sketching, by using computer art software, or by wire-framing on a board. This process puts all the ideas in one place and gives a feel for the layout of the new site without going to the lengths of designing in detail.
3. Development and styling
Styling
Using previously-gathered inspiration and brand requirements from the client or business, together with more detailed assets that help determine look and feel such as fonts, colours, photos and icons, the detailed styling can now be a focus. The development and refinement of the 'look and feel' can continue until both designer and client are happy with the new styling.
Medium-fidelity prototype of the homepage
Design can now move on to a higher fidelity prototype of the home-page. This would generally be done in a user interface tool such as Figma or (in the past) Adobe XD. These tools can give an accurate insight into the look and feel of the new website without designers and developers having to spend too much time on the interactive elements of the site and on real pages. Generally, designing and developing a website in stages like this can be beneficial so as to reduce re-work of proposed elements of the site when the same change has to be applied to multiple designs as the client did not get a chance to approve the design in steps.
4. Testing and feedback
Client feedback
Client feedback is essential throughout the design process in order to reduce unnecessary time and costs expended on iterative re-working of a design. Regular feedback sessions will allow the client to provide constructive input into the design, without asking them to take decisions on things that may not fall within their core area of expertise, ensuring that they are not overwhelmed by the available choices, but ensuring the look and feel are right for the brand and the needs of the website.
Clear communication
It is useful to decide upon communication methods and frequency of communication at the start of the project: this helps to manage expectations on both sides, and can lead to a smoother process overall. Too much communication on either side leads to overload and to important questions being missed. Too little can lead to misunderstandings where an agency does what it thinks it would like, rather than what potential customers of a business actually want.
Image created using ChatGPT.
5. Extended development
Core page development
Once the look and feel of the home-page has been approved, other key pages of the site can then be designed, reflecting the agreed-upon style so the website is consistent throughout. The key pages will often include the About and Contact pages, a service page and a category or product page. What is needed on these pages is likely to differ between them, and additional elements and blocks are likely to be needed over and above those of the home page, but the overarching style should be consistent and carried through all the elements and pages of the site.
User journey
It is at this stage that the user journey of a website will come into sharp focus. This is about how the site will encourage the user or customer to move through the pages - where they click, what they find, and whether they abandon the site before taking an action you want them to take.
What is the end action or conversion that the user should take, and how will they get to that point? Depending on the site and the nature of the goal, this could be either a relatively short journey immediately offering something too good for the user to turn down hence an almost instant conversion, or a longer multi-day journey of discovery about the business and brand eventually leading to the filling of an enquiry form to find out more about the services offered.
Helping the client ensure they are crystal-clear about what action they want visitors to their site to take, and constructing the website in such a way that that is the most obvious and attractive route for the user to follow, are both aspects of this process.
This can be supported by considering the user experience of site, i.e. how a potential customer may experience the site, what positive or negative feelings they may experience, and how that then impacts their actions. This can significantly impact on conversion rate. We wrote a companion article on this called 'How UX Design can improve Conversion rates'.
Back-end development
How the website will be managed after launch often dictates how the back-end of the website will need to be configured, and whether a simple client-operated updating area is needed. If the plan is always to have a web developer maintaining and updating the site, it is likely to need a different set-up from one required when a client is looking to take on that management and maintenance after launch.
If the client would like to do all updating in-house, the back-end will need to be user-friendly, easy to navigate and easy to update, whereas if this will always be developer-managed, there won’t be a need for the back-end to be straightforward. It is much more common now for websites to be largely updated by end users, but thinking about this early on helps ensure appropriate options are picked both when a content management system is selected, and in how that is configured during development.
6. Launch
Analytics and tracking set up
Before the site goes live it will be beneficial to set up user tracking for the site, such as Google Analytics, as well as using Google Tag Manager and Google Search Console. Useful information to track can include user visits, the pages they visit, time on page, conversions (whether that involves the sale of an item or a completion of a contact form) and impressions and clicks. What is tracked on the website will be dependent on the uses and goal of the site. Tracking website analytics, whether essential or not, can be a worthwhile exercise in order to increase your knowledge of how your customers use your site. A cookie management system is generally recommended when Google Analytics is used because of the GDPR implications.
Final checks
Final checks will need to be carried out by the development team and wider team members working on the project in order to spot any issues that may need to be resolved before the site goes live. Testing will also take place after the site goes live but it is best to pick up as much as possible in advance.
Going live
This is the process of publishing the website as a live site. If there is an existing site, this is likely to be scheduled for a time outside of usual business hours to minimise disruption to an existing site and current business operations. If the site is a completely new site, then this can generally take place at any time.
Image created using ChatGPT.
7. Refinement
Technical issues and errors
When any new site goes live, there are likely to be some small issues that need to be fixed. These can usually be picked up within site testing, which can be undertaken by employees, customers or even by hiring a specific company who offer this as a service. The more testing of a site after launch, the better placed to spot any potential bugs or glitches, along with general items such as broken links or grammatical errors in copy. Identifying and resolving issues immediately after the site has gone live will reduce any potential difficulties or problems customers may experience in the future which may impact on their experience and impression of the business.
Updates
General updates will be needed throughout the lifetime of a website, this will vary depending on the content management system the site is built in. In WordPress for example, any plugins that the site is using will need to be updated regularly to protect the sites security. These can usually be set to update automatically but regular manual checks are vital to ensure updates are not missed which may leave your site at risk.
Ongoing support
Management of a site after launch can either be done internally by members or a specific member of the team who have the technical skill to do so or externally, either by the development team or agency that built the site or another website maintenance agency. The development team or agency that built the site may have offered a set number of ongoing support hours as part of the initial build and development contract or outlined a maintenance contract that could be offered following completion of the project. This would be likely to include a certain number of hours per month for a set number of months, followed by a rolling contract for example after 6 or 12 months. Unless there is someone in the team that has the specific skills to keep the website updated, if budget allows, outsourcing this work can save the time and costs of the internal team in the long run.
Common Website Design Process Mistakes
Ignoring the discovery stage
Diving straight into a project without doing the necessary discovery work can lead to a number of issues such as a reduction in client confidence and an increase in project time and costs going forward. Both a lack of client confidence and an increase in expected time and costs can be reasons for a client to call an end to a project, in some cases before it has even begun. Discovery is an essential part of the web design process in order to build a solid foundation for the project to move forward on.
Lack of communication
Poor communication throughout a project and be frustrating and cause delays in the design and development process. A development team waiting on approval for a certain element may not be able to move forward until said approval is given and a client may be having to delay other business developments whilst waiting for a promised design that is taking longer than stated. Sometimes delays are inevitable if urgent, higher priority tasks come up, but keeping communication clear and managing expectations on both sides is key to a successful working relationship.
Considering SEO after launch
Considering the SEO strategy during the development stage of the website ensures that is it woven in and adds to a cohesive design. Trying to fit it in once a design is completed can disrupt the look and feel and leave something that feels disjointed.
Not taking testing seriously
Testing is as important as any other stage in the development process, if not more so. It means catching and rectifying any mistakes or issues rather than your customer finding them. A website makes up an important part of building an overall experience of your brand for a potential customer so making it as smooth, easy and friction-less as possible will only portray your brand in a better light. Links that aren’t working correctly or spelling mistakes will make the website look unprofessional and give this impression of your business to the user.
How long does the website design process take?
The web design process can range in time and is dependent on the complexity of the site. The time taken to develop a small site with only 5-7 pages will differ enormously to the time taken to develop a complex ecommerce site. Some other factors that can impact on timeline include the size of the site, whether any bespoke features are needed and the CMS system the site is being built in. Both client and agency should agree an expected timeline at the start of the project so everyone involved can work together to meet the deadline. There should generally be a contingency period for any unexpected issues that arise that delay the project and it can also be useful to set mini deadlines throughout the process in order to keep it on track.
Conclusion
We can see that the design process can be a long and in-depth one but overall each step has its place in supporting a successful end result. A structured design process can lead to enhanced user experience, improved SEO performance and ultimately a higher conversion rate for a website. When these are the stakes at play, enlisting a design and development agency that are granular in their approach becomes not a choice but a strategic business decision
FAQs
What are the stages of website design?
The stages of the website design process include, discovery meeting, research and prototyping, development and styling, testing and feedback, extended development, launch and refinement.
How long does the website design process take?
The process length will vary site to site. Consult your developer for an estimate of the length of your project.
What happens within the discovery part of the process?
The discovery part of the process includes a meeting with the client to go over business goals, target audience, competitor research and a review of an existing site.
What is the difference between web design and development?
Web design is the term used for creating the visual style, look and feel of the site, web development transforms the design to a working, useable site.
Should there be regular communication between the client and the design agency throughout the process?
Yes, regular communication throughout the design process will mean feedback can be given and acted upon efficiently helping the project stay on track.
If you would like more information on our services, or would like to book a website design consultation, please get in touch with our team. You can call the office on 0117 972 4835 or complete our online contact form, someone will get back to you within 24 hours.
Please note our banner image for this article was created using ChatGPT.
