Design Processes For Web Projects

7,064 views
6,901 views

Published on

Presentation by Peter Boersma about Design Processes for Web Projects, given at a meeting of the Dutch front-end developers club Fronteers.nl on January 11, 2010 in Amsterdam. Deals with business, strategy, project management, research, design and evaluation aspects of web projects.

Published in: Design, Technology, Business
0 Comments
42 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,064
On SlideShare
0
From Embeds
0
Number of Embeds
100
Actions
Shares
0
Downloads
0
Comments
0
Likes
42
Embeds 0
No embeds

No notes for slide

Design Processes For Web Projects

  1. 1. Design Processes for Web Projects Peter Boersma info . nl FULL SERVICE INTERNET AGENCY Fronteers.nl, January 11, Amsterdam
  2. 2. Peter Boersma (www.peterboersma.com) <ul><li>Senior Interaction Designer for Info.nl since February 2006. Responsible for the structure and interaction design of financial websites (banks, insurance, investments ), publishers websites (Reed, Kluwer, Dutch Yellow Pages) and interactive applications (MSN’s DaVinci Code game). </li></ul><ul><li>Before that : </li></ul><ul><li>1988-1995: Information Ergonomics, a combination of computer science and cognitive ergonomics at Twente Universiteit in The Netherlands. </li></ul><ul><li>1995-2002: User interface designer, project manager, consultant User Understanding andconcept designer for General Design/Satama Amsterdam. Designed many interactive websites, some mobile applications, intranets, extranets, for banks (ABN AMRO), government agencies (VenW, SVB), startups (Airmiles) and older companies (Audi, VEH), partly in Finland (Nokia). </li></ul><ul><li>2002-2005: Senior Information Architect for EzGov, a company that builds transactional online applications based on its own software platform. Many tax-related sites for the English government, plus several for the Jamaican government. </li></ul><ul><li>2005-2006: Managing Partner and Consultant User Experience for the user experience collective User Intelligence. Projects for Delta Lloyd, Port of Rotterdam, Transavia.com, the Irish Yellow Pages and Elsevier Science. </li></ul>
  3. 7. UCD Theory RESEARCH EVALUATE DESIGN
  4. 9. <ul><li>In theory, theory and practice are the same. In practice, they are not. </li></ul><ul><li>(Albert Einstein) </li></ul>
  5. 10. Theory =/= Practice
  6. 11. Practice prototype test user research launch pitch requirements RESEARCH EVALUATE DESIGN reviews estimate position document process review optimize scope trends roadmap scenarios promote quality teams
  7. 12. Practice prototype test user research launch estimate position pitch document process review requirements optimize scope trends roadmap scenarios BUSINESS MANAGE STRATEGY RESEARCH EVALUATE DESIGN promote quality teams reviews
  8. 13. Practice MANAGE STRATEGY RESEARCH EVALUATE DESIGN BUSINESS
  9. 15. Practice pitch BUSINESS optimize
  10. 22. Practice pitch BUSINESS optimize
  11. 24. Practice position trends roadmap scenarios STRATEGY
  12. 25. Strategy: Trends
  13. 26. Strategy: Positioning content sales community Core brand Big Competitor 2 Client 2011 Competitor Big Competitor 1 Compe-titor Comptetitor comptetitor subbrand BrandX Client
  14. 27. Strategy: Scenarios A B or client.com subsite-X.client.com subsite-Y.client.com client.com
  15. 28. Strategy: Roadmap
  16. 29. Practice position trends roadmap scenarios STRATEGY
  17. 30. Practice DESIGN RESEARCH EVALUATE
  18. 31. <ul><li>What </li></ul><ul><li>deliverable </li></ul><ul><li>is this? </li></ul>
  19. 33. <ul><li>Persona </li></ul>
  20. 35. <ul><li>Content Inventory </li></ul>
  21. 36. <ul><ul><li>based on motivations of real people </li></ul></ul><ul><ul><li>with interactive modules to discover products and personalise settings </li></ul></ul><ul><ul><li>with background info about products and processes </li></ul></ul><ul><ul><li>aimed at conversion: selling relevant products in a transparent way </li></ul></ul>Learn Play Buy Life Learn Play Buy Life
  22. 37. <ul><li>Concept Presentation </li></ul>
  23. 39. <ul><li>Wireframe </li></ul>
  24. 41. <ul><li>Moodboard </li></ul>
  25. 43. <ul><li>Visual Language </li></ul>
  26. 45. <ul><li>Usability Test Report </li></ul>
  27. 47. <ul><li>What </li></ul><ul><li>deliverable </li></ul><ul><li>is this? </li></ul>
  28. 48. Practice DESIGN RESEARCH EVALUATE
  29. 49. Practice pitch optimize BUSINESS
  30. 50. Business: Measure to Optimise Old online form - 1 step to fill out - 1 step to print - 1 thank-you page New online form - 1 step for customer Y/N - 4 steps to fill out the form - 1 step to print - 1 thank-you page 7.7% 20.3% conversion rate conversion rate
  31. 51. Business: Experiment to Optimise
  32. 52. Practice pitch optimize BUSINESS
  33. 53. Practice estimate document process requirements scope MANAGE quality teams reviews
  34. 54. Manage: Estimate
  35. 55. Estimate: input/output <ul><li>Input (when available) </li></ul><ul><li>Scope items </li></ul><ul><li>Requirements </li></ul><ul><li>Approach/process </li></ul><ul><li>Team skills </li></ul><ul><li>Experience with subject </li></ul><ul><li>Experience with client </li></ul><ul><li>Experience of client </li></ul><ul><li>Output (when possible) </li></ul><ul><li>Assumptions </li></ul><ul><li>Calculations </li></ul><ul><li>Explanations </li></ul><ul><li>Risks </li></ul>
  36. 56. Estimate: output <ul><li>Assuming: - we will need about 10 wireframes - (5 complex, 5 medium) - and 15 reusable components (all medium) </li></ul><ul><li>We calculate the interaction design: (5*16 + 5*12) + (15*12) = (80+60) + (180) = 320 hours </li></ul><ul><li>Note: This includes reviews and rework. </li></ul><ul><li>Risk: we don’t know who the developer is. </li></ul>
  37. 57. Manage: Focus in Scope hard easy essential contribution Quick wins Maintenance Winners Quality improvements Pick just a few of these!
  38. 58. Manage: Requirements <ul><li>Format: <stakeholderX> wants/can <Y> </li></ul>
  39. 60. Manage: Quality Use Cases  Test Scripts  Issues  Fixes Design & Implementation
  40. 61. Manage: Quality
  41. 62. Manage: Quality
  42. 63. Manage: Quality
  43. 64. Manage: Quality
  44. 65. Manage: Teams/skills
  45. 66. Manage : reviews Create Deliver
  46. 67. Manage : reviews Create Deliver Edit
  47. 68. Manage : reviews Edit Review Deliver Create
  48. 69. Manage : reviews Edit Deliver Review Prepare Review Technical Review Team Review Client Review Project Review designer designer’s senior project lead team reviewers responsible for signoff
  49. 70. Manage : reviews Edit Review Deliver Create
  50. 71. Manage : reviews Create Edit Project Approach Review Technical Approach Review Create Approach Review
  51. 72. Manage : reviews Edit Review Deliver Create
  52. 73. Manage : reviews Create Edit Project Evaluation Technical Evaluation Review Deliver
  53. 74. Manage : reviews Edit Review Deliver Approach Evaluate
  54. 75. Manage: Document Process
  55. 76. Very basic
  56. 81. somewhat complex
  57. 85. lists of deliverables
  58. 89. links between deliverables
  59. 93. beautiful diagrams
  60. 97. fully documented processes
  61. 101. Document your UCD process <ul><li>Brainstorm to get all candidate deliverables </li></ul><ul><li>Diagram deliverables and process </li></ul><ul><li>Describe (selected) deliverables and input/outputs </li></ul><ul><li>Present process to other departments </li></ul><ul><li>Improve process </li></ul><ul><li>Create templates for deliverables </li></ul><ul><li>Write instructions around deliverables and process </li></ul><ul><li>Improve process </li></ul><ul><li>Promote your process </li></ul><ul><li>Measure working with new deliverables en proces </li></ul><ul><li>Review ad nauseam , improve continually </li></ul>
  62. 102. Practice estimate document process requirements scope MANAGE quality teams reviews
  63. 103. UCD Practice prototype test user research launch estimate position pitch document process review requirements optimize scope trends roadmap scenarios BUSINESS MANAGE STRATEGY RESEARCH EVALUATE DESIGN promote
  64. 104. <ul><li>In theory, theory and practice are the same. In practice, they are not. </li></ul><ul><li>(Albert Einstein) </li></ul>
  65. 105. <ul><li>In practice, practice and theory are different. </li></ul>In theory, we can change that. (Peter Boersma)
  66. 107. So:
  67. 109. make an impact on the business
  68. 110. link to strategy in your design decicions
  69. 111. document your work and work process
  70. 112. promote the results
  71. 115. MORE Peter Boersma
  72. 117. Design Processes for Web Projects Peter Boersma info . nl FULL SERVICE INTERNET AGENCY Fronteers.nl, January 11, Amsterdam

×