Sie sind auf Seite 1von 35

9-1 1-1

9-2 1-2

Chapter 9

Website Development Process


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 1-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

9-4 1-4

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-5 1-5

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?

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?

9-6 1-6

Three External Forces That Shape This Goal:

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 projectand what is the relative importance of this project to the organization versus the other project?

Exhibit 9-1: Process for Building a Website

Strategy Formulation

9-7 1-7

User Experience Definition

Architecture Design Process Implementation Test/Fix


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 brief definition and description of the relevant branding systems A competitive analysis for the industry and the product/service offered by the site

9-8 1-8

a budget
development resources a steering committee of senior stakeholders and executives

9-9 1-9

Process for Building a Site from Scratch (contd)

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-10 1-10

Process for Building a Site from Scratch (contd) 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

Exhibit 9-2: Project Plan

ID 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 Task Name Version 1.0 User Experience Definition Audience Definition ID initial audience groups Brainstorm user intentions Brainstorm f eatures / f unctions to satisf y intentions Test assumptions on intentions Test assumptions on f eatures / f unctions Build user personea guides Dev elop Functional Matrix Dev elop Audience Def inition Findings Document Functional Definition Create Functional Matrix Process Flows Site Architecture Nav Model Directory Structure Page inv entory Content Matrix Page Schematics Visual Definition Gather Interf ace Dev elopment Requirements Dev elop Interf ace Findings Document Dev elop Visual Identity Sy stem Dev elop Sty le Guide Architecture Design Process Technical Discovery and Definition Existing Technology Discov ery Gather Technical Dev elopment Requirements Dev elopment Env ironment Setup Liv e Env ironment Setup Implementation Findings Validation Visual Design Dev elopment Interf ace Dev elopment Application Dev elopment Testing Unit Testing Component Integration Testing UI Integration Testing Integration Testing Sy stems Testing Perf ormance and Stress Testing Go Liv e Duration 145 days? 70 days? 45 days 5 day s 5 day s 5 day s 5 day s 5 day s 10 day s 10 day s 10 day s 25 days 10 day s 5 day s 10 day s 2 day s 2 day s 2 day s 5 day s 10 day s 30 days? 15 day s 5 day s? 2 wks 2 wks 85 days 80 days 10 day s 10 day s 1 wk 1 wk 45 days 1 wk 2 wks 4 wks 8 wks 65 days 8 wks 5 day s 5 day s 5 day s 5 day s 5 day s 5 day s 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 Dec 8, '02 8 19 30 11 22 Jan 5, '03 2 13

9-11 1-11
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 User types

9-12 1-12

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 persona
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

Exhibit 9-3: User Profile

User Profile: Cindy the College Student

9-13 1-13

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

Job: Company Size Company Industry: Typical Task on Familiarity with Acme: from Acme. Usage Scenario Description: Cindy needs a computer, but is uncertain as to what her options areshe 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 froma company that will take care of her. 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: N/A N/A Product Research and Purchase Somewhat familiar: Cindy has seen Acme's adds, and a few of her friends have computers Full-Time Student

Desired Experience:

Exhibit 9-4: Intentions Matrix

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 - Upgrade and Accessory information Research the Technology - System to explain what the system pieces are and how they compare to each other - Have products suggested based on needs Pick the System - Pick a solution(s) - 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 Buy the best system she can get Have a product suggested to her based on her needs Show friends what system she is getting Show parent's 2-3 systems and have them buy one - pursuade them to buy the better machine Get Product Information Learn the differences between products and product options Increase customer base

9-14 1-14

Needs (Features and Functions)

Actions (user objectives)

Acme's business objectives

Educate customer to better understand benefits of the technology Upsell / Crosssell customers into new products / peripherals Leverage user's circle of community to advertise Acme

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

contact information

customer service - rma, swap parts

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 functionalityby priority

9-15 1-15

Functional Matrix vs. Functional Specification (contd) 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-16 1-16

Content matrix
Composed of
Screens required to satisfy the use case Content required for each screen

9-17 1-17

Architecture Design Process

At this point the team needs to generate the next set of important documents: Site Map:

9-18 1-18

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

Architecture Design Process

Page Schematics:

9-19 1-19

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

Exhibit 9-6: Sample Site Map

9-20 1-20

Exhibit 9-7: Page Schematic

9-21 1-21

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-22 1-22

Technology Discovery

9-23 1-23


Technology summary document should detail the following:

Existing corporate systems, including relevant backend systems and databases How the proposed site differs from those of the companys 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 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-24 1-24

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

9-25 1-25


9-26 1-26


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

Build Phase
Is a set of simple steps:

9-27 1-27


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

Development Environment

9-28 1-28


Deciding which language should be used is guided by a number of factors:

Available skills
Skills of developers

Use of open source environment or not

Scalability/enterprise features
Depends on the developed system & how much is the website complexity

Hw, SW, training & support

Page Design Unique pages

9-29 1-29


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)

Interface Development

9-30 1-30


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-31 1-31


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

Most 2 important aspects in developing are
Proper documentation Test the code

9-32 1-32

Testing starts by developing test scripts

Use case specifies functions Test scripts intermediate processing to achieve the specified function

Steps in the testing process:
Unit testing
Coded is tested in isolation & in high ideal condition

9-33 1-33

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

Exhibit 9-8: Number of Bugs Over Testing Days

Bugs 160 140 120 100

9-34 1-34

80 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


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-35 1-35

Then Go live starts by

Approving site version Publishing it on server within the hosting environment