Your SlideShare is downloading. ×
Taug 2013 presentation master
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Taug 2013 presentation master

212
views

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
212
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Enhancing the Web UserExperienceA Close Look at Leveraging Your Website toImprove Member Engagement
  • 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. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10LUNCH4/29/2013 3
  • 4. Additional Items• Are there any additional items that you’dlike us to discuss today?4/29/2013 4
  • 5. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURELUNCH4/29/2013 510 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10
  • 6. WEB STRATEGYBeyond a project plan4/29/2013 6
  • 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. 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. Strategic Intent• Member recruitment vs. memberretention4/29/2013 9
  • 10. Member Recruitment4/29/2013 10
  • 11. Member Retention4/29/2013 11
  • 12. Member Retention4/29/2013 12
  • 13. Member Retention4/29/2013 13
  • 14. Strategic Intent: Revenue• How should your website serve as arevenue stream for your organization?4/29/2013 14
  • 15. Advertisements4/29/2013 15
  • 16. Events4/29/2013 16
  • 17. Strategic Intent: Public Service• What is your organization’s obligation ordesire to serve the general public?4/29/2013 17
  • 18. Educate the Masses4/29/2013 18
  • 19. Member-Centric4/29/2013 19
  • 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. 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. 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. Wireframe Your SiteLogoMission: HighExternal Ad: LowRecent Journal Articles: Medium Apparel Sales: LowHow to Join: HighUpcoming Events: High Member Directory: Medium4/29/2013 23
  • 24. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURELUNCH4/29/2013 2410 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10
  • 25. CONTENT STRATEGYTreat Your Content Like You Care4/29/2013 25
  • 26. What is Content?• A container for transporting a message4/29/2013 26
  • 27. The word, sound, image, video, or any otherpiece of content finds derives its value from themessage it carries4/29/2013 27
  • 28. It is incumbent to know your message ifyou are to derive a great content strategy4/29/2013 28
  • 29. What is Content Strategy• a plan for how you will create, deliver,maintain, and govern your content4/29/2013 29
  • 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. Signal to Noise Ratio4/29/2013 31
  • 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. Good Content Is Consistent• Consistent content reduces cognitiveeffort• Consistent content focuses users*Particularly important if you have olderusers4/29/2013 33
  • 34. Good Content Is ConsistentConsistent content reduces cognitive effortConsistent content focuses users4/29/2013 34
  • 35. Good Content Is Concise• If everything is important, then nothing isimportant4/29/2013 35
  • 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. Good Content Is Maintained• Pruning is required• Updating is required• Deleting is requiredHow is your content maintained?4/29/2013 37
  • 38. Distributed vs. Central4/29/2013 38
  • 39. Good Content is delivered withcare• What is the best content type to deliverthe message?4/29/2013 39
  • 40. Smart Content is Searchable• Tags• Structure (Taxonomy and Folksonomy)Do you leverage the power of the search?4/29/2013 40
  • 41. Smart Content is Relative• Headlines• Body• Descriptions4/29/2013 41
  • 42. What is Content Strategy• A plan for how you will create, deliver,maintain, and govern your content4/29/2013 42
  • 43. Remember• The method should never change thecontent of the message, but it shouldaffect the container4/29/2013 43
  • 44. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURELUNCH4/29/2013 4410 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10
  • 45. INFORMATION ARCHITECTUREStructure for success4/29/2013 45
  • 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. 4/29/2013 47
  • 48. 4/29/2013 48
  • 49. ABC Order4/29/2013 49
  • 50. Color4/29/2013 50
  • 51. Author/Title4/29/2013 51
  • 52. Subject4/29/2013 52
  • 53. AudienceProfessionInterest GroupAge4/29/2013 53
  • 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. Parts to Navigation Usability• Universal Navigation• Placement Consistency• Feedback on Location• Meaningful Labels• Sitemaps4/29/2013 55
  • 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. 4/29/2013 57
  • 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. Demo4/29/2013 59
  • 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. Before4/29/2013 61
  • 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. Items x ItemsThis table shows the percentage of times each item was placed withevery other item.4/29/2013 63
  • 64. Categories SummariesA snapshot of the Category Summaries has been provided below.4/29/2013 64
  • 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. After4/29/2013 66
  • 67. 4/29/2013 67
  • 68. Card Sorting Exercise4/29/2013 68
  • 69. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURELUNCH!4/29/2013 6910 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10
  • 70. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10LUNCH4/29/2013 70RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10
  • 71. 10 IDEAS IN 10 MINUTESJust for You4/29/2013 71
  • 72. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNLUNCH4/29/2013 72CASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10
  • 73. RESPONSIVE DESIGNPlatform Aware4/29/2013 73
  • 74. 4/29/2013 74
  • 75. Mr. Potato HeadGreat Original4/29/2013 75
  • 76. Mr. Potato Head CakeTasty, Delicious, Chocolate Cake, Mr. Potato Heads likeness, easy torecognize4/29/2013 76
  • 77. Mr. Potato Head CupcakesTasty, Delicious, Chocolate Cake, Mr. Potato Heads likeness, easy torecognize, Individual portions4/29/2013 77
  • 78. Mr. Potato Head Cake PopTasty, Delicious, Chocolate Cake, Mr. Potato Heads likeness, easy torecognize, Individual portions, easy to carry4/29/2013 78
  • 79. 4/29/2013 79
  • 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. Clearly Identify the Purpose ofEach Page• How does this page serve the user?4/29/2013 81
  • 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. Start with the Most RestrictivePlatform/Screen First• Mobile First– The core4/29/2013 83
  • 84. 4/29/2013 84
  • 85. Apps4/29/2013 85
  • 86. Most Frequent ResolutionsBorrowed from4/29/2013 86
  • 87. Wireframe! Wireframe!Wireframe!4/29/2013 87
  • 88. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10LUNCH4/29/2013 88
  • 89. Case Study: The Girl Scouts ofthe USA4/29/2013 89
  • 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. 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. 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. 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. 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. 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. 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. 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. Family Registration• Discovery– Once all Troop Registration problems wereidentified, Interactive put those asidetemporarily to gather the requirements forFamily Registration functionality4/29/2013 98
  • 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. 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. Family Registration• Functional Documentation– Once the wireframe revisions werecomplete, functional documentation wascreated to support the wireframes4/29/2013 101
  • 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. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10LUNCH4/29/2013 103
  • 104. USER TESTINGEveryone believes they have 20/20 vision4/29/2013 104
  • 105. UX Video Slides Inserted Here4/29/2013 105
  • 106. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10LUNCH4/29/2013 106
  • 107. Case Study: The American BarAssociation4/29/2013 107
  • 108. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10LUNCH4/29/2013 108
  • 109. DESIGN WITH AN EYE FORTHE USER EXPERIENCEBeyond Attractive4/29/2013 109
  • 110. 4/29/2013 110
  • 111. 4/29/2013 111
  • 112. http://share.axure.com/UIT47Q4/29/2013 112
  • 113. Comparison Activity4/29/2013 113
  • 114. StrategyHow (gaze patterns):1. Z-pattern2. F-pattern4/29/2013 114
  • 115. Z-pattern4/29/2013 115
  • 116. Z-pattern4/29/2013 116
  • 117. F-pattern4/29/2013 117
  • 118. F-pattern4/29/2013 118
  • 119. How Design Support Strategyand Give EmotionHeaders NavigationLayoutBackgroundsTypographyFooters4/29/2013 119
  • 120. Color Theory and Emotions4/29/2013 120
  • 121. Design StrategyBeforeAfter4/29/2013 121
  • 122. Design StrategyBeforeAfter4/29/2013 122
  • 123. Design StrategyBeforeAfter4/29/2013 123
  • 124. Design StrategyBeforeAfter4/29/2013 124
  • 125. Design StrategyBeforeAfter4/29/2013 125
  • 126. AgendaINTRODUCTIONWEB STRATEGYCONTENT STRATEGYINFORMATION ARCHITECTURE10 IN 10RESPONSIVE DESIGNCASE STUDYCASE STUDYUSER TESTINGDESIGN FOR UX10 IN 10LUNCH4/29/2013 126
  • 127. 10 IDEAS IN 10 MINUTESJust for You4/29/2013 127