web development process - updated!

Travis Whyte

Whytespace Ltd.

Presentation Outline

I. Whytespace, an IntroductionII. Our Web Design & Development Process

I. Whytespace, an Introduction

The evolution of a local web design & development company

History of Whytespace

Travis Whyte:• 1999 B.Sc. Chemistry (Physics/Astronomy)

Kings University College• Built my final research project as a website

• 2001 M.Ed. Instructional TechnologiesUniversity of Alberta

• Researched effective web design• Learned about process development


• Educational Media Technologies 2001 – 2004 Sole Proprietor

• Canadian Space Agency• Canadian Astronomical Society• LearnAlberta.ca (Gov. Alberta)• Small web projects on the side

• New Media Solutions 2004 – 2005 Partnered with a Comp. Sci. grad

• Needed developer experience• Started building & hosting websites


• April 2005 Partnership Dissolved• Reinventing the wheel, not servicing clients• Financial instability• Conflicting visions• Separation of clients and Code

• July 2005 Incorporated Whytespace Ltd.• Travis & Sarah Whyte• Old clients, New vision• How do we create a Great Company?

Powered by:www.whytespace.ca

Whytespace’s Hedgehog

Best at:Teams & Processes

Economic:Website

Development &Hosting

Passion:Client-Focused

Customer Service

Dynamic Portal Websites

Dynamic Portal Websitesare websites custom designed and built on a Content Management System (CMS) framework that allows us to pass control of the website to our clients.

Assembling a Team

• Employees– Travis President & PM

– Sarah Director of Design

– Jordan Lead Developer

– James Junior Developer

– Joel Graphic Artist

– Angie Graphic Artist

– Carla Bookkeeper

• Contractors– Bubble Up Marketing– Solid Technology Solutions– E-Commerce Developer– Flash Developer

• Getting people in the right seats

2. Website Design & Development Processes

Process Outlined

Whytespace Web Development Process

1. Environmental Scan2. Content3. Design & Development4. Assembly5. Testing & Pre-Launch6. Launch Day & Follow-Up


1. Environmental Scan– Website consulting– Orientation to the client– Business analysis– Estimate & Quote– Proposal preparation

1. Environmental Scan

a. Domain name– .ca vs .com– Business name, acronym, or other

b. Marketing materials– Logos, brochures, graphics, business plan

c. Industry– Competitors, partners, organizations

d. Website goals– Short term, long term

e. Need email?– Number of accounts, groupware

1. Environmental Scan

f. Type of website?– Static site (developer develops and developer required for all updates)

• Splash page• Brochure site• Hosting anywhere (Whytespace, TELUS, Shaw, etc.)

– Portal site (developer develops and client does updates themselves)

• Content Management System (CMS)– Easily control content– One-time management

• Interaction (do something)– Modules

» Forums, blogs, feedback, gallery, e-com

• Whytespace hosting only


2. Content– Who’s responsibility is it?– Organization, information architecture– Content & Design closely related• Content should be considered preliminary• Design the content

2. Content

a. Writing– Consulting with client– Client research and writing

b. Organization– Topics, sections and pages– Entry points– Flow & Leading and guiding

c. Sitemap– Later helps the developer


3. Design & Development (Programming)– Let the professionals do the work – Designers work directly with the clients• No miss-communications

– Designers in close contact with Developers

3. Design & Development

3a. Design– Graphics Research (stock photos, new pictures)– Design Samples– Layout– White-space, how much text– Design Comp (comprehensive layout)

Side Bar: Tien Lung

A lesson in patience & perseverance

3. Design & Development

3b. Development– Source code installed– Website setup and configured– Blank pages created– Modules installed & configured– Website skeleton – Alpha– Custom development


4. Assembly– Design and Development comes together• Designing the content

– Close interaction with clients– New content added– Custom modules configured

4. Assembly

a. Website skin (template)– Bring comps alive

b. Content migration & new content insertion– Important to have approved content

c. Graphics to complement content– Stock photos & client photos

d. Page linking and organization– Visitor flow

e. Culminates with Beta Launch


5. Testing & Pre-Launch– Starts with Beta launch – Testing is important– Specific & Structured feedback is helpful

http://browsershots.org/




5. Testing & Launch

a. Beta-launch– Testing and feedback

b. Presentation– Website is made available via temp web address– Email feedback and changes

c. Training– Introduction to CMS, modules

– Website user guide, client does updates themselves

d. Live Launch – Google Analytics installed– Website connected to the domain (DNS)– Website submitted to search engines (Web Master Tools)

e. Email configured


6. Launch Day & Follow-Up– Important to finish strong– Initial support is key– Long-term relationship are formed– Friday launch days

6. Launch Day & Follow-Up

a. Day of the launch– Sign-Off email & Invoice

b. One Week later– Email check-in– Site analytics (Google, other)• Page popularity, entry points, user flow, bandwidth

c. Two to Six Months later– Review analytics– Site growth plan– Referral to SEO company

II. Website Design & Development Process

Flow Chart, for the visual learner

Whytespace Ltd.

Find us Onlinewww.whytespace.cawww.twitter.com/whytespace

http://www.whytespace.ca/

http://www.twitter.com/whytespace