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
[Link]@[Link]
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
[Link]@[Link]
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
[Link]@[Link]
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
[Link]@[Link]
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
[Link]@[Link]
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
[Link].
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
[Link]@[Link]
