Taug 2013 presentation master

273
-1

Published on

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

  • Be the first to like this

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

No notes for slide

Taug 2013 presentation master

  1. 1. Enhancing the Web UserExperienceA Close Look at Leveraging Your Website toImprove Member Engagement
  2. 2. Presenters• TMA Resources Interactive– Megan McKelvy, Director– Vincent Nguyen, Managing Consultant– Theresa Kraemer, Sr. User Experience Designer– Brandon Harris, Sr. User Experience Designer• Clients– Beth Power, Project Manager, American BarAssociation– Jan Golding, Business Project Manager, GirlScouts of the USA4/29/2013 2
  3. 3. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10LUNCH4/29/2013 3
  4. 4. Additional Items• Are there any additional items that you’dlike us to discuss today?4/29/2013 4
  5. 5. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURELUNCH4/29/2013 510 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10
  6. 6. WEB STRATEGYBeyond a project plan4/29/2013 6
  7. 7. Web Strategy• Close your browser and take a step back• What are your business objectives forthe coming 1, 3, 5+ years. . . And how doyou see yourself leveraging the Web toachieve those goals?4/29/2013 7
  8. 8. Web Strategy• Expand membership• Increase attendance at events• Reach an international audience• Raise awareness• Promote new member benefits• Increase member engagement4/29/2013 8
  9. 9. Strategic Intent• Member recruitment vs. memberretention4/29/2013 9
  10. 10. Member Recruitment4/29/2013 10
  11. 11. Member Retention4/29/2013 11
  12. 12. Member Retention4/29/2013 12
  13. 13. Member Retention4/29/2013 13
  14. 14. Strategic Intent: Revenue• How should your website serve as arevenue stream for your organization?4/29/2013 14
  15. 15. Advertisements4/29/2013 15
  16. 16. Events4/29/2013 16
  17. 17. Strategic Intent: Public Service• What is your organization’s obligation ordesire to serve the general public?4/29/2013 17
  18. 18. Educate the Masses4/29/2013 18
  19. 19. Member-Centric4/29/2013 19
  20. 20. Now What?• Understanding your website’s strategicintent, take a look at the major contentbuckets on your existing site• Create a list of these items, and indicateif each item is of High, Medium or Lowpriority to get into the hands of yourconstituents4/29/2013 20
  21. 21. Content Priority• Mission Statement: High• Upcoming Events: High• How to Join: High• Recent Journal Articles: Medium• Member Directory: Medium• Apparel Sales: Low• President’s Blog: Low• External Ads: Low4/29/2013 21
  22. 22. Wireframe Your Site• Create a wireframe of your homepageand a sample interior page• Place a label and a priority in each box• Do the priorities match the size relativeto other boxes?4/29/2013 22
  23. 23. Wireframe Your SiteLogoMission: HighExternal Ad: LowRecent Journal Articles: Medium Apparel Sales: LowHow to Join: HighUpcoming Events: High Member Directory: Medium4/29/2013 23
  24. 24. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURELUNCH4/29/2013 2410 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10
  25. 25. CONTENT STRATEGYTreat Your Content Like You Care4/29/2013 25
  26. 26. What is Content?• A container for transporting a message4/29/2013 26
  27. 27. The word, sound, image, video, or any otherpiece of content finds derives its value from themessage it carries4/29/2013 27
  28. 28. It is incumbent to know your message ifyou are to derive a great content strategy4/29/2013 28
  29. 29. What is Content Strategy• a plan for how you will create, deliver,maintain, and govern your content4/29/2013 29
  30. 30. Good Content is Appropriate• Publish content that is right for the user andfor the business• Content is appropriate when it help usersaccomplish their goals• Content is appropriate for business when ithelps users accomplish the business’ goals• Define a goal for your content and evaluateeach piece of content against it.4/29/2013 30
  31. 31. Signal to Noise Ratio4/29/2013 31
  32. 32. Good Content Is Clear• It speaks to the user in language theyunderstand• It is organized in ways that make it easyto use4/29/2013 32
  33. 33. Good Content Is Consistent• Consistent content reduces cognitiveeffort• Consistent content focuses users*Particularly important if you have olderusers4/29/2013 33
  34. 34. Good Content Is ConsistentConsistent content reduces cognitive effortConsistent content focuses users4/29/2013 34
  35. 35. Good Content Is Concise• If everything is important, then nothing isimportant4/29/2013 35
  36. 36. Good Content Is Concise• If everything is important, then nothing is important• Know your point and keep me moving in that direction4/29/2013 36
  37. 37. Good Content Is Maintained• Pruning is required• Updating is required• Deleting is requiredHow is your content maintained?4/29/2013 37
  38. 38. Distributed vs. Central4/29/2013 38
  39. 39. Good Content is delivered withcare• What is the best content type to deliverthe message?4/29/2013 39
  40. 40. Smart Content is Searchable• Tags• Structure (Taxonomy and Folksonomy)Do you leverage the power of the search?4/29/2013 40
  41. 41. Smart Content is Relative• Headlines• Body• Descriptions4/29/2013 41
  42. 42. What is Content Strategy• A plan for how you will create, deliver,maintain, and govern your content4/29/2013 42
  43. 43. Remember• The method should never change thecontent of the message, but it shouldaffect the container4/29/2013 43
  44. 44. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURELUNCH4/29/2013 4410 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10
  45. 45. INFORMATION ARCHITECTUREStructure for success4/29/2013 45
  46. 46. What is Information Architecture?• The way to structure your content to make iteasy for users to navigate and find information– Enables people to step logically through a system toget closer to the information they are looking for– Grouping of related information is the key to webusabilityIA is the art and science of organizing and labeling dataincluding: websites, intranets, online communities,software, books and other mediums of information, tosupport usability. Source: Wikipedia4/29/2013 46
  47. 47. 4/29/2013 47
  48. 48. 4/29/2013 48
  49. 49. ABC Order4/29/2013 49
  50. 50. Color4/29/2013 50
  51. 51. Author/Title4/29/2013 51
  52. 52. Subject4/29/2013 52
  53. 53. AudienceProfessionInterest GroupAge4/29/2013 53
  54. 54. Navigation: Key to Usability• People can’t find information 60% ofthe time• 50% of potential sales are lostbecause users can’t find informationthey need on a websiteSource: Usability.gov4/29/2013 54
  55. 55. Parts to Navigation Usability• Universal Navigation• Placement Consistency• Feedback on Location• Meaningful Labels• Sitemaps4/29/2013 55
  56. 56. How do I organize my content?Where do they expect to find things?How do they respond to your content?What really matters is user’s expectationsKnowing who your users are -4/29/2013 56
  57. 57. 4/29/2013 57
  58. 58. Card Sort• Determine how users categorize the informationthat will appear on a website.• Generates a user-centered taxonomy• Types– Open• Users asked to sort items into a group and make up theirown groups and give them a name– Closed• Users sort items into previously defined category names• Validation exercise4/29/2013 58
  59. 59. Demo4/29/2013 59
  60. 60. ADEA Case Study• In March 2012, TMA Resources Interactive and theAmerican Dental Education Association (ADEA)conducted an open card sort study to understandhow and where users expect to find content on theADEA.org Web site. Data from this study, along withanalysis of existing and planned content, will be usedto create the proposed information architecture forthe new ADEA Web site.• Forty (40) members participated, spending anaverage of 20.4 minutes on the exercise. Allparticipation was voluntary; no incentive wasoffered.4/29/2013 60
  61. 61. Before4/29/2013 61
  62. 62. The tree diagram shows some very clear groupings of content. The imagebelow is a snapshot from ADEA’s tree diagram.Hierarchal Tree Structure4/29/2013 62
  63. 63. Items x ItemsThis table shows the percentage of times each item was placed withevery other item.4/29/2013 63
  64. 64. Categories SummariesA snapshot of the Category Summaries has been provided below.4/29/2013 64
  65. 65. Categories x ItemsNotice that the frequency counts are much higher in the chart on the rightthat shows the categories after data normalization.4/29/2013 65
  66. 66. After4/29/2013 66
  67. 67. 4/29/2013 67
  68. 68. Card Sorting Exercise4/29/2013 68
  69. 69. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURELUNCH!4/29/2013 6910 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10
  70. 70. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10LUNCH4/29/2013 70RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10
  71. 71. 10 IDEAS IN 10 MINUTESJust for You4/29/2013 71
  72. 72. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNLUNCH4/29/2013 72CASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10
  73. 73. RESPONSIVE DESIGNPlatform Aware4/29/2013 73
  74. 74. 4/29/2013 74
  75. 75. Mr. Potato HeadGreat Original4/29/2013 75
  76. 76. Mr. Potato Head CakeTasty, Delicious, Chocolate Cake, Mr. Potato Heads likeness, easy torecognize4/29/2013 76
  77. 77. Mr. Potato Head CupcakesTasty, Delicious, Chocolate Cake, Mr. Potato Heads likeness, easy torecognize, Individual portions4/29/2013 77
  78. 78. Mr. Potato Head Cake PopTasty, Delicious, Chocolate Cake, Mr. Potato Heads likeness, easy torecognize, Individual portions, easy to carry4/29/2013 78
  79. 79. 4/29/2013 79
  80. 80. Know Your Value• What do you do for your user– What information can you provide that willhelp them?– What can you do that will help them?4/29/2013 80
  81. 81. Clearly Identify the Purpose ofEach Page• How does this page serve the user?4/29/2013 81
  82. 82. Prioritize The Content & Features• How necessary is this to the user?• Would users miss it if it wasn’t there?4/29/2013 82
  83. 83. Start with the Most RestrictivePlatform/Screen First• Mobile First– The core4/29/2013 83
  84. 84. 4/29/2013 84
  85. 85. Apps4/29/2013 85
  86. 86. Most Frequent ResolutionsBorrowed from4/29/2013 86
  87. 87. Wireframe! Wireframe!Wireframe!4/29/2013 87
  88. 88. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10LUNCH4/29/2013 88
  89. 89. Case Study: The Girl Scouts ofthe USA4/29/2013 89
  90. 90. Troop Registration• GSUSA has a custom Troop Registrationsystem via Personify E-Business thatallows troop leaders to– Add new girls and adults to troops– Manage troop members’ demographicinformation– Register troop members for events4/29/2013 90
  91. 91. Family Registration• GSUSA wanted to create similar affiliatemanagement-type functionality thatwould allow adults to– Manage family members’ membership anddemographic information– Register family members for various events4/29/2013 91
  92. 92. Troop Registration Challenges• Technically, the Troop Registrationfunctionality could have been mirrored forFamily Registration• However, the Troop Registration system hadreceived criticism from volunteer troopleaders who felt confused andoverwhelmed by the interface• GSUSA had concerns about building newfunctionality on top of existing problems4/29/2013 92
  93. 93. Usability Engagement• GSUSA engaged TMA ResourcesInteractive to identify specific usabilityproblems within Troop Registration, sothey could be rectified and avoidedbefore Family Registration was built4/29/2013 93
  94. 94. Usability Phases• Troop Registration– Member Survey– Focus Group Exploration– Task-Based Usability Testing• Family Registration– Discovery– Wireframe Development– Task-Based Usability Testing– Functional Documentation4/29/2013 94
  95. 95. Troop Registration• Member Survey– 118 troop leaders that currently use the existingE-business Troop Registration functionality– Survey was designed to help us betterunderstand the demographics and savvy-ness ofthe troop leaders, while collecting general, high-level feedback about their current concerns andfuture expectations– Feedback was used to design targeted questionsfor the focus group4/29/2013 95
  96. 96. Troop Registration• Focus Group– Six focus groups were conducted with troop leadersacross the country – two focus groups were fromtechnically savvy areas, two were from areas withaverage technical proficiency, and two were fromareas that generally lag behind in technology– Focus group was designed to gather specificfeedback on how the troop leaders are using thesystem and what they find confusing or difficult– Focus groups intentionally included experiencedusers4/29/2013 96
  97. 97. Troop Registration• Task-Based Usability Testing– One-on-one testing with novice troop leaders inToms River, NJ– Intent was to watch people who had never usedthe system (i.e. who hadn’t yet found work-arounds) to see how they naturally navigatedTroop Registration– Video and audio recorded for analysis– Identified critical usability problems thatexperienced users had been unable to verbalizein previous phases4/29/2013 97
  98. 98. Family Registration• Discovery– Once all Troop Registration problems wereidentified, Interactive put those asidetemporarily to gather the requirements forFamily Registration functionality4/29/2013 98
  99. 99. Family Registration• Wireframe Development– Using the requirements and the lessonslearned from the usability testing,Interactive developed a comprehensive setof wireframes for the new FamilyRegistration functionality– Interactive also developed wireframes forthe recommended fixes in TroopRegistration4/29/2013 99
  100. 100. Family Registration• Task-Based Usability Testing– One-on-one usability testing with liveparticipants to test the proposed FamilyRegistration functionality in the wireframestage– All testing was done remotely, with audioand screen recordings– Received glowing, positive feedback withminimal revisions4/29/2013 100
  101. 101. Family Registration• Functional Documentation– Once the wireframe revisions werecomplete, functional documentation wascreated to support the wireframes4/29/2013 101
  102. 102. Family Registration• Success– Gathering a thorough understanding of end-users’ needs and behaviors (not just the client’sneeds) allowed Interactive to create a prototypethat hit the mark out of the gate– Conducting usability testing prior todevelopment allowed GSUSA to make minoredits that cost minimal time in Axure changes,as opposed to hundreds of hours indevelopment changes if the system would havegone live without them4/29/2013 102
  103. 103. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10LUNCH4/29/2013 103
  104. 104. USER TESTINGEveryone believes they have 20/20 vision4/29/2013 104
  105. 105. UX Video Slides Inserted Here4/29/2013 105
  106. 106. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10LUNCH4/29/2013 106
  107. 107. Case Study: The American BarAssociation4/29/2013 107
  108. 108. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10LUNCH4/29/2013 108
  109. 109. DESIGN WITH AN EYE FORTHE USER EXPERIENCEBeyond Attractive4/29/2013 109
  110. 110. 4/29/2013 110
  111. 111. 4/29/2013 111
  112. 112. http://share.axure.com/UIT47Q4/29/2013 112
  113. 113. Comparison Activity4/29/2013 113
  114. 114. StrategyHow (gaze patterns):1. Z-pattern2. F-pattern4/29/2013 114
  115. 115. Z-pattern4/29/2013 115
  116. 116. Z-pattern4/29/2013 116
  117. 117. F-pattern4/29/2013 117
  118. 118. F-pattern4/29/2013 118
  119. 119. How Design Support Strategyand Give EmotionHeaders NavigationLayoutBackgroundsTypographyFooters4/29/2013 119
  120. 120. Color Theory and Emotions4/29/2013 120
  121. 121. Design StrategyBeforeAfter4/29/2013 121
  122. 122. Design StrategyBeforeAfter4/29/2013 122
  123. 123. Design StrategyBeforeAfter4/29/2013 123
  124. 124. Design StrategyBeforeAfter4/29/2013 124
  125. 125. Design StrategyBeforeAfter4/29/2013 125
  126. 126. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10LUNCH4/29/2013 126
  127. 127. 10 IDEAS IN 10 MINUTESJust for You4/29/2013 127
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×