Transcript Document

9-1
9-2
Chapter 9
Website
Development
Process
McGraw-Hill/Irwin
Copyright © 2004 by The McGraw-Hill Companies, Inc. All rights reserved.
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.
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
Exhibit 9-1: 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 aspects 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 succinct 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 steering 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 (e.g., 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 to successful site
development 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
9-10
Exhibit 9-2: Project Plan
ID
Task Name
Duration
1
Acme.com Version 1.0
145 days?
2
3
User Experience Definition
Audience Definition
70 days?
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
9
Build user personea guides
10 days
10
Develop Functional Matrix
10 days
11
Develop Audience Definition Findings Document
12
Functional Definition
5 days
10 days
25 days
13
Create Functional Matrix
14
Process Flows
15
Site Architecture
16
Nav Model
2 days
17
Directory Structure
2 days
18
Page inventory
2 days
19
Content Matrix
20
Page Schematics
21
Visual Definition
10 days
5 days
10 days
5 days
10 days
30 days?
22
Gather Interface Development Requirements
15 days
23
Develop Interface Findings Document
5 days?
24
Develop Visual Identity System
25
Develop Style Guide
2 wks
26
Architecture Design Process
85 days
2 wks
27
Technical Discov ery and Definition
80 days
28
Existing Technology Discovery
10 days
29
Gather Technical Development Requirements
10 days
30
Development Environment Setup
31
Live Environment Setup
32
Implementation
1 wk
1 wk
45 days
33
Findings Validation
34
Visual Design Development
2 wks
35
Interface Development
4 wks
36
Application Development
37
Testing
1 wk
8 wks
65 days
38
Unit Testing
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
8 wks
5 days
Mar 31, '02
2
13
Apr 28, '02
May 26, '02
24
5
16
27
7
Jun 23, '02
18
29
10
Jul 21, '02
21
1
Aug 18, '02
12
23
3
Sep 15, '02
14
25
6
Oct 13, '02
17
28
Nov 10, '02
8
19
30
Dec 8, '02
11
22
Jan 5, '03
2
13
24
Feb 2, '03
4
15
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
The following can be defined:
User types: The discrete types of users who
will use the site
User intentions: What tasks users want to accomplish when they
visit the site
User personas: Fictitious, archetypal examples of real users that
allow the development team to focus on the collective core
needs of the users within a group
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
Exhibit 9-3: User Profile
User Profile: Cindy the College Student
Personal Profile
Age:
Education:
Car:
Shops at:
20
4 years of high school
Saturn SC1
Old Navy, Starbucks, Abercrombie and Fitch,
Gap, Newbury Comics, Tower Records
Occupation
Job:
Full-Time Student
Company Size
N/A
Company Industry:
N/A
Typical Task on Acme.com:
Familiarity with Acme:
Usage Scenario Description:
Reason for choosing to work with
Acme:
Product Research and Purchase
Somewhat familiar: Cindy has seen Acme's
adds, and a few of her friends have computers
from Acme.
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.
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.
Cindy wants to be able to research her computer
Desired Experience:
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
Exhibit 9-4: Intentions Matrix
Intentions
Needs
(Features and Functions)
Actions
(user objectives)
9-13
Acme's business objectives
Research and Buy a Computer
Cindy needs a computer, but is uncertain as to
Lookup Products
what her options are. She needs to be able to
show her parents the options that she has, and - General Product Information
ideally let them purchase the computer for her. - Quick comparison of products
Get Product Information
Increase customer base
Learn the differences between products and product options
Educate customer to better understand benefits of the technology
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
- Pick a solution(s)
Show parent's 2-3 systems and have them buy one - pursuade them to
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
- 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
Buy the best system she can get
Exhibit 9-5: Functional Matrix vs.
Functional Specification
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
9-14
Exhibit 9-5: Functional Matrix vs.
Functional Specification (cont’d)
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
Architecture Design Process
At this point the team needs to generate the next set of important
documents:
The 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
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-16
Exhibit 9-6: Sample Site Map
9-17
Exhibit 9-7: Page Schematic
9-18
Technical Discovery
• The technology vision is strongly informed
and structured by many elements, including
the following:
–
–
–
–
–
–
–
–
–
The business objectives for the site
User persona
Existing technology
Internal skill set
User intentions
Time and budget
Traffic
Uptime requirements
Security requirements
9-19
Technology Discovery (cont’d)
• The 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
9-20
Experience Definition and Architecture
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-21
Implementation
• Validation
– Finalize the visual design of the site
– Create a functioning prototype
9-22
Implementation (cont’d)
Build Phase
• The building process boils down to some very 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 and components based on these tests
– Launch the website
9-23
Implementation (cont’d)
Development Environment
• Deciding which language should be used is guided
by a number of factors:
– Available skills
– Portability
– Scalability/enterprise features
– Cost
9-24
Implementation (cont’d)
Page Design
• Unique pages: are 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-25
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-26
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-27
Test/Fix
Steps in the testing process:
•
•
•
•
Unit testing
Integration testing
Systems testing
Load testing
9-28
Exhibit 9-8: Number of Bugs Over
Testing Days
9-29
Bugs
160
140
120
Bugs
100
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
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
9-30