Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Help and Services Portal - Design Process

1,020 views

Published on

Covers some of the the design and decisions behind the Help and Services Portal for The University of British Columbia website. Presented on Nov 17, 2010

Published in: Design, Technology, Business
  • Be the first to comment

Help and Services Portal - Design Process

  1. 1. Help & Services PortalDESIGN PROCESS
  2. 2. HELLO!
  3. 3. AS A DESIGNER...data data data
  4. 4. Design Process
  5. 5. ObjectivesUnderstand design
  6. 6. ObjectivesUnderstand designUnderstand user motivations
  7. 7. ObjectivesUnderstand designUnderstand user motivationsUnderstand web navigation
  8. 8. ObjectivesUnderstand designUnderstand user motivationsUnderstand web navigationUnderstand information architecture
  9. 9. ObjectivesUnderstand designUnderstand user motivationsUnderstand web navigationUnderstand information architectureSee how all these fit in Help andServices
  10. 10. Objectives ABSTRACTUnderstand designUnderstand user motivationsUnderstand web navigationUnderstand information architectureSee how all these fit in Help and CONCRETEServices
  11. 11. Design
  12. 12. What is design?
  13. 13. What is design?
  14. 14. What is design?
  15. 15. What is design?
  16. 16. “Well Designed” STAINLESS STEEL THINRETINA DISPLAY APPS ACCELEROMETER SLEEK USER INTERFACE A4 PROCESSOR MULTI-TOUCH MIC + SPEAKERS PACKAGING
  17. 17. Design = plan
  18. 18. Plan implies goalPlan implies problems
  19. 19. Design = achieving goalsDesign = solving problems
  20. 20. IN WEB DESIGN...“What problem are we trying to solve?”
  21. 21. SITES NEED PEOPLE(USERS, VISITORS, CUSTOMERS...)
  22. 22. User Motivation
  23. 23. Users have a goal
  24. 24. “Why are they on your site?”Creating something
  25. 25. “Why are they on your site?”Creating somethingPerforming a transaction
  26. 26. “Why are they on your site?”Creating somethingPerforming a transactionControlling or monitoring something
  27. 27. “Why are they on your site?”Creating somethingPerforming a transactionControlling or monitoring somethingConversing with other people
  28. 28. “Why are they on your site?”Creating somethingPerforming a transactionControlling or monitoring somethingConversing with other peopleBeing entertained
  29. 29. “Why are they on your site?”Creating somethingPerforming a transactionControlling or monitoring somethingConversing with other peopleBeing entertainedFinding information
  30. 30. PEOPLE WANT INFORMATION (AT LEAST FOR OUR PURPOSES)
  31. 31. IN WEB DESIGN...“What problem are we trying to solve?”
  32. 32. IN WEB DESIGN...“What problem are we trying to solve?” SITES NEED PEOPLE
  33. 33. IN WEB DESIGN... “What problem are we trying to solve?” SITES NEED PEOPLE +PEOPLE WANT INFORMATION
  34. 34. IN WEB DESIGN... “What problem are we trying to solve?” SITES NEED PEOPLE OUR SITE NEEDS TO + = HELP PEOPLE FINDPEOPLE WANT INFORMATION INFORMATION
  35. 35. OMG
  36. 36. “How do people find information on the web?”
  37. 37. Web Navigation
  38. 38. JOHN’S AWESOME BAND Home
  39. 39. JOHN’S AWESOME BAND Home AboutMusic Contact JAB
  40. 40. JOHN’S AWESOME BAND Home AboutMusic Contact JAB
  41. 41. JOHN’S AWESOME BAND Home Tour AboutLyrics News Music Contact Gallery Fans Store dates JAB
  42. 42. Home page = summary
  43. 43. JOHN’S NOT-SO-AWESOME BAND Home
  44. 44. complex home page = complex summary =complex navigation
  45. 45. complex navigation is bad for finding information
  46. 46. Solution? Portals (Categories, galleries, etc.)
  47. 47. JOHN’S AWESOME BAND Home AboutPORTALS News Music JAB Contact Fans
  48. 48. Portals are “intermediate summaries”
  49. 49. Hence... Help And Services Portal
  50. 50. “But how do these portals work?”
  51. 51. Information Architecture
  52. 52. Information architecture is the organization of content (THROUGH CLEVER USE OF HEADINGS)
  53. 53. “Why?”
  54. 54. People are impatient.(They skim when they read on the web.)
  55. 55. Examples of information architecture in ACTION
  56. 56. 1 2 3INFORMATION ARCHITECTUREGOOD EXAMPLE
  57. 57. INFORMATION ARCHITECTUREBAD EXAMPLE
  58. 58. SummaryDesign = problem solving / achieving goals
  59. 59. SummaryDesign = problem solving / achieving goalsWeb design: Users want to find information
  60. 60. SummaryDesign = problem solving / achieving goalsWeb design: Users want to find informationProblem: How to get users to find information
  61. 61. SummaryDesign = problem solving / achieving goalsWeb design: Users want to find informationProblem: How to get users to find informationProper use of navigation (e.g. portals)
  62. 62. SummaryDesign = problem solving / achieving goalsWeb design: Users want to find informationProblem: How to get users to find informationProper use of navigation (e.g. portals)Guide user to scan portal via proper headings
  63. 63. Help Portal
  64. 64. Services Portal
  65. 65. “Can we use the same solution fromHelp to solve Services’ problems?
  66. 66. 1 2 4 3SERVICES PORTALNO, YOU CAN’T BE LAZY AND REUSE THE HELP PORTAL’S LAYOUT
  67. 67. different content = different problem =different solution
  68. 68. Caveats
  69. 69. 1. Designs aren’t tested
  70. 70. 2. Portals (while important) aren’t the answer; content is.
  71. 71. Thus, as content writers... good design depends on YOU.
  72. 72. Thank you!john.chan@ubc.ca@jtcchan

×