Whisper & Company

Our Website Design Process

Emanuele Faja

Introduction

Potential clients often ask us about our web design process, and how we run our projects, and so we thought it would be a great idea to publish an article explaining exactly how we approach a web design project.

Depending on the project, we have two available methodologies that we can use:

  1. Agile / This working method emphasis agility and iteration vs careful planning and documentation. This is great for projects where the scope is not clear, and you don’t have many details upfront. However, this often means that the project cannot be of a fixed price nature.
  2. Waterfall / This working method is the older and more established of the two, and is more process based than the agile methodology. There are clear phases of discovery, research, design, development, and testing, and each phase is completed before moving on to the next. This work really well when a project’s scope is well defined from the beginning. We follow the waterfall methodology and iterate within each stage of the project, to counter the usual issue of waterfall being labelled as too rigid and unadaptable to change.

Regardless of the methodology that we use, each web design project will normally cover the following stages:

  • Project Setup
  • Discovery & Research
  • Content
  • Design
  • Development
  • Testing
  • Go Live
  • Continued Operations

In a perfect world, each of these stages would naturally and smoothly follow on from another, but in the real world we find that there is normally a fair amount of overlap. For instance, we may have already chosen the Content Management System ahead of time, and so the development team can already start doing some work of the development phase while the rest of the project team is still on the discovery and research phase.

The same goes for testing; we might be stress testing the core of a new application to see how it performs under the stress of real world traffic, while simultaneously still working on the front end design.

Project Setup

The project setup can encompass lots of technical and non-technical issues, ranging from technology decisions all the way to deciding the exact launch date.

We’ve previously discussed how to have an awesome kickoff meeting, and it’s worth going over what the project setup consists of:

  • Contractual & Legal Stuff / We make sure that we’ve got the necessary contracts and legal framework in place before we start, but each project has different requirements and so we just build our contractual documentation from our web design contract template and then adapt it to fit the client and project.
  • Version Control & Servers / We setup the version control and make sure that the staging (what the client reviews) and development (what we internally review) servers are linked so our team can push their work easily for review.
  • Project Kickoff Meeting / We have a project kickoff meeting and introduce ourselves to the team.
  • Goals / We set clear success and failure scenarios and a strategy to achieve success.
  • Timelines / We setup a timeline of which phases will take place when, and the required due dates for things like content, key decisions, feedback times, and more.
  • Project Management Setup / We'll setup a Basecamp project for the web design project and make sure that all team members are invited and are comfortable in how to use Basecamp. We'll add all the pending todos, and any reference files and lists so everything can be found in just one place.

Our project manager that is assigned to the project will then create a project plan that is placed on Basecamp, the project management system we use to ensure that everything is transparent. Everyone can then view the details, and ask for clarification on any items.

Discovery & Research

The Discovery and Research phase is here to help Whisper & Company understand exactly what the client needs, and for the client to understand the possible solutions for their needs.

Whisper & Company will normally kick things off by doing research on how similar companies in the same industry present themselves online, and then widening the search to other verticals to see if solutions from other industries may be applicable.

A requirement gather session is held where each requirement is written down as a simple sentence, and these are then prioritised in terms of the end user perspective. This may be the visitor who may purchase something online, or even the staff member who will be in charge of managing the content of the website.

Once we have this, we’ll split the list into must have items, nice to have items, and items that we don’t really need. The idea behind this is that we live in a finite world. There is a limit to the amount of money, time, and effort that any project can take, and so it makes sense to distill each project down to the correct level of simplicity. This doesn’t mean making it as simple as it can be, but as simple as it needs to be.

It’s far too easy to load up on features and requirements without actually thinking through what it entails in the long run. For instance, do you want a blog on your website? Well, that means committing to publishing regular content.

Once we have the requirements agreed, we will then write out what is called a functional specification. This is a set of documents, and often drawings, that will describe how the system will work from the perspective of the people who will actually be interacting with it. We have a very specific way of writing this, which tends to capture the vast majority of what we call use cases (types of behaviour expected from users) and then translates this behaviour into what types of functionality the system should have to fulfil the requirements.

This document is essentially the blueprint of the website that we’re going to build, and is document is what what we will test against once we have built the system.

Content

Creating high quality content is one of the toughest challenges in web design, and a leading cause in the industry for lateness in delivering project and hitting the go-live dates.

At Whisper & Company, we don’t offer content creation as a core service (as we believe in offering a smaller number of service offerings at the highest standard possible) , but we do have some awesome partners who can help to make sure that each “i” is dotted and “t” is crossed.

At this stage in the project, our main concern is having an understanding of the number of pages required, and the relationship between the pages. For example, do some pages simply list out other types of pages?

For each page, we want to drill down to see what type of content will be hosted on the page, any additional functionality required to make that content shine through.

We build what is called a sitemap, which is a hierarchical map of all the pages, which clearly shows the relationship between them, and how each page is linked to another. We can then ensure that no page in “floating free” (meaning that it is not linked to from another page) unless that is a deliberate tactic, like a market-specific landing page. We can also start to make decisions about the navigation menu structure, to make it easy for end users to seamlessly browse through the website.

Another concern of ours is the amount of content that will need to be placed on the website. While it’s fine to manually add ten or twenty pages of content, if the content runs in the hundreds, thousands, or even tens of thousands of pages, then a specific strategy is required to deal with that type of volume, as doing it by hand is simply out of the question.

Design

For us at Whisper & Company, design is what we feel is now the differentiating factor. By design, we mean both how things look, and also how they work. We’ve previously written about why great design is crucial for a successful business (link)

General Look & Feel

In the early stage of the design process, our main goal is to try and capture the essence of the brand, and make sure that we choose the correct direction to represent the brand online.

This normally means doing the following:

  1. Creating mood boards / These are collections of images, quote, ideas, and examples that combine together give an idea of the general feel for the brand, as well as the general tone.
  2. General Look & Feel / The designers assigned to the project are given a free reign to come up with any ideas they well might be suitable. We don’t place any pressure on them to come with “winners”, this is purely an experimental process to see what great ideas surface. Emphasis is placed on having a wide range of inspiration and iterating through many ideas.

Wireframes

The wireframes are generally the first real technical aspect of the project. Our design team will create wireframe mockups of every single page of the website for both desktop, tablet, and mobile devices, and sometimes even multiple variations for each page.

The advantages of using wireframes is that they are clear to the client that this is a work on progress, and they remove the unnecessary details, such as colour, alignment, shading, contrast, etc, to focus more on how the content will be laid out on the page.

The truly beautiful thing about this stage in the process is that feedback is incredibly easy to act upon. Each page normally only takes a short amount of time to create, and changes can be done on the fly by just dragging and dropping, without any code needing to be rewritten.

This is where plenty of the discussion between the project team and the client takes place, to make sure that we haven’t missed anything out.

HTML5 High Fidelity Mockups

The next stage of the design process focusses on actually building the real user experience, adding real content if we have it, or just dummy data if we don’t.

HTML (the markup language that allows web pages to be displayed by the browser) mockups are high fidelity, meaning that the final version of those is exactly how the website will look, minus a few tweaks and bug fixes during the testing phase.

This gives the client a fantastically clear view of what they are getting as a final product, but without many of the usual issues of making changes based on feedback as if we had built out the actual functionality.

This method gives us the benefits of both world, we do the least work possible to get the maximum return on our efforts, without encountering the usual stumbling block of having to rewrite code endless amounts of time.

Development

Once we’ve got the HTML5 High Fidelity Mockups complete, we then move on to the development work.

Choosing the right CMS

Choosing the right Content Management System (CMS) can be a difficult choice for a client, but we’re always around to advise on the best fit.

This is a complex topic, and something that we feel is best suited for another article, but let us leave you with this:

We’ll always take the full requirement specification, and then give at least two recommendations based on the following:

  • What has worked well for other clients.
  • What fits the skills of the current project team.
  • What we feel will work best for your organisation.

CMS Integration

Once we have chosen (or built!) a CMS, it’s time to integrate the design that was completed in the previous stage and start to make the static HTML website into a living, dynamic system.

Contact forms will start to send emails, blog categories will dynamically start to pull content from the correct categories, Google Analytics will start to track the pages, content will be editable, and generally the system will start to look like it’s finished.

This is often where amateur agencies finish the job and push the website live. At Whisper & Company, we understand that there is still plenty of work left to do at this stage, and that it can be frustrating as a client to wait, especially as the website appears, to all extents and purposes, to be complete.

However, as we will see, there is still plenty of “under the hood” work left to do to actually be able to deploy this website.

Testing & Optimisations

The web is becoming an ever more complex system. Nowadays you don’t just have to build for the thousands of different devices that are currently available in the market, you have to build for devices that don’t even exist yet.

Ever higher-definition screens, browsers that update every six weeks, and yet the user still expects to have an awesome experience on every device.

This is why we do rigorous testing on both the browser and device level to make sure that both a user with an iMac Retina 5k display and someone with a mid level smartphone can both enjoy the superior user experience that our clients expect from us.

However, that’s not it for testing. We still need to test that every feature of the website is functioning as was described in the original specification document, and we take external QA (Quality Analysis) specialists to go through our work and give us honest feedback. In fact, they are actuallyincentivised to nitpick at our team’s work and find issues, and we welcome this because it helps us maintain our high standards.

The last thing to test is the Production (this is what will be the”live” environment) server. Before we go live, we’ll make sure we have a carbon copy of the current website and database on exactly the same server setup that we will use when the website is live, and test and fix any issue that may arise out of this, as well as configuring and optimising both the server and the code for speed and security.

Go Live

In the days leading up to the big launch, we will be adding any remaining content, making last minute changes from the client’s feedback, and continue our testing.

We’ll normally set up the DNS (the service that controls domain names) via CloudFlare, so that on the big day, there is no wait for the website to go live. On a click of a button, the entire website is live simultaneously all over the world.

If it’s a high traffic launch, we will then spend the day monitoring the systems to make sure that we’ve estimated the correct infrastructure, and we’re ready to step in at any time to take corrective action if the traffic is greater than originally planned for.

Continued Operations

We believe that launching a website is only the first step, it’s the continued operations that make or break the business.

With this in mind, we always include a period of continued operations in each website design and development project. This can include the following:

Warranty.

Every Whisper project comes with a full warranty against any bugs that may have been missed during the testing phase. This normally lasts up to two months, so it’s plenty of time for any issues to be reported and promptly dealt with.

General Maintenance

This can include work such as bug fixing, functionality changes, upgrades to servers and software. We feel this is normally the least required for the continued smooth running of a website. Even the ubiquitous Wordpress platform requires at least one day a month to deal with system upgrades, known security issues, and general optimisations.

Emergency Work

If there is an emergency, we’re always just a phone call away at any time of day, and we will often be able to start working on the issue within a very short period of time. That’s one of the huge advantages of having a distributed workforce, in that we don’t all work during the same timezone, and so we’ve got people around the clock.

Planned Traffic Spikes

For certain types of marketing events like television commercials, email marketings campaign, and coupon giveaways, a large surge in the number of visitors is often expected, and we work with our clients to proactively prepare for these situations to make sure that the funds invested in the marketing don’t go to waste because the website wasn’t able to handle the traffic. This often means spinning up temporary servers, or caching the website more aggressively.

Conclusion

So there you have it, a high level overview of how we will approach a general website project.

Obviously this is just a general plan, each project has it’s own phase plan created during the project setup phase, so that we ensure that we’re not just blindly following protocol, but actually taking the correct steps to create the best possible products for our clients.


Kickoff Your Website Project Today!

Contact us today and transform your online presence.

All done. A digital rockstar will be in touch soon regarding your project.