Web Development Process 1 - A Small Business Perspective

<chant>
I am a professional!
</chant>

Before reading any further, please chant the above in monotone three times.

Done? Great. The way I figure it, if you truly want to believe that you're a professional, you can either chant those words so often that you believe them, or you can become a true professional.

I'm not about to take some lofty stance and tell you that "professionals" are those who are paid to do the job, who have a certain amount of credibility, or who are rich enough to afford business cards that have "Professional Web Developer" written on them. In my opinion, a professional is someone who acts like a professional. You can be 13 or 33; you may have been doing your job for 15 years; you may be one of the best in your field -- and still not be a professional. Being a professional requires that you act like one.

In this article I will explain how we here at NMC Group develop Websites. This is not an end-to-end client interaction process -- it's a look at the steps that we personally take behind the scenes when we build a Website. It's fairly comprehensive and I give you full permission to steal it, discount it, or add to it as you see fit!

I refer to a number of documents in this article - you can download them all here.

Laying it on the Line

As far as I can tell, this could very well be the first article ever in which a company opens up about its internal processes in such a way. This may well get me ostracized, or it could get me a job for Dubya. Either way, here are the steps we move through with each project we take on:

1. Project Inception


2. Project Launch Meeting


3. Project Requirements Document


4. Discovery Documents


5. Information Availability Flowchart


6. Website Flowchart


7. Prototype


8. Prototype Approval


9. Working Production


10. Final Production


11. Testing & Final Approval

1. Project Inception

This is it, the miracle of miracles: birth. This is where your project truly begins. It's an often-unpraised but highly important step, and one that you may not have ever appreciated. More often than not, this is simply an idea or a dream. If you run a Web development company, it may not even be your dream: it may be the dream of your client. In this case, make it your dream -- feel free to imagine how great the site could be if it were created without limits.

2. Project Launch Meeting

The first official step in the development of a site is the Launch Meeting. This is a true brainstorming session. No decisions will be made, but you'll talk about things like colours, fonts, logos, hierarchy, navigation structure, and who the site will target. Essentially you want everyone in the meeting to walk away seeing the same "team vision" for the site.

3. Project Requirements Document

Here's a project requirements document I put together for a client project we've just started. Essentially you want this document to summarize what the team currently thinks the project will look like when it's completed. There's no need to "get it all right", or feel tied down. At this point you are moving from brainstorming to making certain decisions, but you're also allowing yourselves a structure that can be followed in further client meetings. It'll also help out when it comes to decision making.

4. Discovery Documents

Here are the discovery documents we use, and have helped develop. These are used at the point at which you start to get down to the real nitty gritty. Before, you didn't really make too many decisions, instead focusing on being open-ended and ensuring that creative discussion flowed. But with these documents, you'll get down to working out who your target audience is, what they want, the sections of the site, and what they will contain, etc. This will become the true roadmap for the project.

5. Information Availability Flowchart

This is a really great tool for a highly database-driven site that incorporates many different independent systems. It essentially outlines which types of information will be available and where. This image illustrates one we set out for a shopping cart system.

6. Website Flowchart

The flowchart is one of the most useful and least-used tools I've ever come across. It sets out the information flow, how systems talk to one another, the points at which authentication occurs, and more. A well-made flowchart will not only define how the site will work, but it often allows you to write high-end code and distribute tasks in ways that would be impossible without the flowchart. Here's an example flowchart for a project we've recently started. Your flowchart should illustrate not just the paths users can follow, but also the various systems and interactions they -- and the site's administrators -- would be able to access and experience.