Metafluence

Project management and development process for web designers and programmers

This post is important to me for two reasons: 1) People rarely share their process in detail so I’m excited to break down that wall, and 2) I need your help to perfect it for the group.

The reality is that project management is one of the great unsolved problems in the creative and technical worlds, especially for web designers and programmers. Our industry is still in its infancy and there is very little consensus about project documentation, terminology, and developed systems. Every system that I’ve seen has pros and cons, but none of them have been transparently simple to use. We’ll go into existing systems later, but the only thing that I’ve seen that has been proven to work is the disciplined usage of a system that works for you.

I wrote this post because I wish I had this information when I first started offering services over a decade ago. My hope is that it can help new and existing service providers to understand more about the work we do. For example, small and independent developers commonly take on any type of project they can in order to make ends meet. This means they are often ill equipped to quote how long something will take, what it will cost, and what the process will be for creating it. They not only lack the process, but often the supporting tools to efficiently develop a project. Even though it may be tough, developers shouldn’t take on new project types until they have all of the pre-work done. While shooting from the hip may seem like it takes less time than proper planning, in the long run it takes longer and costs more than the client was originally told. When your small, referral business is crucial, so it is better to be a person of your word than to offer placating answers in the beginning. You will develop a reputation in the business world, and you can control whether that is one of being reliable or always late and over-budget.

To properly manage a project you’ll need a workflow and a workflow tracking system. Let’s take a closer look at these elements of project management.

A Web Development Workflow

So, what goes into the development workflow? There are four main stages in the development workflow:

Business Development

Before you can solidify a project, you’ll need to court clients. I wrote a posts about this called, Business development tips for web designers and programmers.

Project Definition

Once you have a client, you’ll need to set the scope of the project and outline it in a written agreement. That agreement does two things for you, 1) Allows you to create an accurate timeline and estimate, and 2) Creates a point of reference to manage scope creep and assist in change orders. I wrote a post about this process called, Establishing agreements and writing proposals.

Project Development

This is the heart of this post. I’ll break down project development methodology into phases with tasks that have associated deliverables. The deliverables have a structural outline and are assigned to roles, which can be carried out by an individual or a team. Bear in mind that my philosophy for web design is that form follows function. Therefore the order that things are created in are:

1. Identify business goals
2. Create a strategy to achieve those goals
3. Develop a concept based on the strategy
4. Create information architecture to guide content development
5. Create content to support the concept
6. Content drives the design
7. Create prototypes or proof of concepts to flesh out ambiguous or challenging portions of the specs
8. Program according to specs
9. Specs drive QA
10. Monitor analytics post-launch to determine if goals were achieved
11. Results drive future development

Project Development

Projects are developed in three main phases:

1. Planning
2. Design
3. Build

A web developer or shop may do all three phases, or they may complete one or two. I believe in the future all three of these phases will be done by specialized companies, much the way architects, engineers, and contractors divide the responsibilities of creating buildings. Smart developers will manage client expectations up front that each phase’s timeline and cost is dependent upon the proceeding phase. That means I can’t accurately tell you how much it will cost to build a website until I’ve seen the designs. Imagine asking a builder how much it would cost to build a house without blueprints. Experienced developers could share the costs and timelines of similar projects for ball parking estimates, but should not commit to a final agreement for the next phase until the proceeding phase is completed. Likely this concept feels uncomfortable to developers that haven’t been managing projects this way. For more information about how to handle conversations with clients using this methodology read Business development tips for web designers and programmers and Establishing agreements and writing proposals.

The following outlines the development phases:

Business Development

Initial engagement

Goal is to sell client on Phase 1

Will produce a client brief containing:

• Client contact information
• Budget
• Timing
• Motivation - Description of success
• Impetus - Why now?
• Sales Goals
• Branding Goals
• Action Goals
• Persuasion Goals
• Target Market
• Simultaneous Efforts
• Asset Inventory
• Products/Services List

Work done by Account Manager

Many people will give away too much during the selling process in order to close the deal. Common mistakes include producing mock-ups, brainstorming strategies, and providing a fixed cost and timeline. Every client wants to know how much it will cost, how long will it take, and what will they receive at the end. The job of selling services is to reference other examples of your work and sell them on the process. A good client will trust that you will be mindful of their budget and time and that their work will be a quality deliverable at the end. If you encounter any difficulty when it comes to strategy, explain you don’t give your big ideas away for free because you are paid for your expertise. If you encounter difficulty about wanting to see comps, explain that the design is a manifestation of the ideas behind them and until you go through that process it would be playing, “Let’s pretend”, which is a poor use of their time and money. Exact wording may vary to ensure the client feels comfortable and understands.

Before continuing on to the next phase, an agreed upon timeline and estimate is required to continue. You will be paid for your ideas during this phase and not your time. That means you should charge for value and not your hourly. You may only put in twenty hours during this phase for a small project, but the cost might be the equivalent of one hundred hours of your time. In the future when these phases are carried out by separate businesses, the most lucrative and highly paid work will be the phase 1 work. Knowing the right thing to do is everything. Take MySpace, for example. It was ugly and didn’t work properly all the time in the beginning, but it rose to be one of the largest websites in the world because they had the right idea (remember there were other social networks before MySpace, but they didn’t get the formula right).

Phase 1 - Planning

Campaign research

Goal is to put together background information along with the client brief to provide creatives with the information they need to brainstorm a concept.

Will produce a Campaign brief containing:

• Competitive analysis
• Relevant trends/technologies
• Keyword space
• Mine previous site’s traffic log

Work done by Account Manager

Brainstorm strategy

Goal is to develop a plan for where traffic will come from and what pieces are needed to convert it into the project’s goals.

Will produce a Campaign strategy containing:

• Campaign concept
• Campaign elements
• Traffic source map

Work done by Account Manager, Lead Designer, Lead Writer, and Lead Developer

This is more about the big idea than specific executions for campaign elements. Eg: Using email to drive people to a brand site where they can locate local dealers. This is where you are paid for your expert recommendation and not your time. It may only take you an hour to come up with the big idea, but you couldn’t have done it without years of experience and education.

Client approval required to continue

Revise as necessary

Concepts

Goal is to describe the creative execution concepts for the various elements in the campaign.

Will produce Concepts containing:

• Written concepts for campaign elements
• Mood boards
• Story boards
• Scraplets

Work done by Account Manager, Lead Designer, Lead Writer, and Lead Developer

Do NOT create page mock-ups during this stage. Use this process to explain that a design requires a deeper understanding of how it works and what elements will be on the page, which happens at the end of Phase 2. Mood boards and concepts should be plenty to give a client the sense of where the design will go.

Client approval required to continue

Revise as necessary

Ok, now you have your plans laid for your campaign. I call it a campaign and not a website because your big idea may include an email, a MySpace profile, and a banner ad. You would need to do the following phases for each of those elements. Now that you have a clearly defined plan, you will be able to provide a reliable estimate for the time and cost of Phase 2.

Phase 2 - Design

Deep information gathering

Goal is to discover as much information as possible so the IA can figure out an appropriate site structure.

Will produce Research containing:

• Stories
• Company background
• Product/Service data

Work done by Lead Writer or Researcher

I often call this step content extraction. Gathering the info about all of the stories that need to be told on the site can be a teeth pulling process. You’ll need someone doing this that has journalistic skills to get the story.

Client approval required to continue

Revise as necessary

Initial information architecture

Goal is to describe the site structure from a high level to mobilize creatives.

Will produce Site plans containing:

• Use cases
• Site map
• Content description diagrams
• Functional requirements
• Offsite profile requirements

Work done by Information Architect

IA is an evolving area of our industry and subject to much dispute. Expect this area to change.

Client approval required to continue

Revise as necessary

Content creation

Goal is to create all of the content.

Will produce Content such as:

• Written assets
• Image assets
• Motion assets

Work done by Specialists as needed

Content developers should refer to the Content description diagrams for their assignments. Content developers will have their own methodology and should be a separate cost from the rest of the work.

Client approval required to continue

Revise as necessary

Final information architecture

Goal is to compile all content and merge with existing IA documentation. Likely will require reworking some of the IA based on final content output.

Will produce Dummy pages

• Revised IA docs
• Analytics tracking plan

Work done by Information Architect

Tracking plan should be driven by the goals set in the Client brief and fused into the IA docs.

Client approval required to continue

Revise as necessary

Design visual center

Goal is to create a guide for designing all of the campaign elements.

Will produce a Visual center containing:

• Style guide for all campaign elements
• Key layouts

Work done by Lead Designer

Client approval required to continue

Revise as necessary

Production Design

Goal is to create the design for all pages in the site according to the visual center.

Will produce Detailed mock-ups of all unique pages and their states (such as rollovers)

Work done by Lead or Production Designer

Client approval required to continue

Revise as necessary

Now that we’re done with all of the content and design, we’re ready to start building everything. If Phase 1 and Phase 2 were done properly, Phase 3 is an easy part to outsource. If you’re primarily a design shop, then you could find a strategic partner to do your programming. This is when you could take advantage of oversea talent in places such as India. If you’re specifying functionality that is ground breaking or challenging, you may want someone more local or even your own team because it will likely require more face to face meeting time. If you’re a programmer, then you can outsource the first and/or second phase then wait for it to come back to you for this one. No matter who you are, you’ll need the work from the first two phases to quote the timeline and cost of the Build Phase.

Phase 3 - Build

Asset processing

Goal is to cut out and prep all assets to be ready for insertion into site by programmers. Content destined for the database should be parsed in a CSV or similar format.

Will produce an Asset Library containing:

• Placement-ready assets

Work done by Production Designer

Test script

Goal is to create a checklist of the site’s functionality to ensure everything is tested during QA.

Will produce a Test script containing:

• Use case
• Function being tested
• Initial system state
• Input expected output

Work done by Lead QA

Database Build

Goal is to establish the structure and relationships of the data and populate the database with the data.

Will produce a Database containing:

• Database schema
• Database connection info
• Data import

Work done by Application Developer

Scripting

Goal is to write the logic that controls the behavior of the site.

Will produce Scripts containing:

• Server side scripts
• Client side scripts
• External script links

Work done by Application and/or UI Developer

Assembly

Goal is to pull all of the pieces together into their final form.

Will produce a Website and other campaign elements containing:

• XHTML
• CSS
• Flash
• Linked files
• Tracking codes

Work done by Application and/or UI Developer

Client approval required to continue

Revise as necessary

QA

Goal is to test for compatibility and proper functionality.

Will produce a Bug tracking report containing:

A list of each bug with:

• Bug description
• Bug fix assignment
• Bug severity
• Bug correction state

Work done by Production QA

Security Audit

Goal is to ensure there are no exploits that could be used to access protected data or use the site in an unintended manner.

Will produce a Security report containing:

A list of each problem with:

• Problem description
• Problem assignment
• Problem severity
• Problem state

Work done by Security specialist

Client approval required to continue

Revise as necessary

Launch

Goal is to bring the various elements live.

Will produce a Launch by:

Migrating/Pushing site to the live environment

Work done by System administrator and/or Application developer

A Workflow Tracking System

Knowing the process is key, but managing it through to completion takes a system. Systems can be methodologies and/or software that allow you to track milestones, deliverables, timesheets, and more. There are a lot of existing systems out there, and here are a few examples:

Methodologies

• GTD
• PERT

Software

• Basecamp
• Microsoft Project
• Omni Plan
• Daylite
• Custom Excel Spreadsheets

To determine which system is right for you, you need to understand what your strengths and weaknesses are and then find a system where the flaw is within your strength so you can plug the holes in that system to make it effective for you. An entire article can be written comparing the various solutions out there to aid in your decision making, but this isn’t that article. ;) I want to get this information out there, so I’m releasing this in its current form and I’ll release a system comparison article in the not too distant future.

No matter which system you choose, you’ll ease the set-up and management of projects if you have templates for the workflow tracking system and formats for your deliverables.

I’m really interested in feedback here. I’d like to know what information and/or terminology isn’t clear. I’d like to hear from IA’s, designers, and programmers what they think about the parts that deal with their work. I’d also like to know if your experience has been something different than this.