the web design process: a strategy for success

THE WEB DESIGN PROCESSA STRATEGY FOR SUCCESS

Shay HoweTechWeek, July 2011www.shayhowe.com – @letscounthedays

http://www.shayhowe.com


The Web Design Process: A Strategy for Success

SHAY HOWEwww.shayhowe.com – @letscounthedays

@letscounthedays




THE FIVE PHASE APPROACH

1. Discovery Project Definition & Brief

2. Plan Information Architecture & Strategy

3. Design Web & User Interface Design

4. Develop Coding & Development

5. Launch Deploy & Grow

@letscounthedays

The Web Design Process: A Strategy for Success @letscounthedays


DISCOVERYProject Definition & Brief

@letscounthedays


Phase 1: Discovery

HAVE A PURPOSE

• Cover the five W’s and one H

• Define the primary message

• Outline any objectives

@letscounthedays


Phase 1: Discovery

SET GOALS

• Set short and long term goals

• Set on site and off site goals

• Increase motivation

• Provide a metric for success

@letscounthedays


Phase 1: Discovery

EVALUATE EXISTING WEBSITE

• Most and least effective aspects

• Learn from your mistakes

@letscounthedays


Phase 1: Discovery

FIND WHAT USERS WANT

• Research your users

• Observe analytics

@letscounthedays


Phase 1: Discovery

RESEARCH THE COMPETITION

• What are competitors doing well

• What are competitors doing poorly

• Learn from their mistakes

@letscounthedays


Phase 1: Discovery

INTERVIEW STAKEHOLDER

• Understand real needs and objectives

• Make others feel involved and motivated

• Avoid design by committee

@letscounthedays


Phase 1: Discovery

OUTLINE INITIAL TECH SPECS

• Gather all requirement

• Avoid any surprises

• Know any limitations

@letscounthedays


Phase 1: Discovery

COLLABORATE AND LISTEN

• Listen, listen, listen

• Value other’s opinions

• Work as a team

@letscounthedays


PLANInformation Architecture & Strategy

@letscounthedays


Phase 2: Plan

DEFINE A TIMELINE

• Put the project into realization

• Set expectations

@letscounthedays


Phase 2: Plan

OUTLINE RESPONSIBILITIES

• Outline the project work flow

• Who is responsible for what

• What approvals are needed

• How will deliverables be handled

@letscounthedays


Phase 2: Plan

DETERMINE THE STRUCTURE

• Outline all pages

• Diagram the page hierarchy

• Build a visual representation

@letscounthedays


Phase 2: Plan

DIAGRAM PAGE FLOWS

• Determine content needs and priority

• Diagram how content should correlate

• Create an intuitive flow

@letscounthedays


Phase 2: Plan

MAKE CONTENT RELATIONSHIPS

• Outline overall messaging

• Illustrate page connections

• Start writing

@letscounthedays


Phase 2: Plan

PROTOTYPE WIREFRAMES

• Organize your layout

• Make intuitive decisions

• Tie in information architecture

@letscounthedays


Phase 2: Plan

PERFORM USABILITY TEST

• Gather meaningful feedback

• Help eliminate potential flaws

• Study similar case

• Make continued refinements

@letscounthedays


Phase 2: Plan

SET A MAINTENANCE PLAN

• Who takes the reigns once live

• Make a content creation schedule

• Schedule monthly reviews

@letscounthedays


DESIGNWeb & User Interface Design

@letscounthedays


Phase 3: Design

BRAINSTORM CREATIVE CONCEPTS

• Brainstorm the look and feel

• Concept graphic design elements

• Align creative ideas

@letscounthedays


Phase 3: Design

DESIGN THE VISUAL LAYOUT

• Begin putting together the puzzle

• Obtain feedback and refine

• Remember responsive designs

@letscounthedays


Phase 3: Design

FOLLOW DESIGN PRINCIPLES

• Stay focused

• Remember the little things

@letscounthedays


Phase 3: Design

KEEP BRAND IDENTITY

• Refresh the brand

• Fulfill brand development

• Do not stretch the brand

@letscounthedays


Phase 3: Design

REMEMBER ASSET CREATION

• Cover your tracks

• Think down the road

@letscounthedays


Phase 3: Design

OBTAIN FEEDBACK AND REVISE

• Pull stakeholders back in

• Catch missed deficiencies

• Regroup and revise

@letscounthedays


Phase 3: Design

PERFORM USABILITY TEST

• Additional feedback

• Help eliminate potential flaws

• Make continued refinements

@letscounthedays


Phase 3: Design

CREATE A STYLE GUIDE

• Outline brand guidelines

• Use as an ongoing resource

• Keep guidelines update to date

@letscounthedays


DEVELOPCoding & Development

@letscounthedays


Phase 4: Develop

CODE HTML/CSS MARKUP

• Develop core shell

• Follow web standards and semantics

• Keep the code in order

@letscounthedays


Phase 4: Develop

DEVELOP ANY APPLICATIONS

• Easier said than done

• Plan ahead

• Stay agile

@letscounthedays


Phase 4: Develop

ADD 3RD PARTY INTEGRATION

• Add in any 3rd party integration

• Make good documentation

• Run quality test

• Stay up to date

@letscounthedays


Phase 4: Develop

SUPPORT RESPONSIVE DESIGN

• Account for different screen sizes

• Follow responsive layouts

• Make it convenient

@letscounthedays


Phase 4: Develop

TEST AND VALIDATE CODE

• Test multiple browsers

• Test different data sets

• Validate and fix errors

@letscounthedays


Phase 4: Develop

SET UP HOSTING AND LAUNCH

• Follow tech specs

• Set up proper configuration

• Deploy live version

• Check for hick-ups

@letscounthedays


LAUNCHDeploy & Grow

@letscounthedays


Phase 5: Launch

TRAIN WEBSITE MANAGERS

• Provide the best training

• Answer all questions

• Cover any platforms necessary

• Provide future references

@letscounthedays


Phase 5: Launch

MAINTAIN THE WEBSITE

• Evolve the website, do not revolve it

• Keep content up to date

• Use content schedules

• Grow the overall strategy

@letscounthedays


Phase 5: Launch

START MARKETING

• Try different marketing methods

• Find what works best

• Experiment with marketing methods

@letscounthedays


Phase 5: Launch

MEASURE PROGRESS

• Continually watch analytics

• How do you compare to the past

• How are you trending

• Always work to improve

@letscounthedays


IN REVIEW

1. Discovery Project Definition & Brief

2. Plan Information Architecture & Strategy

3. Design Web & User Interface Design

4. Develop Coding & Development

5. Launch Deploy & Grow

@letscounthedays


QUESTIONS?Thank you!

@letscounthedays

the web design process: a strategy for success

Design

mistakesthe web design

writingthe web design

teamthe web design process

revisethe web design

successthe web design

brandthe web design

handledthe web design

roadthe web design process