Design pitch deck for client based in China.

1. THE WEB DESIGN PROCESS
A STRATEGY FOR SUCCESS
Shay Howe
TechWeek, July 2011
www.shayhowe.com – @letscounthedays

2. The Web Design Process: A Strategy for Success
SHAY HOWE
www.shayhowe.com – @letscounthedays
@letscounthedays

3. The Web Design Process: A Strategy for Success
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

4. The Web Design Process: A Strategy for Success @letscounthedays

5. The Web Design Process: A Strategy for Success
DISCOVERY
Project Definition & Brief
@letscounthedays

6. The Web Design Process: A Strategy for Success
Phase 1: Discovery
HAVE A PURPOSE
• Cover the five W’s and one H
• Define the primary message
• Outline any objectives
@letscounthedays

7. The Web Design Process: A Strategy for Success
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

8. The Web Design Process: A Strategy for Success
Phase 1: Discovery
EVALUATE EXISTING WEBSITE
• Most and least effective aspects
• Learn from your mistakes
@letscounthedays

9. The Web Design Process: A Strategy for Success
Phase 1: Discovery
FIND WHAT USERS WANT
• Research your users
• Observe analytics
@letscounthedays

10. The Web Design Process: A Strategy for Success
Phase 1: Discovery
RESEARCH THE COMPETITION
• What are competitors doing well
• What are competitors doing poorly
• Learn from their mistakes
@letscounthedays

11. The Web Design Process: A Strategy for Success
Phase 1: Discovery
INTERVIEW STAKEHOLDER
• Understand real needs and objectives
• Make others feel involved and motivated
• Avoid design by committee
@letscounthedays

12. The Web Design Process: A Strategy for Success
Phase 1: Discovery
OUTLINE INITIAL TECH SPECS
• Gather all requirement
• Avoid any surprises
• Know any limitations
@letscounthedays

13. The Web Design Process: A Strategy for Success
Phase 1: Discovery
COLLABORATE AND LISTEN
• Listen, listen, listen
• Value other’s opinions
• Work as a team
@letscounthedays

14. The Web Design Process: A Strategy for Success
PLAN
Information Architecture & Strategy
@letscounthedays

15. The Web Design Process: A Strategy for Success
Phase 2: Plan
DEFINE A TIMELINE
• Put the project into realization
• Set expectations
@letscounthedays

16. The Web Design Process: A Strategy for Success
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

17. The Web Design Process: A Strategy for Success
Phase 2: Plan
DETERMINE THE STRUCTURE
• Outline all pages
• Diagram the page hierarchy
• Build a visual representation
@letscounthedays

18. The Web Design Process: A Strategy for Success @letscounthedays

19. The Web Design Process: A Strategy for Success
Phase 2: Plan
DIAGRAM PAGE FLOWS
• Determine content needs and priority
• Diagram how content should correlate
• Create an intuitive flow
@letscounthedays

20. The Web Design Process: A Strategy for Success
Phase 2: Plan
MAKE CONTENT RELATIONSHIPS
• Outline overall messaging
• Illustrate page connections
• Start writing
@letscounthedays

21. The Web Design Process: A Strategy for Success
Phase 2: Plan
PROTOTYPE WIREFRAMES
• Organize your layout
• Make intuitive decisions
• Tie in information architecture
@letscounthedays

22. The Web Design Process: A Strategy for Success @letscounthedays

23. The Web Design Process: A Strategy for Success
Phase 2: Plan
PERFORM USABILITY TEST
• Gather meaningful feedback
• Help eliminate potential flaws
• Study similar case
• Make continued refinements
@letscounthedays

24. The Web Design Process: A Strategy for Success
Phase 2: Plan
SET A MAINTENANCE PLAN
• Who takes the reigns once live
• Make a content creation schedule
• Schedule monthly reviews
@letscounthedays

25. The Web Design Process: A Strategy for Success
DESIGN
Web & User Interface Design
@letscounthedays

26. The Web Design Process: A Strategy for Success
Phase 3: Design
BRAINSTORM CREATIVE CONCEPTS
• Brainstorm the look and feel
• Concept graphic design elements
• Align creative ideas
@letscounthedays

27. The Web Design Process: A Strategy for Success @letscounthedays

28. The Web Design Process: A Strategy for Success
Phase 3: Design
DESIGN THE VISUAL LAYOUT
• Begin putting together the puzzle
• Obtain feedback and refine
• Remember responsive designs
@letscounthedays

29. The Web Design Process: A Strategy for Success @letscounthedays

30. The Web Design Process: A Strategy for Success
Phase 3: Design
FOLLOW DESIGN PRINCIPLES
• Stay focused
• Remember the little things
@letscounthedays

31. The Web Design Process: A Strategy for Success
Phase 3: Design
KEEP BRAND IDENTITY
• Refresh the brand
• Fulfill brand development
• Do not stretch the brand
@letscounthedays

32. The Web Design Process: A Strategy for Success
Phase 3: Design
REMEMBER ASSET CREATION
• Cover your tracks
• Think down the road
@letscounthedays

33. The Web Design Process: A Strategy for Success
Phase 3: Design
OBTAIN FEEDBACK AND REVISE
• Pull stakeholders back in
• Catch missed deficiencies
• Regroup and revise
@letscounthedays

34. The Web Design Process: A Strategy for Success @letscounthedays

35. The Web Design Process: A Strategy for Success
Phase 3: Design
PERFORM USABILITY TEST
• Additional feedback
• Help eliminate potential flaws
• Make continued refinements
@letscounthedays

36. The Web Design Process: A Strategy for Success
Phase 3: Design
CREATE A STYLE GUIDE
• Outline brand guidelines
• Use as an ongoing resource
• Keep guidelines update to date
@letscounthedays

37. The Web Design Process: A Strategy for Success
DEVELOP
Coding & Development
@letscounthedays

38. The Web Design Process: A Strategy for Success
Phase 4: Develop
CODE HTML/CSS MARKUP
• Develop core shell
• Follow web standards and semantics
• Keep the code in order
@letscounthedays

39. The Web Design Process: A Strategy for Success @letscounthedays

40. The Web Design Process: A Strategy for Success
Phase 4: Develop
DEVELOP ANY APPLICATIONS
• Easier said than done
• Plan ahead
• Stay agile
@letscounthedays

41. The Web Design Process: A Strategy for Success
Phase 4: Develop
ADD 3RD PARTY INTEGRATION
• Add in any 3rd party integration
• Make good documentation
• Run quality test
• Stay up to date
@letscounthedays

42. The Web Design Process: A Strategy for Success
Phase 4: Develop
SUPPORT RESPONSIVE DESIGN
• Account for different screen sizes
• Follow responsive layouts
• Make it convenient
@letscounthedays

43. The Web Design Process: A Strategy for Success
Phase 4: Develop
TEST AND VALIDATE CODE
• Test multiple browsers
• Test different data sets
• Validate and fix errors
@letscounthedays

44. The Web Design Process: A Strategy for Success @letscounthedays

45. The Web Design Process: A Strategy for Success
Phase 4: Develop
SET UP HOSTING AND LAUNCH
• Follow tech specs
• Set up proper configuration
• Deploy live version
• Check for hick-ups
@letscounthedays

46. The Web Design Process: A Strategy for Success
LAUNCH
Deploy & Grow
@letscounthedays

47. The Web Design Process: A Strategy for Success
Phase 5: Launch
TRAIN WEBSITE MANAGERS
• Provide the best training
• Answer all questions
• Cover any platforms necessary
• Provide future references
@letscounthedays

48. The Web Design Process: A Strategy for Success
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

49. The Web Design Process: A Strategy for Success
Phase 5: Launch
START MARKETING
• Try different marketing methods
• Find what works best
• Experiment with marketing methods
@letscounthedays

50. The Web Design Process: A Strategy for Success
Phase 5: Launch
MEASURE PROGRESS
• Continually watch analytics
• How do you compare to the past
• How are you trending
• Always work to improve
@letscounthedays

51. The Web Design Process: A Strategy for Success
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

52. The Web Design Process: A Strategy for Success
QUESTIONS?
Thank you!
@letscounthedays