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 a successful outcome.
The key stages that are involved in the website design process include:
- Discovery
- Prototyping
- Development
- Testing
- Extended development
- Launch
- Refinement
It is important that both sides understand the importance of this process in achieving a website that delivers the client's specific requirements, and that can support the business in meeting its objectives - otherwise the process can be seen as an inconvenience, rather than a worthwhile time investment.
As an example of its importance, poor planning risks the project exceeding the estimated timeline and the budget set out at the start, and in some cases that can lead to a breakdown in the working relationship between the client and the agency as those costs climb. We have heard of cases with some agencies where a designer working on a project refuses to even speak to the client, and intermediaries have to be used. Clearly that sort of breakdown is in no one's interest and may delay completion, 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 that 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 a completely 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. a website for a one-off event, it's rare that a website doesn't continue to evolve and change over its lifetime.
Although the exact goal and business objectives will determine key elements of the design, ultimately the aim of website design is normally to create a site that is user-friendly and easy to navigate (and also accessible to people with physical or mental disabilities). It should be aesthetically pleasing and inviting for the user, as well as compliant with best practice - and secure against attacks.
Image created using ChatGPT.
Why a structured website design process matters
Supports business objectives
Establishing how a website will help to achieve your overarching business goals will enable you to define requirements for the site at the planning stage. Putting those requirements in black and white ensures those are kept front of mind, and so will help you to achieve those goals.
We recommend thinking about how aspects of the website can 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, while still keeping business goals in mind.
Ensures an effective user experience
Having a process in place will involve some overhead for your organisation in terms of the discussions and meetings that will be involved. 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 to ensure important elements are not forgotten when thinking about the user experience (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 - as well as whether they then get in touch. It includes factors such as page load time, content organisation and flow, usability, design appeal, and interactive elements / animation. Following a strategic design process will help to ensure all of these elements can not only be factored into the site design rather than considered at the end of the process, but also ticked off once they have been addressed.
Reduces revisions to save time and budget
Ensure there is an agreed design and development process between you as a client and your web agency, not just at the start of the project but throughout. That should mean expectations are clearer, and both sides will know what they are responsible for and when.
This can save time and budget, as clear channels for regular communication and feedback help to reduce misunderstandings, and hence the need for revisions or re-designs. Those are often caused by lack of communication, misunderstandings over the site goals, or important things that were not identified or recorded 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 fulfilled. SEO and AEO should be considered if the website needs visibility within search engines. Thinking about AI answer engines and AI overviews in relation to your website can help your visibility, provided those are factored in early on.
Planning what is needed for a site to be successful in search and AI engines helps to make sure that the site is built with that 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 the elements that are important to you early on, and then ensure those features are built into the project from the beginning.
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 a normal process we would use with clients.
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 the business to progress in the future, the agency can adapt its approach and build the website specifically to support these goals. The overarching goal of a website should generally be to support the business in its core business activities. There may be secondary goals which can also be defined.
Identify target audience
If the website is being created for a new business, a target audience may have to be identified based on market research, checking what others in the same industry are doing, and the goals of the business.
If the business is already established, it is likely to have greater knowledge of its existing customer base and 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 they will want to use the website will help to create 'personas' of customers that you can bear in mind when creating content. The question to ask is what does the website need to offer them, and how can it increase its appeal to those people?
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 experience, and where appropriate some research and analysis can be fed into this. Differing views can help here by highlighting points the other party may have missed or not deemed relevant, and discussion can help to clarify thinking on both sides. At the end of this discussion, the client should have the last word on what things they consider important for the project.
Review current website
A review of the current website (where applicable) can be done collaboratively. The client is likely to highlight their pain points, editing frustrations, and things that they would like to change, remove or improve. The web agency can take these ideas on board, while offering their own take and input on the current usability of the site, as well as its look and feel, and whether that is competitive in the marketplace.
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 from examining competitor websites. At this point it is normal to look for sources of inspiration, such as appealing design elements, colour palettes and interesting layouts, both in previous work done by the agency and in competitor websites, to help collate ideas and inspiration that will influence the final outcome the project may take. This inspiration may be shared with the client for feedback before work on the project moves forward.
Content planning
Before starting the initial design, it is important to establish in consultation with the client exactly what content will be needed on the home page and how that content will be structured. Some clients are happy to be guided by an agency in terms of what they choose to include on the design; but some businesses will have specific requirements and want to specify this in detail.
It will then be possible to build the design around this, rather than attempting 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
At GWS we try to discuss with the client what SEO strategy they may want to incorporate, as that will need building into the new website. The design will often need to consider heading structure, content, internal links, images, media and page speed. Creating a design with Search Engine optimisation in mind helps ensure that the site has a solid basis for future work, and that any previous SEO work gets incorporated in the new site.
Drafting a low-fidelity home-page design
A low-fidelity home-page design can be created. This was traditionally done by hand sketching, but now tends to be done using design software to generate a 'wire-frame' layout. This process puts the content headings and layout together in one place and gives the client a feel for the layout of the new site, without going to the lengths of designing a page in detail.
In practice it can be harder for the client to make a final decision on the basis of wireframes, and many agencies find that real designs based on signed-off wireframes don't necessarily get approved, so at GWS we tend to move straight to a realistic design mock-up.
3. Development and styling
Styling
Using previously-gathered inspiration and brand requirements from the client's business, together with more detailed assets that help determine look and feel such as fonts, colours, photos and icons, detailed styling can now be done. The development and refinement of the 'look and feel' in the design can continue until both designer and client are happy.
Design prototype of the homepage
The site design normally starts on a prototype of the home-page. This is created with a user interface design tool such as Figma or Adobe XD. These tools can demonstrate to a client how a website will look and feel, without designers or developers having to spend a lot of time on the interactive elements of the site, or on creating real pages. With GWS, once that is approved, then design will move on to an inner page, or a small group of representative key inner pages.
All designs should reflect the agreed-upon style and branding so the website will be 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, and additional elements and blocks are likely to be needed in addition to those on the home page, but the overarching style must be consistent, and carried through all the elements and pages of the site.
Generally, designing a website in stages like this is beneficial as it reduces re-work of proposed designs for the site, which might otherwise happen in bulk when the same change has to be applied to multiple designs. We have found that giving the client the opportunity to approve the design in stages helps to keep the project on time and on budget. Some agencies however prefer to create a set of designs including the home-page and inner pages, and send those over together as a group - this approach is equally valid.
4. Testing and feedback
Client feedback
Client feedback is essential throughout the design process as it helps reduce unnecessary time and costs involved with 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, while ensuring the look and feel are right for their brand and the needs of their 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 we find that leads to a smoother process overall. Too much communication on either side can lead to overload, and to important questions or input being missed. Too little can lead to misunderstandings where an agency may do what it thinks will look good, rather than what a business and its potential customers actually want.
Image created using ChatGPT.
5. Extended development
Core page development
Once the look and feel of the home-page has been approved, and designs for other key pages of the site have also been approved, it is time to start building the website.
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 rates. 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 simpler set-up from one that would be 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 use for updating, whereas if this will always be developer-managed, there won’t be a need for the back-end to be so straightforward. It is common now for websites to be largely updated by end users, but confirming 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. Checking website analytics helps 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 of personal data being stored and processed outside the UK or the EU.
Final checks
Final checks will need to be carried out by the development team and other 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 any problems in advance if possible.
Going live
This is the process of publishing the website as a live site. If there is an existing site, this may 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.
