Getting the web design workflow right can be the difference between a successful project which comes in on budget, and one which goes spectacularly belly up. So in this piece we thought we’d talk a bit about how we structure the design and development workflow, what tools we use, and how we try to get our projects done in a way which keeps things moving and avoids lengthy feedback cycles.
(1) Creation of a Project Specification Document
The first phase of a project involves a lot of clear communication between ourselves and the client, where the full scope of the project is discussed, sketched out, and budgets agreed on. This phase often includes the creation of a project specification document which can run from a few pages through to 100 page booklets. This gets distributed to key stakeholders so everyone has a clear idea of what’s involved and what’s not involved.
We find them crucial for both scoping out the project fully and defining functionality, as well as managing risks, assigning responsibilities, and laying out time frames. Time and time again, these documents have laid the foundation for successful projects where the details have been thought through. So we always assign a portion of the budget for creating one of these. Additionally, we actually find these tomes can help build trust at this crucial stage of the process. If it’s a new client, they get the reassurance of a document which demonstrates that things have been considered deeply, and this helps facilitate a good ongoing relationship.
As stated eloquently by Derek Sisson, there’s another useful thing gained by creating a document like this: “Project requirements provide an obvious tool for evaluating the quality of a project, because a final review should examine whether each requirement has been met.” The point is that if things are done correctly at this stage, the whole thing goes smoothly from there on. And when the site is delivered, how convenient it is to be able to simply refer to this existing document to ensure things have gone well. In the case of clients suddenly wanting additional functionality (and let’s face it we’ve all been there!) these documents also provide proof of what was discussed. So they always pay their own way.
At this stage, we’ll already be using Asana, our project management tool of choice at the moment. It’s great for assigning tasks, adding due dates, and even turning emails into tasks. There are a lot of project management tools out there and we’ve always kind of got out eye on the field but Asana just works for us.
(2) The Game is Afoot
The early stages of a new job vary slightly depending on the size of the project, but generally include:
- Creation of a sitemap – Essential for content organisation. Depending on the size of the project this may be the province of a dedicated Information Architect.
- Planning the Userflow/journey – In order to maximize your conversions, you have to get the user flow right. Understanding the path the user follows to navigate your website is an indispensable part of any project. Even if we’re building a WordPress site with a template, this part won’t be left out. But on bigger projects, this kind of UX planning can take a lot of resources. The right decisions now can make huge commercial sense later on, while the opposite also holds true.
- Wireframing – Used to create placeholders for content, establish priorities for elements on the page, and to document requirements. Wireframes define the visual hierarchy of the page, actual form and interaction elements, and often labels, instructional text and some copy.
(3) Web Design Comps
Comps, as they’re called in the industry (comprehensive layout), are mockups of a proposed design. After meetings with the client to try and figure out what they want, and a good deal of research on our side (including checking out the competitors sites and shortlisting all the best features) we then pull together some ideas for what the eventual site might look like. Part of this process is establishing templates (or types of pages) For example, all blog pages are going to be the same so that’s one template. Homepage another, About Us another and so on. With say 10 templates to aim for that means the designer has to come up with 10 PSD’s (photoshop documents) or, live pages on Invision.
We’re big fans of Invision at Barefoot, it’s slicker, and more impressive than regular static documents. Invision allows for moving wireframes showing intimations of eventual functionality. It’s really an amazing tool and, for reasons we can’t quiet understand, totally free! Once you’ve used this baby, you’ll never go back to static comps, that’s for sure.
(4) Coding/Development Cycle
Not much needed to say about this one. We use Github on all projects, using branches to try out new ideas, experiment and commit changes. GitHub also has integrations with loads of other tools we use such as Slack for messaging and Reviewable for code reviews. This bit takes the more time than any other part of the process, perhaps 60% of the entire project.
(5) Quality Assurance Testing/Browser Checking
Quality Assurance Testing is a massive part of any project, and a whole UX industry in its own right. Every company has their own set of guidelines relating to QA. Some of ours include:
- Content – Labelling, spelling, grammar, consistency
- Graphics – Are the images correct? Are they properly optimised? How is the load speed? Text layout, alignment of elements, colour accuracy.
- Browser Compatibility – Browserstack is a core tool of ours as well as a good deal of real world testing.
(6) Client Testing + Training
Since the advent of Invision, this phase has become a lot easier since the client generally has a pretty solid idea of how the site is going to look and function before actually seeing the finished project. Nevertheless this stage often unearths glitches and offers opportunity for refinement. We also take the time at this stage to ensure key site managers are au fait with the general functionality, and confident to take over the ongoing management of the site once it goes live!
(7) Launch