Website Development Process

CHAPTER 5
 9-2
Chapter 9: Website Development Process

 Questions answered in this chapter:

 What are the steps involved in building a website?
 How is the user experience definition created?
 What is the architecture design process?
 What is the implementation process?
 What is involved in the test process?
 What factors are involved in launching a website?
 9-3
Website Development Process

 The goal of website development is to

“present functionality and content
through some type of visual interface.”

 Initial steps for developing a website

 Be part of strategy
 Define user experience
 Translate user experience to functionality and screen representations

 A set of compromises are

 Size & scope of project
 HW & SW types
 Type of audience
 9-4
Three External Forces That Shape This Goal:

 Time
 What is the deadline for this project?
 Is the deadline flexible or nonnegotiable?
 Can the site be phased in over time, or do all of the desired features have to be built immediately?

 Budget
 How much money has been allocated to the project, and how was that number derived?
 Is there enough in the budget to hire additional staff if the deadline is too tight?
 Can the project be outsourced in part or entirety?

 Resources
 Does the organization have the right mix of skills internally to deliver the project as
specified?
 Does it have enough of each type of skill given the timetable that has been laid out?
 Are these resources available, or could the resources needed be pulled off another
project—and what is the relative importance of this project to the organization versus
the other project?
 9-5
Process for Building a Website

Strategy Formulation

User Experience Definition

Architecture Design Process

Implementation

Test/Fix

Launch
 9-6
Process for Building a Website from Scratch

 Important characteristics that need to be known or in place:

 A well defined set of business objectives for the site

 Executive support
 A general definition of the audience segments
 A clearly articulated project plan
 A brief definition and description of the relevant branding systems
 A competitive analysis for the industry and the product/service offered by
the site
 a budget
 development resources
 a navigation committee of senior (stakeholders and executives )
 9-7
Process for Building a Site from Scratch (cont’d)

 User Experience
 refers to how a user perceives and interprets the website

 Functional Specification
 provides a highly detailed guide to what every page on the website does

 Change-management Process
 a framework for identifying problems within the project
 software bugs or a change in site requirements
 prioritizing these problems, assigning the task of resolving these problems, and tracking the
progress of the tasks until all problems are resolved

 Project Plan
 Lays out the checkpoints, milestones, and resources that are expected to be
required to move the project forward to completion
 9-8
Process for Building a Site from Scratch (cont’d)

Discipline Areas key include:

 Business Strategy
 Functional/subject-matter expertise
 Information architecture
 Content development/writing
 Visual design
 Interface design
 Technical architecture
 Database administration
 Data modeling
 Technical development
 Quality assurance team lead
 Quality assurance testing
 9-9
Project Plan
ID Task Name Duration Mar 31, '02 Apr 28, '02 May 26, '02 Jun 23, '02 Jul 21, '02 Aug 18, '02 Sep 15, '02 Oct 13, '02 Nov 10, '02 Dec 8, '02 Jan 5, '03 Feb 2, '03
2 13 24 5 16 27 7 18 29 10 21 1 12 23 3 14 25 6 17 28 8 19 30 11 22 2 13 24 4 15
1 [Link] Version 1.0 145 days?
2 User Experience Definition 70 days?
3 Audience Definition 45 days
4 ID initial audience groups 5 days
5 Brainstorm user intentions 5 days
6 Brainstorm features / functions to satisfy intentions 5 days
7 Test assumptions on intentions 5 days
8 Test assumptions on features / functions 5 days
9 Build user personea guides 10 days
10 Develop Functional Matrix 10 days
11 Develop Audience Definition Findings Document 10 days
12 Functional Definition 25 days
13 Create Functional Matrix 10 days
14 Process Flows 5 days
15 Site Architecture 10 days
16 Nav Model 2 days
17 Directory Structure 2 days
18 Page inventory 2 days
19 Content Matrix 5 days
20 Page Schematics 10 days
21 Visual Definition 30 days?
22 Gather Interface Development Requirements 15 days
23 Develop Interface Findings Document 5 days?
24 Develop Visual Identity System 2 wks
25 Develop Style Guide 2 wks
26 Architecture Design Process 85 days
27 Technical Discovery and Definition 80 days
28 Existing Technology Discovery 10 days
29 Gather Technical Development Requirements 10 days
30 Development Environment Setup 1 wk
31 Live Environment Setup 1 wk
32 Implementation 45 days
33 Findings Validation 1 wk
34 Visual Design Development 2 wks
35 Interface Development 4 wks
36 Application Development 8 wks
37 Testing 65 days
38 Unit Testing 8 wks
39 Component Integration Testing 5 days
40 UI Integration Testing 5 days
41 Integration Testing 5 days
42 Systems Testing 5 days
43 Performance and Stress Testing 5 days
44 Go Live 5 days
 9-10
User Experience Identification

By developing the online offering through:

 Identifying the scope of the offering
 Identifying the customer decision process
 Mapping the offering to this decision process
User types
 Discrete types of users who will use the site as employee, customers, partners,
vendors, interested parties
User intentions
 what tasks users want to accomplish when they visit the site
User personas
 Fictitious, representative examples of real users that allow the development
team to focus on the collective core needs of the users within a group
 User intention matrix + user profile  user persona
Use case
 Describes how a user and a system interact to accomplish a specific goal,
typically a step-by-step guide describing all the actions that the user takes, and
what the system does in return
 9-11
User Profile
User Profile: Cindy the College Student

Personal Profile
Age: 20

Education: 4 years of high school

Car: Saturn SC1

Old Navy, Starbucks, Abercrombie and Fitch,
Shops at: Gap, Newbury Comics, Tower Records

Occupation
Job: Full-Time Student
Company Size N/A
Company Industry: N/A
Typical Task on [Link]: Product Research and Purchase
Familiarity with Acme: Somewhat familiar: Cindy has seen Acme's
adds, and a few of her friends have computers
from Acme.
Usage Scenario Description: Cindy needs a computer, but is uncertain as to
what her options are—she is a bit afraid of the
whole process, to be honest. Her parents have
agreed to buy her a computer, but have told her
that she needs to do the research.
Reason for choosing to work with
Acme: Recommendations from her friends, cool-looking
computers, good price, and Acme appears to be
an easy, no-pressure company to buy from—a
company that will take care of her.
Desired Experience: Cindy wants to be able to research her computer
options, understand the pros and cons, and buy
a computer.
But, she wants to buy a computer that is at least
as cool as her friends‘ computers, so she would like to be
able to make a case to her parents for a slightly
better computer than what she might actually
need.
When she decides what to buy, she would like to
understand the financing options available to
her.
Key Points:
 9-12
Intentions Matrix
Needs Actions
Intentions Acme's business objectives
(Features and Functions) (user objectives)
Research and Buy a Computer
Cindy needs a computer, but is uncertain as to Get Product Information
Lookup Products Increase customer base
what her options are. She needs to be able to
show her parents the options that she has, and - General Product Information Learn the differences between products and product options Educate customer to better understand benefits of the technology
ideally let them purchase the computer for her. - Quick comparison of products
Upsell / Crosssell customers into new products / peripherals
- Upgrade and Accessory information Leverage user's circle of community to advertise Acme
Research the Technology
- System to explain what the system pieces are
and how they compare to each other
- Have products suggested based on needs Have a product suggested to her based on her needs

Pick the System Show friends what system she is getting

Show parent's 2-3 systems and have them buy one - pursuade them to
- Pick a solution(s)
buy the better machine
- configure / customize the system
- Store picked solutions for viewing later / sharing
to parents / friends
- Allow friends/parents to vote on system if she
can't make up her mind
Buy the System Buy the best system she can get
- Send Parents to her customized computer to
have them buy it on her behalf
Check Purchase Status

t - knowledge base, documentation, troubleshooting wizard, live csr

contact information

customer service - rma, swap parts

 9-13
Functional Matrix vs. Functional Specification

•Discrete set of functions represents functional matrix

Functional Matrix Purpose:

–Define project scope, used to build project plan
–Communication with executives, project team, any
external contractors
–Track enhancements as they are discovered during
development
–Plan future release functionality—by priority
 vs. Functional Specification
9-14
Functional Matrix

• Indicates & details how functions proceeds &

what entities interact with that function
Functional Specification Purpose:
– Provide detailed design of system processes and pages
– Provide details of the life cycle of different objects (search,
payments, etc.)
– Defines the details of each page (list of fields on a page, their
validation requirements, their data sources)
– Defines all actions on each page (save shopping cart, send e-
mail, update account, checkout)
 9-15
Content matrix

 Composed of
 Screens required to satisfy the use case

 Content required for each screen

 9-16
Architecture Design Process

 At this point the team needs to generate the next set of

important documents:
Site Map:
 Typically a hierarchical view of the proposed website and
encompasses all the primary pages, or templates, to be
developed.
 Allows the development team to logically group content into
content areas and to understand how different content types
relate and link to one another
 The challenge is to develop a navigation system that is
meaningful to the user and also fits within the visual design of
the site
 9-17
Architecture Design Process

 Page Schematics:

 Simple drawings or diagrams that serve as a

conceptual layout for what each page on the
site will look like

 The schematic provides the team with a way

to brainstorm how and where certain
functionality and content will appear on a
particular page
 9-18
Sample Site Map
 9-19
Page Schematic
 9-20
Technical Discovery

 A core technical team begins to define the technical

environment, goals & vision of the project.
 The technology vision is strongly informed and
structured by many elements including business
objectives for the site
 User persona
 Existing technology
 Internal skill set
 User intentions
 Time and budget
 Traffic
 Uptime requirements
 Security requirements
 9-21
Technology Discovery (cont’d)

 Technology summary document should detail the

following:
 Existing corporate systems, including relevant back-end
systems and databases
 How the proposed site differs from those of the
company’s competitors
 Conceptual technical architecture to support the site
 An analysis of and recommendations for the software
components to be used during the development process
 Experience Definition and Architecture 9-22

Design Outputs

 At this point, the development team should be

able to create the following outputs:
 User experience and functional definition document
 User type definition document
 User intentions definition document
 User persona definition document
 Functionality matrix
 Content matrix
 Use cases
 Site map
 Page schematics
 9-23
Implementation

 Validation of design
 Finalize the visual design of the site through iterative process

 Test the design & navigation system in a limited fashion by creating

a functioning prototype

Build Phase
 First team must set up appropriate development environment
 Is a set of four activities
 Back-end development
 Creation of DB
 Interface development
 Production of HTML pages & other interface technologies
 Interactive development
 Development of imagery, artwork, sound & video
 Content development
 9-24

Implementation (cont’d)

Build Phase
 Is a set of simple steps:
 Design the technical infrastructure
 Design the technical components so that they will be both flexible
and extensible
 Build the components (both visual and functional) that will make up
the website
 Integrate those components so that they work together as expected
 Test those components, both individually and after they have been
integrated
 Refine the system & components based on these tests
 Launch the website
 9-25
Implementation (cont’d)

Development Environment
 Deciding which language should be used is guided by a number of
factors:
 Available skills

 Skills of developers
 Portability

 Use of open source environment or not

 Scalability/enterprise features

 Depends on the developed system & how much is the website

complexity
 Cost

 Hw, SW, training & support

 9-26
Implementation (cont’d)

Page Design

 Unique pages
 pages that have a design that is different from any other page on the
site

 Template pages
 the design and layout of these pages are repeated more than once,
usually on a section of the site that has multiple pages of similar
content (e.g., press releases)
 9-27
Implementation (cont’d)

Interface Development
 The choice of which technologies to implement within an interface is
difficult because not all pages require the same set of functionality or
deliver the same type of information

 The success of an interface is determined by whether its users are

successful in getting the information they need and understanding
the information that is presented to them
 9-28
Implementation (cont’d)

Application Development
 The application development is shaped by the functionality matrix and
the functional specification

 The team creates modules that meet all the capabilities the website
needs to have
 9-29
Test/Fix

 Most 2 important aspects in developing are

 Proper documentation

 Test the code

 Testing starts by developing test scripts

 Use case  specifies functions

 Test scripts intermediate processing to achieve the specified

function
 9-30
Test/Fix

 Steps in the testing process:

 Unit testing
 Coded is tested in isolation & in high ideal condition

 Integration testing
 Tests how individual functionality modules work with one another
and with visual interface system
 When bugs are detected, they are called open (not fixed),
after fixing they are called closed
 Systems testing
 Load testing
 9-31
Number of Bugs Over Testing Days

Bugs

160

140

120

100
Bugs

80 Bugs

60

40

20

0
1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 33 35 37 39 41 43 45 47 49 51 53 55 57 59
Days
 9-32
Launch

 Basic issues that need to be solved before launching a site:

 A hosting facility/ISP must be selected
 The servers must be built and tested
 The connectivity of the site must be tested
 The security of the overall system must be audited
 Then Go live starts by
 Approving site version
 Publishing it on server within the hosting environment