I found an article about static web design workflow by Josh at Tutorial a day. While his process is great for static web sites, it isn’t adapted to dynamic web design, with a PHP/ASP/DotNET/JSP/ColdFusion (yuk) backend that is.

I’ll try to briefly cover every step we — at Quantik Solutions — do to ensure the delivery of a web site that meet the client and the user needs. This being an overview, I will try to develop each step in a separate post later on.

Step 1. Market, history and present situation analysis

This basically consist in look to the client’s past and actual web site, and its competitors. The objective is too get a list of do’s, keepers and don’t, either from the functionalities of the analyzed sites, or from functionalities that are missing from the sites. We analyze available web statistics to get quantitative information about what informations the visitors seek the most and the less.

This step also consist in finding the characteristics the major personas:

• What are their demographics? (age, sex, education, revenue, etc.)
• What is their internet knowledge? (often based on their demographics)
• What information do they look for on the site, in the first 30 seconds, in first 2 minutes, in the first 10 minutes?
• What is their technological profile? (ie. which browser, JavaScript support, Flash version support, screen resolution, etc.)

Step 2. Needs and requirement gathering

Usually — but strange enough not always — the redesign or refectory of a site is triggered by new requirements or new needs. The objective of this step is to get a list of all of them, but also to discover latent needs and requirements, or to convert requirements to strategies. We also try to get an idea of the client’s budget.

For example, a client could require to improve its web sales by 10%.

• A latent requirement could be that the checkout process is simpler, as it has 10 steps right now ;
• His 10% improvement requirement could be converted to an immediate or delayed up-selling strategy.

It might look like rocket science, but all the answers usually come quickly and easily after the market analysis at the previous step.

Step 3. Information architecture

This basically consists in grouping related information in sections. We use the card sorting technique I’ll cover later in another post.

Step 4. Functional planning

This stage consists of drawing annotated wire frames of the major interfaces. We do a first version on paper or on a white board at first (that we scan or capture with a digital camera for archives), then using Visio and UXD wire frame template/stencils.

We try to separate this from the design to make sure that we don’t end up with a nice looking but unusable web site.

Our main usuability guidelines are :

• Learnability: a user who doesn’t know the web site design, functionalities and information architecture must be able to find what he looks for quickly.
• Memorability: a user who knows the site must be able to quickly remember its functionalities when he returns to it after a prolonged period.
• Efficiency: a user who knows the site must be able to find what he looks for quickly, and be able to use more advanced features (search engine, related content boxes, etc.) to do so.
• Errors: a user must make as little browser mistake as possible, and misleading elements must be remove.
• Satisfaction: a user must enjoy browsing the site.

Step 5. Technical planning

This step consists in planning the software architecture behind the site. Database models are drawn, SQL queries are written, programming guidelines are outlined, browser compatibility and hosting requirements are stated, and speed/load objectives are identified and quantified.

Step 6. Cost analysis

At this step, we know exactly how the project is going to be done. Hence, a precise cost analysis can be made. We base the cost analysis on previous project and client history. We add a budget for quality assessment and client communication and management, both based on internal and client-specific historical ratios (some clients are high maintenance, some are low maintenance).

Step 7. Design

We don’t do any web design at Quantik Solutions because it isn’t our strength. We rely on experience web designers instead. So they typically draw two front pages, then one is picked by the client; then they draw one to three sub pages, that are adjusted following the client’s feedback.

Step 8. Integration, programming, and quality insurance

Integrate, code, test. The requirements, functional and technical analysis are used to make sure no deliverable has been forgotten.

Step 9. Production postmortem

What did we do well, and what didn’t we? Most of the time, the answer to improving your processes and workflow are right under your nose in everybody’s head. We make sure it gets out and ends on paper. The objective of this step is a bullet form or keepers and goers.

Step 10. Project postmortem

After a few weeks or months, we update the information collected during step 1.

• What did the client think of the development process?
• What did the client hear from the users about the new site?
• After web statistics analysis, what actually seem to works and what doesn’t?
• Did the client and user needs change? If so, in what way?

Often, this leads to a micro iteration where minor changes are brought to the site (revision of step 3 to 8), or to a complete iteration (steps 1 to 10).

Conclusion

This process isn’t perfect, and we keep on learning on how to improve it. Therefore, we make sure that we get our folks’ and clients’ opinion and ideas about it.

It can also be too heavy for some small projects. Thus, some steps are sometimes driven in an informal way, or using a template that fits the typical project with minor adjustments.

Further reading

Usability for the Web: Designing Web Sites that Work, CAD $54.77
Tom Brinck, Darren Gergle, Scott D. Wood, ISBN 1558606580

If you like this acrticle, leaving a comment, Digging it, adding it to your del.icio.us bookmarks is always appreciated.