Our website design process explained

Making sure that we follow a robust website design process is crucial to the successful completion of every project, as well helping us ensure clients are happy! Web design should always be a close collaboration between client teams and the web design and development team, with the needs the end-user at the forefront.

For us, planning and meticulous implementation go hand-in-hand. Over the years, we’ve honed and adapted the way we work, so here we outline our web design process from the initial meeting through to launch, as well as explain some techy terms:

1/ Discovery Phase

For larger projects, we conduct a discovery phase and this includes a variety of analysis methods to look at how the website can best serve the needs of the business and its customers:

  • Needs assessment – here we take a strategic approach to assess the needs of the organisation, including looking at long-term objectives and internal and external influencers.
  • Research – this includes both desk research (such as competitor and industry research), stakeholder and user interviews. We also look at existing analytics and conduct user tracking via tools such as Crazy Egg and Full Story to give vital information about user behaviour within the existing website.
  • Site goals review – here we investigate what customer and business needs the website must address, and what functionality is required to achieve this.
  • Analytics review – using Google Analytics, we’ll study the current site performance; looking at the user flow, pages that users ‘drop off’, average view time and bounce rate. We typically look over the last year’s data to get a realistic picture over time.
  • Conversion review –  conversions can be call-back requests, contact form completion, offers redeemed, online sales, phone calls recorded from site or download content requests. We’ll assess what elements are converting well, and not so well.
  • User persona creation – crucial to the process, this involves developing typical user profiles and informs the design process. By learning about each type of user’s needs, and creating a user flow chart, we can enhance the experience of each user.
  • Sitemap creation – here we identify pages (similar to a contents table), as well as the hierarchy of the pages. We decide the pages to keep and remove and may restructure the top-level navigation to improve the user experience.
  • Sketched low fidelity wireframes – we create this site outline with the client face-to-face as a starting point for the visual design and structure of the website. It helps to illustrate how the content and functionality will be laid out on a page, as well as considering user needs and journey.
  • Flow/process diagrams – we map out the users flow through the site from first hit to the end goal.
  • Identify functionality requirements – this is a technical specification document that outlines how we will build the website.

Sketched low fidelity wireframes

 

2/ Content and SEO

In this phase we look at the different elements of content required within the site and how to make sure the site is ranked highly by key search engines:

  • Content review – whether it’s a new business start-up or a long-established business, reviewing the content involves assessing the information needed to tell your story, key marketing messages, the brand style and tone of voice, and the balance of text against photography, graphics, video or downloads.
  • Content plan creation – we either work with clients to develop new copy or our writer conducts interviews with key stakeholders and drafts the copy from there. This is a real collaboration between the client, writer and the developer to make sure the content works smoothly within the design and sets a tone that supports the brand and communication objectives.
  • Search Engine Optimisation (SEO) audit – here we take a snapshot of where the site currently ranks in the main search engines, such as Google or Bing. This informs development and also acts as a ‘stake-in-the-ground’ for analysis of the new website’s SEO performance. For this we use tools SEMRush, Moz, Web Page Test and Google Webmasters. This also helps to guide future content development.
  • SEO strategy creation – we create an SEO plan with you for the launch and ongoing support on monthly basis. This could include site audits, technical error fixes (broken links), blog content creation, link building activity or local search optimisation.

Analytics

 

3/ Creative and User Interface (UI)

We next consider the visual ‘look and feel’ of the website and how it will appeal to each type of target audience on their journey through the website:

  • High fidelity wireframes – here the site starts to come to life as we develop more realistic content, fonts, image dimensions or button styles, which helps to visualise how the site might work before adding colour or imagery.
  • UX and UI designs – we apply the brand guidelines to the user interface (UI) and begin building content for the site (animations, photography, copy etc.) Using our flow diagrams from the discovery phase, we optimise the user experience (UX) to make sure it’s engaging and efficient.
  • Invision clickable prototype – this allows us to transform static designs into clickable prototypes. The Invision tool we use makes it really easy to collaborate with clients and content creators, as all parties can add comments to support the development.
  • Interactive and animated mockups – these show how content will appear. We also study and plan how buttons animate (cursor hover state).

High fidelity wireframes

 

4/ Development

This is where our developers are in their element; building, writing fresh code and testing to make sure the website is slick and super-speedy:

  • Version control with Git Hub – a digital repository, where we can access our projects and all the versions of each website code. This is great as it means we can track changes, revert back if something goes wrong and collaborate on the code with multiple developers.
  • Hosting setup on our Google Cloud Platform – this is based in a London data centre, using Nginx technology, which makes it super-fast.
  • Install Content Management System (CMS) – for this we tend to work with either Laravel or WordPress.
  • Build of front-end mobile responsive templates – this is important because Google indexes content that’s designed to be responsive on all devices and it makes the website function well for all users on all devices.
  • Create database and custom fields – for content uploading in the CMS (e.g. WordPress or Laravel). We’ll create text and image fields for each area of content and, if the budget allows, we can also provide our online image crop tool.
  • Install/Setup plugins and 3rd party CRM (Customer Relationship Management) tools – examples of these include Podio, Salesforce, Pipedrive and Hubspot.
  • Populate site with content – we work with the client to add the agreed content throughout the site.
  • Optimise code – this improves site speed, which is great for SEO. For example, by minimising the CSS and JavaScript , we can improve website speed.
  • Cross browser and device testing – we test that the website works perfectly on all browsers, such as Chrome, Safari, Internet Explorer, Edge or Firefox, as well as across devices, including desktop, tablet and mobile (iOS and Android).
  • User acceptance testing – we invite small groups of users to our testing lab to gain feedback and create a bug list and discuss any amendments with the client.
  • Two rounds of design amends – we typically have two rounds of amends to finalise and finesse the website for soft launch.

Feedback in Invision

 

5/ Launch

As the website build nears completion, we run a series of final checks and make sure the client has the skills needed to start working with their new site:

  • Final SEO checklists – our SEO team runs a final audit.
  • Install tracking tools – such as Google Analytics and Google Webmaster. This will help us analyse website performance. We also use our own Audience Tracker, a website tracking tool specifically for business-to-business clients that enables clients to gather valuable analytics. If the visitor to your site has registered their IP address to a business, then we can pull this data into Audience Tracker.
  • Client training – we provide training and an easy CMS ‘how to’ manual so that clients can quickly and easily add new content, images and video and create landing pages to keep the website fresh.
  • Bug tracking – we offer two weeks free bug tracking to fix any issues that crop up post-launch.

 

6/ Maintenance

To make sure our clients keep their website in tip-top shape, we recommend that anyone with a CMS website invests in a support and maintenance plan. This involves three main elements:

  • CMS and plugin updates – to prevent hacking and for additional security.
  • Security checks – through our software, for example, Securi’s security hardening plug-in.
  • Backing up – we run back-ups locally on our test server to see if anything breaks. If you have a bug, you can report it here to us via our bug tracking tool.

 

7/ Evaluate and Improve

We meet with clients to review three and six months after launch. This involves:

  • Analysing site performance – using tracking tools such as Full Story and Look Back.
  • Reviewing conversions – we’ll assess conversion rates (positive actions taken by website visitors) and make sure we emulate well-performing pages within the site.
  • Improvement plan  – a website should always be work-in-progress – continually evolving to meet changing demands – so we’ll create the Phase 2 improvement plan. With our maintenance plans, we have more scheduled reviews with a client.

 

 

Planning carefully and implementing using a tried-and-tested process is so important to the success of our website projects. If we’re half-way through a website build and a problem occurs, or the requirements change, it’s costly and time-consuming to reverse things, so we avoid this at all costs! We work in collaboration with our clients throughout the development process and beyond. If you have any questions and would like to find out more about our process, please get in touch…

For more information about our website design process or for information about our maintenance plan, please contact . We specalise in helping Surrey businesses improve their web design and digital presence.

Close

Website Performance Review

Honest, accurate, analytical feedback

Get Started