Sample WBS for Website Development: Getting Started

All web development projects are of course unique, so the type and extent of
work involved in each one varies considerably. For purposes of this example
just think in terms of a general-purpose business website. If your project is
more involved, for instance incorporating e-commerce and social networking
into your website, be prepared to expand your WBS appropriately.
Start by listing the key pieces of the project work. You may be listing actions or
deliverables depending on your project. For example you might start out with a
list like this as the starting point for a WBS for your website development
project:
Sponsored Content
●

●
Ed Sheeran announces 18-month break from live concerts. This is why
India Today

●
Better Than Botox? Mother 57, Looks 35 Without Surgery
Health News Online

●
[Game] Do you have what it takes to save the internet?
Outbrain

●
Indonesia: 25 Insanely Cool Products From America
Next Tech

Recommended by

1. Gather Requirements
2. Establish Design
3. Select Technical Framework
4. Implement Technical Framework
5. Create Content
6. Load Content
7. Test Site
8. Roll Out Site
Note that you are not at this point tracking who will be performing each piece
or even whether work in each area is to be done chronologically or
simultaneously. Just be sure to capture the high-level types of work.
Next, dig down into each of those and capture the next more detailed level of
information about what will be done. You can incorporate the WBS codes as
you go, especially if you are using software that creates them automatically, or
wait until you have capture all the information to add them.
1. Gather Requirements
1.1 Technical specifications
1.2 User requirements
1.3 Reporting requirements
2. Establish Design
2.1. Design elements
2.2 Overall layout
2.3 Content elements
3. Select Technical Framework
3.1 Evaluate options against requirements
3.2 Evaluate cost and time to develop
3.3 Make decision
4. Create Infrastructure
4.1 Build or acquire back end
4.2 Build or acquire front end (user interface)
4.3 Integrate back end and front end
5. Create Content
5.1 Create content summary
5.2 Establish content details
5.3 Assign content creation
5.4 Create detailed content
6. Load Content
7. Test Site
7.1 Navigation
7.2 Interactive elements
7.2.1 Contact form
7.2.2 User registration
7.3 Browser compatibility
8. Roll Out Site
8.1 Establish target date
8.2 Create communication plan
8.3 Make site live
Sample WBS for Website Development: Final Version
Continue on to as many levels as you need to represent the work at a level that
is detailed enough that stakeholders get a clear picture of what is involved in
the project and what to expect, but not so detailed that the WBS lists every
individual task that must be done. For our example, the final version of our WBS
for a website development project might look like the following.
Work Breakdown Structure
1. Gather Requirements
1.1 Technical specifications
1.1.1 Expected bandwidth
1.1.2 User registration
1.1.3 Restricted areas
1.2 User requirements
1.2.1 Menu navigation
1.2.2 Interactive modules
1.2.3 Static pages
1.2.4 Flash elements
1.3 Reporting requirements
1.3.1 Bandwidth & usage
1.3.2 Page views
1.3.3 Session length
2. Establish Design
2.1. Design elements
2.1.1 Banner
2.1.2 Footer
2.1.3 Logo
2.1.4 Color scheme
2.1.5 Font usage
2.2 Overall layout
2.2.1 Column setup
2.2.2 Optional modules
2.2.3 Navigation layout
2.3 Content elements
2.3.1 About page
2.3.2 Contact page
2.3.3 Services page
2.3.4 FAQ page
2.3.5 Photo Gallery
3. Select Technical Framework
3.1 Evaluate options against requirements
3.2 Evaluate cost and time to develop
3.3 Make decision
4. Implement Technical Framework
4.1 Build or acquire back end
4.2 Build or acquire front end (user interface)
4.3 Integrate back end and front end
5. Create Content
5.1 Create content summary
5.2 Establish content details
5.3 Assign content creation
5.4 Create detailed content
6. Load Content
7. Test Site
7.1 Navigation
7.2 Interactive elements
7.2.1 Contact form
7.2.2 User registration
7.3 Browser compatibility
8. Roll Out Site
8.1 Establish target date
8.2 Create communication plan
8.3 Make site live

You could then create a WBS diagram manually or using software that will do so
automatically. Depending on the audience, you may want to have both outline
and diagram versions available.
If you are developing a site for a client, or hiring someone to do your site for
your business, you should also consider accounting for the work required to
develop and approve a contract and to obtain final approval for the completed
site.