Web Project Workflow

Meg Houston Maker, Director of External Information Services

Dartmouth College, Hanover, NH USA
July 2005

This workflow borrows from well-documented contemporary web design practices, but it’s also
been tested and refined using real-world projects. Use it to help you develop a website of any
scale: small sites, or those with limited functionality, usually require a less formal approach, while
large, complex, or high-profile sites generally require additional supporting materials. No matter
what size your project, create a Project Plan to capture your decision making and, when the
project launches, serve as an archive of your strategic thought process.

1. Project Definition
Discovery
• Stakeholder interviews
• Competitive analysis
• Audience profiles
o Market/audience research: Profiles of primary and secondary audiences
o Audience capabilities and constraints: skills, expectations, typical needs,
browser/platform requirements

Analysis
• Higher-order goals for the site
• Functionality and content needed in final product
• Internal capabilities: staff and financial resources

Strategy
• Business objectives: primary and secondary
• Communications strategy: tone and style (summarized in a Creative Brief)
• Success metrics
• Marketing Plan
• Scope: what to do now, what can wait

Meg Houston Maker, Dartmouth College 1. Project Plan Outline – Web

[email protected]
Project Plan (Outline)
• Project Summary
• Strategy
• Audience
• Requirements
o Functional/interactive
o Content
o Visual
• Scope
• Metrics for success
• Marketing
• Maintenance and ongoing support
• Future development
• Team and roles
• Vendor relationships
• Approval loop
• Budget
• Timeline

Project Definition Deliverables

For a small project: Project Plan
For a large project, add: Creative Brief, Marketing Plan

Meg Houston Maker, Dartmouth College 2. Project Plan Outline – Web

[email protected]
2. Structural Design
Content Definition
• Existing content inventory: text and imagery, including non-web sources
• Content to be developed or edited
• Authoring and editing responsibilities (staff)
• Content maintenance plan

Functional Definition
• Functional requirements
o User workflow
• Technology requirements
o Server and hosting
o Application development and integration
o Data integration
o Vendor or third-party relationships and responsibilities
o Test plan, bug tracking and bug fix process
o Ongoing development or maintenance
• Real-world workflow and integration requirements
o Marketing integration: channel integration with postal, email, phone, or other
media
o Back-office database integration and workflow
• Support requirements
o End-user support plan
o Training or hiring internal staff
o Ongoing site maintenance
• Internal responsibilities
• Vendor responsibilities

Site and Page-level Diagramming

• Information architecture
• Site mapping
• Wireframes: schematic page layout
• Naming and labeling conventions

Meg Houston Maker, Dartmouth College 3. Project Plan Outline – Web

[email protected]
Structural Design Deliverables
For a small project: Information Architecture Diagram, Wireframes
For a large project, add: Functional Spec, Technical Spec, Test Plan, Support Plan
When vendor relationships are required: Contract, Service Agreement, Licensing, Non-
disclosure Agreement

Structural Design Testing and Sign-off

Review wireframes with stakeholders
Reality-check wireframe sketches with 3-5 users

3. Content Collection and Creation

Content Authoring
• Writing and editing content according to site information architecture and page
diagrams; for repurposed content: make web-ready
• Sourcing photography and illustration

Content Review and Sign-off

Run content through approval loop

4. Visual Design
Site Graphic Design
• Applying brand and graphic identity
• Photography and illustration
• Design comps
• Low-resolution prototype

Design Deliverables
For a small project: Design comps
For a large project, add: Design Style Guide, interactive prototype of key site sections

Design Review and Sign-off

Run design through approval loop
Reality-check design with 3-5 users

Meg Houston Maker, Dartmouth College 4. Project Plan Outline – Web

[email protected]
5. Production
Engineering
• Server and hosting set-up
• Data or database development
• Application development
• Content management system integration
• Page or template design and development: HTML, CSS, page-level scripting tools
• Design of reusable elements: graphics, navigation, META tags, etc.
• QA testing

Site Construction
• Flowing-in content
• Applying styles
• Integrating data, application, other functionality
• Staging on test server

Quality Assurance Testing

• Content testing and review: link checking, graphics review
• Functional testing: application and interactive elements
• Real-world workflow and integration testing
• Browser testing

Sign-off
• Stakeholder review and final approvals

6. Launch
Roll-out
• Soft-launch with small user base; progressive launch to full user base
• Site marketing
• User support

Maintenance
• Site hand-off to maintenance staff
• Site metrics: data gathering, reporting, and monitoring
• Initial site or workflow adjustments

Phase 2 Planning

Meg Houston Maker, Dartmouth College 5. Project Plan Outline – Web

[email protected]
Selected Bibliography

Access by Design: A Guide to Universal Usability for Web Designers by Sarah Horton; New
Riders, 2005 (forthcoming).
Sarah’s latest book attempts to balance accessibility and graphic design—two factors that
have, for much of the history of the web, been at odds.

Don’t Make Me Think! A Common Sense Approach to Web Usability by Steve Krug; New Riders,
2000.
An excellent guide to usability testing; presents simple, easy-to-follow guidelines for
testing your site with users.

The Elements of User Experience by Jesse James Garrett; New Riders, 2003.
Book-length explanation of Garrett’s framework for designing an effective website.

Information Architecture for the World Wide Web, 2nd Edition by Louis Rosenfeld and Peter
Morville; O’Reilly, 2002.
Not a lightweight book. Useful for understanding how to structure content for maximum
usability and findability.

Web ReDesign: Workflow that Works, by Kelly Goto and Emily Cotler; New Riders, 2002.
Equally useful for new site development, Web ReDesign presents a comprehensive guide
to the process, from strategy to launch. The project outline above borrows heavily from
Goto and Cotler.

Web Style Guide, 2nd Edition by Patrick Lynch and Sarah Horton; Yale University Press, 2001.
Excellent overview for constructing simple, usable sites. The full text is also available at
www.webstyleguide.com.

Why We Buy: The Science of Shopping by Paco Underhill; Simon and Schuster, 1999.
Underhill is a retail shopping anthropologist and consultant. Read this book for insight
into user behavior and how to design a good user experience.

Meg Houston Maker, Dartmouth College 6. Project Plan Outline – Web

[email protected]