Website development process flowchart: the build on one page

What does a website development process flowchart show?

A website development process flowchart shows the order of the stages, who owns each one, and the points where work waits for an answer. It also shows the loops, where a "no" from the client sends work back a step.

A flowchart for a client site build can use these shapes:

An example chart for a client site build, read from top to bottom:

1. Signed proposal (oval, your team's lane)
2. Sitemap (rectangle, your team's lane)
3. Design (rectangle, your team's lane)
4. Did the client approve the design? (diamond, the client's lane). Yes: on to step 5. No: back to step 3.
5. Build (rectangle, a developer's lane)
6. Content load (rectangle, your team's lane)
7. Site live (oval)

Keep the chart to one page. If one stage needs its own steps, give it a second chart and point to it from the box. For the stages in words, and how they change for WordPress and for stores, see the website development process.

How do you draw the website development process stages as a flowchart?

Draw the stages as a flowchart by listing them in order first, then adding the decision points, then the loops back. Give each person or team its own lane, so everyone can see who acts at every box.

1. Write down every stage of your build, from kickoff to launch, one per line.
2. Put each stage in a rectangle, left to right or top to bottom.
3. After each stage the client reviews, add a diamond with the question it answers.
4. Draw the "yes" arrow on to the next stage.
5. Draw the "no" arrow back to the stage that makes the fix.
6. Split the page into lanes: your team, the client, and anyone else who does the work.
7. Mark each spot where work stops to wait on the client, such as content, logins or feedback.
8. End with the "site live" oval, plus one box after it if you look after the site later.

Common places to keep the chart include the tool that holds your project boards, a shared drawing file or a single slide. Keep it where the team already works, so people look at it. For putting dates on each stage, see the website timeline template.

How does project management fit into the website development process?

Project management fits into the website development process as the checkpoints between stages, not as a stage of its own. It's the work of moving each task from box to box and chasing each answer.

Spots on the chart where project management does its work include:

• the line between two lanes, where someone confirms the next person has what they need
• each diamond, where someone asks the client for a yes and writes down the answer
• each waiting point, where someone follows up on missing content or logins
• each "no" loop, where someone checks the fix stays inside the agreed scope

Questions to settle as you add them:

1. Who owns each diamond, and how does the client give their answer?
2. When work stops at a waiting point, who follows up, and when?
3. What happens when a "no" asks for something outside the scope?

These checkpoints are the project lead's daily work. For running the build day to day, see web design project management.