Our website design and development process

Posted by Steven Taylor

Steven Taylor

Steven Taylor

Share This

The team here at Ayup have over 30 combined years of experience of delivering creative and effective websites for a wide array of organisations, including charities, public sector organisations, start-ups and well known brands. 

We’ve used that experience to hone our own well-defined process which has been proven to deliver user-centred, engaging and effective websites.  We’ve christened it the discover:delight™ process and this is what it entails...

1. Discovery 

At the start of every project we need to do a serious amount of digging and we call this the Discovery phase. It usually takes the form of a project kick-off meeting with the client’s internal team, alongside workshops with a range of stakeholders to really get under the skin of the brief. These sessions allow us to do a number of things:

Kick off meeting to discuss project objectives and priorities. 

Stakeholder workshops to probe brand and website brief assumptions, mapping out key features, user groups and customer journeys. 

  • Asses current assets and relationships
  • Partners and stakeholders analysis
  • Content review 
  • Desk research

2. Define

From the information and ideas that we gather during the discovery sessions, we’ll produce a series of outputs during the define phase that will form the foundation for the entire project: 

  • Project Definition document
  • Information Architecture 
  • Technical specification 
  • Design brief 
  • Content plan 
  • Project plan 

3. Design

Once strategies, research and documentation are in place, the project moves to our design and creative folk. UX design is executed and a series of detailed wireframes are created based on the user stores, scenarios and persona’s produced during the discovery phase. 

An overarching style for the website will be created and user-focused designs will be produced based on the wireframes, content strategies and templates that were defined. 

  • Deliverables from our creative team might include: 
  • Planning & research 
  • Over-arching style guides 
  • Landing page template design 
  • Content templates 
  • Feature-specific modules 
  • Design of style tiles and content modules 
  • Social media integration styling 

We make use of online services such as Moqups and Invision to share prototypes and design visuals with key stakeholders throughout the design process. Tools such as Wufoo and Hot Jar will be used to collate real-time feedback from stakeholders which will then inform the next round of prototypes/visuals. 

4. Build

Where possible we adopt an agile methodology approach, where we will perform regular sprints across the duration of the project. A prioritised list of requirements is identified, agreed upon, developed during each sprint and delivered for review. This iterative approach enables us to focus and deliver key functionality much quicker and also enables regular user acceptance testing at each stage of the development process. 

We utilise robust internal systems to handle sprints, backlogs, tasks, version control, deployment and testing, enabling our team to be fully focused on the project’s objectives. We are advocates of open-source technologies and employ them within our stack (LEMP) and throughout our development process. We love using Craft CMS but are firm believers of using the right technology for the job in hand, and we don’t employ a “one-size-fits-all” approach. 

Some of the main technologies that we work with include: 

  • HTML5 (including new WebAPIs) 
  • CSS3 (including SASS, Susy and Compass frameworks) 
  • Javascript MVC (including Ember, React, Underscore, Backbone and traditional jQuery) 
  • Server-side (including PHP5, NodeJS and Python) 
  • Integration of schema.org microdata standards 
  • Open graph/social network meta data 
  • Databases (RDBMS and NoSQL) 
  • Version control (git) and deployment systems (Atlassian suite) 
  • Testing (including vagrant, ghostlab, browserstack, user acceptance testing and test driven development) 

5. User testing and accessibility

We have a people-first approach to web design and believe in engaging a variety of stakeholders throughout a project to perform user acceptance testing and gather feedback.

As standard all of our sites are built with accessibility in mind and use valid, semantic markup across all pages. We have experience working with the W3C web content accessibility guidelines and can recommend solutions to enable the highest possible level of accessibility and inclusivity on websites where accessibility is really important. 

We actively work with our clients throughout the discover, define, design and development processes and will perform as much accessibility testing in-house as possible. We also welcome and act on feedback from focus groups where accessibility testing has been conducted. 

All websites should be compliant with current legislations such as privacy policies, terms of use and cookie law. We can be on hand to help advise on the contents of these documents and provide information on technologies used, in addition to discussing solutions on how best to inform and educate users of specific items. 

6. Browser and device testing / deployment 

We employ strict testing procedures which involve the senior creative and lead web developer working together closely throughout the duration of the project. This ensures that the overall aesthetics and user experience of the site are of the highest quality and are built according to the signed-off visuals. 

Before a site is deployed, it must first go through our staging server and pass a checklist of criteria ensuring that every part of the website has been fully tested and is performing as expected. Throughout the development stages, unit testing is completed for all server-side (and Javascript) code, ensuring each function behaves how it was designed to. 

In addition the website must be tested on our suite of machines and devices, specifically built for browser testing. We test websites on a range of platforms (Windows, Mac and Linux) across the most popular browsers (Internet Explorer 8+, Firefox, Chrome, Safari and Opera) to ensure a consistent browsing experience. We also perform testing on a series of devices to ensure responsive sites work correctly for a range of screen sizes and platforms (mobiles, tablets, laptops, large displays, TVs, etc). 

Any advanced features used on sites (e.g. HTML5, CSS3) must degrade gracefully so that all users can access the same amount of information regardless of their browser or device.

7. Delight! 

Our clients and their audiences :)

While that's technically the end of the design and development process our work doesn't stop here and  I'll be writing a follow-up blog post very soon to explain our ongoing support work that's all geared around our clients increasing their conversions and getting maximum return on their digital investment.