Help & Services PortalDESIGN PROCESS
HELLO!
AS A DESIGNER...data   data   data
Design Process
ObjectivesUnderstand design
ObjectivesUnderstand designUnderstand user motivations
ObjectivesUnderstand designUnderstand user motivationsUnderstand web navigation
ObjectivesUnderstand designUnderstand user motivationsUnderstand web navigationUnderstand information architecture
ObjectivesUnderstand designUnderstand user motivationsUnderstand web navigationUnderstand information architectureSee how ...
Objectives                                      ABSTRACTUnderstand designUnderstand user motivationsUnderstand web navigat...
Design
What is design?
What is design?
What is design?
What is design?
“Well Designed”  STAINLESS STEEL         THINRETINA DISPLAY           APPS    ACCELEROMETER    SLEEK USER INTERFACE  A4 PR...
Design = plan
Plan implies goalPlan implies problems
Design = achieving goalsDesign = solving problems
IN WEB DESIGN...“What problem are we trying to solve?”
SITES NEED PEOPLE(USERS, VISITORS, CUSTOMERS...)
User Motivation
Users have a goal
“Why are they on your site?”Creating something
“Why are they on your site?”Creating somethingPerforming a transaction
“Why are they on your site?”Creating somethingPerforming a transactionControlling or monitoring something
“Why are they on your site?”Creating somethingPerforming a transactionControlling or monitoring somethingConversing with o...
“Why are they on your site?”Creating somethingPerforming a transactionControlling or monitoring somethingConversing with o...
“Why are they on your site?”Creating somethingPerforming a transactionControlling or monitoring somethingConversing with o...
PEOPLE WANT INFORMATION   (AT LEAST FOR OUR PURPOSES)
IN WEB DESIGN...“What problem are we trying to solve?”
IN WEB DESIGN...“What problem are we trying to solve?” SITES NEED PEOPLE
IN WEB DESIGN...  “What problem are we trying to solve?”   SITES NEED PEOPLE          +PEOPLE WANT INFORMATION
IN WEB DESIGN...  “What problem are we trying to solve?”   SITES NEED PEOPLE          OUR SITE NEEDS TO          +        ...
OMG
“How do people find information on           the web?”
Web Navigation
JOHN’S AWESOME BAND       Home
JOHN’S AWESOME BAND        Home        AboutMusic           Contact         JAB
JOHN’S AWESOME BAND        Home        AboutMusic           Contact         JAB
JOHN’S AWESOME BAND                                Home         Tour                   AboutLyrics           News   Music ...
Home page = summary
JOHN’S NOT-SO-AWESOME BAND           Home
complex home page        = complex summary        =complex navigation
complex navigation is bad for finding           information
Solution? Portals  (Categories, galleries, etc.)
JOHN’S AWESOME BAND                         Home                         AboutPORTALS   News   Music                      ...
Portals are “intermediate summaries”
Hence...    Help And Services Portal
“But how do these portals work?”
Information Architecture
Information architecture is the  organization of content     (THROUGH CLEVER USE OF HEADINGS)
“Why?”
People are impatient.(They skim when they read on the web.)
Examples of information architecture in          ACTION
1   2       3INFORMATION ARCHITECTUREGOOD EXAMPLE
INFORMATION ARCHITECTUREBAD EXAMPLE
SummaryDesign = problem solving / achieving goals
SummaryDesign = problem solving / achieving goalsWeb design: Users want to find information
SummaryDesign = problem solving / achieving goalsWeb design: Users want to find informationProblem: How to get users to fi...
SummaryDesign = problem solving / achieving goalsWeb design: Users want to find informationProblem: How to get users to fi...
SummaryDesign = problem solving / achieving goalsWeb design: Users want to find informationProblem: How to get users to fi...
Help Portal
Services Portal
“Can we use the same solution fromHelp to solve Services’ problems?
1                 2                                                   4         3SERVICES PORTALNO, YOU CAN’T BE LAZY AND ...
different content          = different problem          =different solution
Caveats
1. Designs aren’t tested
2. Portals (while important) aren’t the answer; content is.
Thus, as content writers... good design depends on YOU.
Thank you!john.chan@ubc.ca@jtcchan
Upcoming SlideShare
Loading in...5
×

Help and Services Portal - Design Process

596

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
596
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "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

    ×