Your SlideShare is downloading. ×
From Website to Experience<br />Redesigning the English Department’s Digital Space<br />Chris Backus  ▪  Geoffrey Owens  ▪...
Overview<br />Conventional Design Workflow<br />Solution<br />Redesign Artifact<br />Assess Client’s Needs<br />From Websi...
User-Centered Design Workflow<br />Requirements Gathering<br />Problem<br /><ul><li>Stakeholder Interviews
Landscape Analysis
Content Inventory
Card Sorting
Controlled Vocabulary</li></ul>Usability Testing<br />Solution<br />Information Design<br /><ul><li>Site Mapping
Wireframing
Prototyping
Product</li></ul>From Website to Experience<br />Overview<br />3<br />
The Problem<br />From Website to Experience<br />From Website to Experience<br />4<br />Requirements Gathering<br />Proble...
From Website to Experience<br />5<br />The Problem<br />
From Website to Experience<br />6<br />The Problem<br />
From Website to Experience<br />7<br />The Problem<br />
From Website to Experience<br />8<br />The Problem<br />
From Website to Experience<br />9<br />The Problem<br />
Requirements Gathering<br />From Website to Experience<br />From Website to Experience<br />10<br />Requirements Gathering...
Purpose<br />Discover wants <br />Deduce needs <br />Achieve ‘buy-in’<br />Our Stakeholder<br />Dr. Kathie Gossett<br />In...
From Website to Experience<br />12<br />Stakeholder Interviews<br />Copyright by Alex Gorbatchev<br />
Results<br />3 Main User Groups<br />Prospective students<br />Current students<br />Faculty<br />Wants<br />Searchable (N...
Purpose<br />Find similar products, same target audience<br />See what works / doesn’t work<br />Our Landscape<br />Christ...
Evaluation Criteria (IBM)<br />Home Page<br />Navigation<br />Content<br />ROT<br />Links<br />Labels<br />Performance<br ...
From Website to Experience<br />16<br />Christopher Newport<br />
From Website to Experience<br />17<br />Norfolk State<br />
From Website to Experience<br />18<br />Va. Commonwealth<br />
From Website to Experience<br />19<br />William & Mary<br />
Results<br />Navigation Location<br />Standardized information<br />Less is more<br />Photographs make a difference<br />F...
Purpose<br />Discover what we have now<br />Find potential improvements<br />From Website to Experience<br />21<br />Requi...
Example<br />Current ‘Academics’ Section Inventory<br />From Website to Experience<br />22<br />Requirements Gathering<br ...
Results<br />Content overlap<br />ROT (Redundant, Outdated, or Trivial)<br />Disorganized map<br />Text overload<br />From...
Purpose<br />Discover logical information groups<br />Develop controlled vocabulary<br />Guide site map design<br />From W...
Results<br />8 main sections<br />Controlled vocabulary<br />‘Undergraduate Programs’<br />‘Graduate Programs’<br />‘Advis...
Information Design(Part I)<br />From Website to Experience<br />From Website to Experience<br />26<br />Requirements Gathe...
Purpose<br />Illustrate new site organization<br />Provide easy reference for designers<br />From Website to Experience<br...
From Website to Experience<br />28<br />Site Map Example<br />
Purpose<br />Provide information organization template<br />Create standard structure for each ‘type’ of page<br />From We...
From Website to Experience<br />30<br />Wireframe Examples<br />
From Website to Experience<br />31<br />Wireframe Examples<br />
From Website to Experience<br />32<br />Site Map Example<br />
From Website to Experience<br />33<br />Wireframe Examples<br />
Purpose<br />Create interactive mockup for usability testing<br />‘Stripped down’ design<br />Minimize reaction to design ...
From Website to Experience<br />35<br />Examples<br />
From Website to Experience<br />36<br />Examples<br />
Usability Testing<br />From Website to Experience<br />From Website to Experience<br />37<br />Requirements Gathering<br /...
Purpose<br />Allow users to interact with information architecture<br />Ensure expected interactions <br />Procedure<br />...
Usability Testing Demonstration<br />From Website to Experience<br />39<br />Usability Testing<br />
Results<br />16 Participants<br />0% had problems with right-hand navigation links<br />63% had difficulty navigating back...
Information Design(Part II)<br />From Website to Experience<br />From Website to Experience<br />41<br />Requirements Gath...
Purpose<br />Create the environment that the site will ‘live in’<br />Refine the user experience / interaction<br />From W...
Examples<br />From Website to Experience<br />43<br />Information Design II<br />Product<br />
Examples<br />From Website to Experience<br />44<br />Information Design II<br />Product<br />
Examples<br />From Website to Experience<br />45<br />Information Design II<br />Product<br />
Examples<br />From Website to Experience<br />46<br />Information Design II<br />Product<br />
Examples<br />From Website to Experience<br />47<br />Information Design II<br />Product<br />
The Solution<br />From Website to Experience<br />From Website to Experience<br />48<br />Requirements Gathering<br />Prob...
From Website to Experience<br />49<br />
From Website to Experience<br />50<br />
From Website to Experience<br />51<br />
Upcoming SlideShare
Loading in...5
×

Eng Site Presentation

381

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide
  • BRAD:INTRO
  • BRAD
  • BRAD
  • BRADPOINT OUT LACK OF CONTRASTREPITITIONALLIGNMENTPROXIMITY
  • GEOFF
  • GEOFF
  • Transcript of "Eng Site Presentation"

    1. 1. From Website to Experience<br />Redesigning the English Department’s Digital Space<br />Chris Backus ▪ Geoffrey Owens ▪ Bradley Wetzell<br />ODU Undergraduate Research Symposium, 2010<br />
    2. 2. Overview<br />Conventional Design Workflow<br />Solution<br />Redesign Artifact<br />Assess Client’s Needs<br />From Website to Experience<br />2<br />Problem<br />
    3. 3. User-Centered Design Workflow<br />Requirements Gathering<br />Problem<br /><ul><li>Stakeholder Interviews
    4. 4. Landscape Analysis
    5. 5. Content Inventory
    6. 6. Card Sorting
    7. 7. Controlled Vocabulary</li></ul>Usability Testing<br />Solution<br />Information Design<br /><ul><li>Site Mapping
    8. 8. Wireframing
    9. 9. Prototyping
    10. 10. Product</li></ul>From Website to Experience<br />Overview<br />3<br />
    11. 11. The Problem<br />From Website to Experience<br />From Website to Experience<br />4<br />Requirements Gathering<br />Problem<br />Usability Testing<br />Solution<br />Information Design<br />
    12. 12. From Website to Experience<br />5<br />The Problem<br />
    13. 13. From Website to Experience<br />6<br />The Problem<br />
    14. 14. From Website to Experience<br />7<br />The Problem<br />
    15. 15. From Website to Experience<br />8<br />The Problem<br />
    16. 16. From Website to Experience<br />9<br />The Problem<br />
    17. 17. Requirements Gathering<br />From Website to Experience<br />From Website to Experience<br />10<br />Requirements Gathering<br />Problem<br />Usability Testing<br />Solution<br />Information Design<br />
    18. 18. Purpose<br />Discover wants <br />Deduce needs <br />Achieve ‘buy-in’<br />Our Stakeholder<br />Dr. Kathie Gossett<br />In charge of maintaining the digital space<br />From Website to Experience<br />11<br />Requirements Gathering<br />Stakeholder Interviews<br />
    19. 19. From Website to Experience<br />12<br />Stakeholder Interviews<br />Copyright by Alex Gorbatchev<br />
    20. 20. Results<br />3 Main User Groups<br />Prospective students<br />Current students<br />Faculty<br />Wants<br />Searchable (No Flash Content)<br />No frames<br />Needs<br />Streamlined<br />Easily updated<br />From Website to Experience<br />13<br />Requirements Gathering<br />Stakeholder Interviews<br />
    21. 21. Purpose<br />Find similar products, same target audience<br />See what works / doesn’t work<br />Our Landscape<br />Christopher Newport<br />Norfolk State<br />Virginia Commonwealth<br />William & Mary<br />From Website to Experience<br />14<br />Requirements Gathering<br />Landscape Analysis<br />
    22. 22. Evaluation Criteria (IBM)<br />Home Page<br />Navigation<br />Content<br />ROT<br />Links<br />Labels<br />Performance<br />Readability<br />Organization<br />Search<br />Visual Appeal<br />From Website to Experience<br />15<br />Requirements Gathering<br />Landscape Analysis<br />
    23. 23. From Website to Experience<br />16<br />Christopher Newport<br />
    24. 24. From Website to Experience<br />17<br />Norfolk State<br />
    25. 25. From Website to Experience<br />18<br />Va. Commonwealth<br />
    26. 26. From Website to Experience<br />19<br />William & Mary<br />
    27. 27. Results<br />Navigation Location<br />Standardized information<br />Less is more<br />Photographs make a difference<br />From Website to Experience<br />20<br />Requirements Gathering<br />Landscape Analysis<br />
    28. 28. Purpose<br />Discover what we have now<br />Find potential improvements<br />From Website to Experience<br />21<br />Requirements Gathering<br />Content Inventory<br />
    29. 29. Example<br />Current ‘Academics’ Section Inventory<br />From Website to Experience<br />22<br />Requirements Gathering<br />Content Inventory<br />
    30. 30. Results<br />Content overlap<br />ROT (Redundant, Outdated, or Trivial)<br />Disorganized map<br />Text overload<br />From Website to Experience<br />23<br />Requirements Gathering<br />Content Inventory<br />
    31. 31. Purpose<br />Discover logical information groups<br />Develop controlled vocabulary<br />Guide site map design<br />From Website to Experience<br />24<br />Requirements Gathering<br />Open Card Sorting<br />
    32. 32. Results<br />8 main sections<br />Controlled vocabulary<br />‘Undergraduate Programs’<br />‘Graduate Programs’<br />‘Advising’<br />‘Faculty and Staff’<br />‘Research and Publications’<br />‘Writing Assistance’<br />‘External Links’<br />From Website to Experience<br />25<br />Requirements Gathering<br />Open Card Sorting<br />
    33. 33. Information Design(Part I)<br />From Website to Experience<br />From Website to Experience<br />26<br />Requirements Gathering<br />Problem<br />Usability Testing<br />Solution<br />Information Design<br />
    34. 34. Purpose<br />Illustrate new site organization<br />Provide easy reference for designers<br />From Website to Experience<br />27<br />Information Design I<br />Site Mapping<br />
    35. 35. From Website to Experience<br />28<br />Site Map Example<br />
    36. 36. Purpose<br />Provide information organization template<br />Create standard structure for each ‘type’ of page<br />From Website to Experience<br />29<br />Information Design I<br />Wireframing<br />
    37. 37. From Website to Experience<br />30<br />Wireframe Examples<br />
    38. 38. From Website to Experience<br />31<br />Wireframe Examples<br />
    39. 39. From Website to Experience<br />32<br />Site Map Example<br />
    40. 40. From Website to Experience<br />33<br />Wireframe Examples<br />
    41. 41. Purpose<br />Create interactive mockup for usability testing<br />‘Stripped down’ design<br />Minimize reaction to design / color choices<br />From Website to Experience<br />34<br />Information Design I<br />Interactive Prototyping<br />
    42. 42. From Website to Experience<br />35<br />Examples<br />
    43. 43. From Website to Experience<br />36<br />Examples<br />
    44. 44. Usability Testing<br />From Website to Experience<br />From Website to Experience<br />37<br />Requirements Gathering<br />Problem<br />Usability Testing<br />Solution<br />Information Design<br />
    45. 45. Purpose<br />Allow users to interact with information architecture<br />Ensure expected interactions <br />Procedure<br />Develop use scenarios<br />Instruct users to ‘think out loud’<br />From Website to Experience<br />38<br />Usability Testing<br />
    46. 46. Usability Testing Demonstration<br />From Website to Experience<br />39<br />Usability Testing<br />
    47. 47. Results<br />16 Participants<br />0% had problems with right-hand navigation links<br />63% had difficulty navigating back to home page<br />Need to create a ‘Home’ link in navigation bar<br />92% able to navigate to required information<br />From Website to Experience<br />40<br />Usability Testing<br />
    48. 48. Information Design(Part II)<br />From Website to Experience<br />From Website to Experience<br />41<br />Requirements Gathering<br />Problem<br />Usability Testing<br />Solution<br />Information Design<br />
    49. 49. Purpose<br />Create the environment that the site will ‘live in’<br />Refine the user experience / interaction<br />From Website to Experience<br />42<br />Information Design II<br />Product<br />
    50. 50. Examples<br />From Website to Experience<br />43<br />Information Design II<br />Product<br />
    51. 51. Examples<br />From Website to Experience<br />44<br />Information Design II<br />Product<br />
    52. 52. Examples<br />From Website to Experience<br />45<br />Information Design II<br />Product<br />
    53. 53. Examples<br />From Website to Experience<br />46<br />Information Design II<br />Product<br />
    54. 54. Examples<br />From Website to Experience<br />47<br />Information Design II<br />Product<br />
    55. 55. The Solution<br />From Website to Experience<br />From Website to Experience<br />48<br />Requirements Gathering<br />Problem<br />Usability Testing<br />Solution<br />Information Design<br />
    56. 56. From Website to Experience<br />49<br />
    57. 57. From Website to Experience<br />50<br />
    58. 58. From Website to Experience<br />51<br />
    59. 59. From Website to Experience<br />52<br />
    60. 60. From Website to Experience<br />53<br />
    61. 61. From Website to Experience<br />54<br />
    62. 62. From Website to Experience<br />55<br />
    63. 63. From Website to Experience<br />56<br />
    64. 64. User-Centered Design Workflow<br />Requirements Gathering<br />Problem<br /><ul><li>Stakeholder Interviews
    65. 65. Landscape Analysis
    66. 66. Content Inventory
    67. 67. Card Sorting
    68. 68. Controlled Vocabulary</li></ul>Usability Testing<br />Solution<br />Information Design<br /><ul><li>Site Mapping
    69. 69. Wireframing
    70. 70. Prototyping
    71. 71. Product</li></ul>From Website to Experience<br />Conclusion<br />57<br />
    72. 72. From Website to Experience<br />Redesigning the English Department’s Digital Space<br />Chris Backus ▪ Geoffrey Owens ▪ Bradley Wetzell<br />ODU Undergraduate Research Symposium, 2010<br />

    ×