Post on 17-Oct-2014
description
Enhancing the Web User
Experience
A Close Look at Leveraging Your Website to Improve Member Engagement
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 Bar
Association – Jan Golding, Business Project Manager, Girl
Scouts of the USA
4/29/2013 2
Agenda
INTRODUCTION WEB STRATEGY
CONTENT STRATEGY
INFORMATION ARCHITECTURE
10 IN 10
RESPONSIVE DESIGN
CASE STUDY
CASE STUDY
USER TESTING
DESIGN FOR UX
10 IN 10
LUNCH
4/29/2013 3
Additional Items
• Are there any additional items that you’d like us to discuss today?
4/29/2013 4
Agenda INTRODUCTION
WEB STRATEGY CONTENT STRATEGY
INFORMATION ARCHITECTURE
LUNCH
4/29/2013 5
10 IN 10
RESPONSIVE DESIGN
CASE STUDY
CASE STUDY
USER TESTING
DESIGN FOR UX
10 IN 10
WEB STRATEGY
Beyond a project plan
4/29/2013 6
Web Strategy
• Close your browser and take a step back
• What are your business objectives for the coming 1, 3, 5+ years. . . And how do you see yourself leveraging the Web to achieve those goals?
4/29/2013 7
Web Strategy
• Expand membership
• Increase attendance at events
• Reach an international audience
• Raise awareness
• Promote new member benefits
• Increase member engagement
4/29/2013 8
Strategic Intent
• Member recruitment vs. member retention
4/29/2013 9
Member Recruitment
4/29/2013 10
Member Retention
4/29/2013 11
Member Retention
4/29/2013 12
Member Retention
4/29/2013 13
Strategic Intent: Revenue
• How should your website serve as a revenue stream for your organization?
4/29/2013 14
Advertisements
4/29/2013 15
Events
4/29/2013 16
Strategic Intent: Public Service
• What is your organization’s obligation or desire to serve the general public?
4/29/2013 17
Educate the Masses
4/29/2013 18
Member-Centric
4/29/2013 19
Now What?
• Understanding your website’s strategic intent, take a look at the major content buckets on your existing site
• Create a list of these items, and indicate if each item is of High, Medium or Low priority to get into the hands of your constituents
4/29/2013 20
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: Low
4/29/2013 21
Wireframe Your Site
• Create a wireframe of your homepage and a sample interior page
• Place a label and a priority in each box
• Do the priorities match the size relative to other boxes?
4/29/2013 22
Wireframe Your Site
Logo
Mission: High
External Ad: Low
Recent Journal Articles: Medium Apparel Sales: Low
How to Join: High Upcoming Events: High Member Directory: Medium
4/29/2013 23
Agenda INTRODUCTION
WEB STRATEGY
CONTENT STRATEGY INFORMATION ARCHITECTURE
LUNCH
4/29/2013 24
10 IN 10
RESPONSIVE DESIGN
CASE STUDY
CASE STUDY
USER TESTING
DESIGN FOR UX
10 IN 10
CONTENT STRATEGY
Treat Your Content Like You Care
4/29/2013 25
What is Content?
• A container for transporting a message
4/29/2013 26
The word, sound, image, video, or any other
piece of content finds derives its value from the
message it carries
4/29/2013 27
It is incumbent to know your message if you are to derive a great content strategy
4/29/2013 28
What is Content Strategy
• a plan for how you will create, deliver, maintain, and govern your content
4/29/2013 29
Good Content is Appropriate
• Publish content that is right for the user and for the business
• Content is appropriate when it help users accomplish their goals
• Content is appropriate for business when it helps users accomplish the business’ goals
• Define a goal for your content and evaluate each piece of content against it.
4/29/2013 30
Signal to Noise Ratio
4/29/2013 31
Good Content Is Clear
• It speaks to the user in language they understand
• It is organized in ways that make it easy to use
4/29/2013 32
Good Content Is Consistent
• Consistent content reduces cognitive effort
• Consistent content focuses users
*Particularly important if you have older users
4/29/2013 33
Good Content Is Consistent
Consistent content reduces cognitive effort
Consistent content focuses users
4/29/2013 34
Good Content Is Concise
• If everything is important, then nothing is important
4/29/2013 35
Good Content Is Concise
• If everything is important, then nothing is important
• Know your point and keep me moving in that direction
4/29/2013 36
Good Content Is Maintained
• Pruning is required
• Updating is required
• Deleting is required
How is your content maintained?
4/29/2013 37
Distributed vs. Central
4/29/2013 38
Good Content is delivered with
care
• What is the best content type to deliver the message?
4/29/2013 39
Smart Content is Searchable
• Tags
• Structure (Taxonomy and Folksonomy)
Do you leverage the power of the search?
4/29/2013 40
Smart Content is Relative
• Headlines
• Body
• Descriptions
4/29/2013 41
What is Content Strategy
• A plan for how you will create, deliver, maintain, and govern your content
4/29/2013 42
Remember
• The method should never change the content of the message, but it should affect the container
4/29/2013 43
Agenda INTRODUCTION
WEB STRATEGY
CONTENT STRATEGY
INFORMATION ARCHITECTURE LUNCH
4/29/2013 44
10 IN 10
RESPONSIVE DESIGN
CASE STUDY
CASE STUDY
USER TESTING
DESIGN FOR UX
10 IN 10
INFORMATION ARCHITECTURE
Structure for success
4/29/2013 45
What is Information Architecture?
• The way to structure your content to make it easy for users to navigate and find information – Enables people to step logically through a system to
get closer to the information they are looking for
– Grouping of related information is the key to web usability
IA is the art and science of organizing and labeling data including: websites, intranets, online communities, software, books and other mediums of information, to support usability. Source: Wikipedia
4/29/2013 46
4/29/2013 47
4/29/2013 48
ABC Order
4/29/2013 49
Color
4/29/2013 50
Author/Title
4/29/2013 51
Subject
4/29/2013 52
Audience
Profession
Interest Group
Age
4/29/2013 53
Navigation: Key to Usability
• People can’t find information 60% of the time
• 50% of potential sales are lost because users can’t find information they need on a website
Source: Usability.gov
4/29/2013 54
Parts to Navigation Usability
• Universal Navigation
• Placement Consistency
• Feedback on Location
• Meaningful Labels
• Sitemaps 4/29/2013 55
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 expectations
Knowing who your users are -
4/29/2013 56
4/29/2013 57
Card Sort
• Determine how users categorize the information that will appear on a website.
• Generates a user-centered taxonomy
• Types – Open
• Users asked to sort items into a group and make up their own groups and give them a name
– Closed • Users sort items into previously defined category names
• Validation exercise
4/29/2013 58
Demo
4/29/2013 59
ADEA Case Study
• In March 2012, TMA Resources Interactive and the American Dental Education Association (ADEA) conducted an open card sort study to understand how and where users expect to find content on the ADEA.org Web site. Data from this study, along with analysis of existing and planned content, will be used to create the proposed information architecture for the new ADEA Web site.
• Forty (40) members participated, spending an average of 20.4 minutes on the exercise. All participation was voluntary; no incentive was offered.
4/29/2013 60
Before
4/29/2013 61
The tree diagram shows some very clear groupings of content. The image below is a snapshot from ADEA’s tree diagram.
Hierarchal Tree Structure
4/29/2013 62
Items x Items
This table shows the percentage of times each item was placed with every other item.
4/29/2013 63
Categories Summaries
A snapshot of the Category Summaries has been provided below.
4/29/2013 64
Categories x Items
Notice that the frequency counts are much higher in the chart on the right that shows the categories after data normalization.
4/29/2013 65
After
4/29/2013 66
4/29/2013 67
Card Sorting Exercise
4/29/2013 68
Agenda INTRODUCTION
WEB STRATEGY
CONTENT STRATEGY
INFORMATION ARCHITECTURE
LUNCH!
4/29/2013 69
10 IN 10
RESPONSIVE DESIGN
CASE STUDY
CASE STUDY
USER TESTING
DESIGN FOR UX
10 IN 10
Agenda INTRODUCTION
WEB STRATEGY
CONTENT STRATEGY
INFORMATION ARCHITECTURE
10 IN 10 LUNCH
4/29/2013 70
RESPONSIVE DESIGN
CASE STUDY
CASE STUDY
USER TESTING
DESIGN FOR UX
10 IN 10
10 IDEAS IN 10 MINUTES
Just for You
4/29/2013 71
Agenda INTRODUCTION
WEB STRATEGY
CONTENT STRATEGY
INFORMATION ARCHITECTURE
10 IN 10
RESPONSIVE DESIGN
LUNCH
4/29/2013 72
CASE STUDY
CASE STUDY
USER TESTING
DESIGN FOR UX
10 IN 10
RESPONSIVE DESIGN
Platform Aware
4/29/2013 73
4/29/2013 74
Mr. Potato Head
Great Original
4/29/2013 75
Mr. Potato Head Cake
Tasty, Delicious, Chocolate Cake, Mr. Potato Heads likeness, easy to recognize
4/29/2013 76
Mr. Potato Head Cupcakes
Tasty, Delicious, Chocolate Cake, Mr. Potato Heads likeness, easy to recognize, Individual portions
4/29/2013 77
Mr. Potato Head Cake Pop
Tasty, Delicious, Chocolate Cake, Mr. Potato Heads likeness, easy to recognize, Individual portions, easy to carry
4/29/2013 78
4/29/2013 79
Know Your Value
• What do you do for your user
– What information can you provide that will help them?
– What can you do that will help them?
4/29/2013 80
Clearly Identify the Purpose of
Each Page
• How does this page serve the user?
4/29/2013 81
Prioritize The Content & Features
• How necessary is this to the user?
• Would users miss it if it wasn’t there?
4/29/2013 82
Start with the Most Restrictive
Platform/Screen First
• Mobile First
– The core
4/29/2013 83
4/29/2013 84
Apps
4/29/2013 85
Most Frequent Resolutions
Borrowed from 4/29/2013 86
Wireframe! Wireframe!
Wireframe!
4/29/2013 87
Agenda INTRODUCTION
WEB STRATEGY
CONTENT STRATEGY
INFORMATION ARCHITECTURE
10 IN 10
RESPONSIVE DESIGN
CASE STUDY
CASE STUDY
USER TESTING
DESIGN FOR UX
10 IN 10
LUNCH
4/29/2013 88
Case Study: The Girl Scouts of
the USA
4/29/2013 89
Troop Registration
• GSUSA has a custom Troop Registration system via Personify E-Business that allows troop leaders to
– Add new girls and adults to troops
– Manage troop members’ demographic information
– Register troop members for events
4/29/2013 90
Family Registration
• GSUSA wanted to create similar affiliate management-type functionality that would allow adults to
– Manage family members’ membership and demographic information
– Register family members for various events
4/29/2013 91
Troop Registration Challenges
• Technically, the Troop Registration functionality could have been mirrored for Family Registration
• However, the Troop Registration system had received criticism from volunteer troop leaders who felt confused and overwhelmed by the interface
• GSUSA had concerns about building new functionality on top of existing problems
4/29/2013 92
Usability Engagement
• GSUSA engaged TMA Resources Interactive to identify specific usability problems within Troop Registration, so they could be rectified and avoided before Family Registration was built
4/29/2013 93
Usability Phases
• Troop Registration – Member Survey – Focus Group Exploration – Task-Based Usability Testing
• Family Registration – Discovery – Wireframe Development – Task-Based Usability Testing – Functional Documentation
4/29/2013 94
Troop Registration
• Member Survey – 118 troop leaders that currently use the existing
E-business Troop Registration functionality
– Survey was designed to help us better understand the demographics and savvy-ness of the troop leaders, while collecting general, high-level feedback about their current concerns and future expectations
– Feedback was used to design targeted questions for the focus group
4/29/2013 95
Troop Registration
• Focus Group – Six focus groups were conducted with troop leaders
across the country – two focus groups were from technically savvy areas, two were from areas with average technical proficiency, and two were from areas that generally lag behind in technology
– Focus group was designed to gather specific feedback on how the troop leaders are using the system and what they find confusing or difficult
– Focus groups intentionally included experienced users
4/29/2013 96
Troop Registration
• Task-Based Usability Testing – One-on-one testing with novice troop leaders in
Toms River, NJ – Intent was to watch people who had never used
the system (i.e. who hadn’t yet found work-arounds) to see how they naturally navigated Troop Registration
– Video and audio recorded for analysis – Identified critical usability problems that
experienced users had been unable to verbalize in previous phases
4/29/2013 97
Family Registration
• Discovery
– Once all Troop Registration problems were identified, Interactive put those aside temporarily to gather the requirements for Family Registration functionality
4/29/2013 98
Family Registration
• Wireframe Development – Using the requirements and the lessons
learned from the usability testing, Interactive developed a comprehensive set of wireframes for the new Family Registration functionality
– Interactive also developed wireframes for the recommended fixes in Troop Registration
4/29/2013 99
Family Registration
• Task-Based Usability Testing – One-on-one usability testing with live
participants to test the proposed Family Registration functionality in the wireframe stage
– All testing was done remotely, with audio and screen recordings
– Received glowing, positive feedback with minimal revisions
4/29/2013 100
Family Registration
• Functional Documentation
– Once the wireframe revisions were complete, functional documentation was created to support the wireframes
4/29/2013 101
Family Registration
• Success – Gathering a thorough understanding of end-
users’ needs and behaviors (not just the client’s needs) allowed Interactive to create a prototype that hit the mark out of the gate
– Conducting usability testing prior to development allowed GSUSA to make minor edits that cost minimal time in Axure changes, as opposed to hundreds of hours in development changes if the system would have gone live without them
4/29/2013 102
Agenda INTRODUCTION
WEB STRATEGY
CONTENT STRATEGY
INFORMATION ARCHITECTURE
10 IN 10
RESPONSIVE DESIGN
CASE STUDY
CASE STUDY
USER TESTING DESIGN FOR UX
10 IN 10
LUNCH
4/29/2013 103
USER TESTING
Everyone believes they have 20/20 vision
4/29/2013 104
UX Video Slides Inserted Here
4/29/2013 105
Agenda INTRODUCTION
WEB STRATEGY
CONTENT STRATEGY
INFORMATION ARCHITECTURE
10 IN 10
RESPONSIVE DESIGN
CASE STUDY
CASE STUDY USER TESTING
DESIGN FOR UX
10 IN 10
LUNCH
4/29/2013 106
Case Study: The American Bar
Association
4/29/2013 107
Agenda INTRODUCTION
WEB STRATEGY
CONTENT STRATEGY
INFORMATION ARCHITECTURE
10 IN 10
RESPONSIVE DESIGN
CASE STUDY
CASE STUDY
USER TESTING
DESIGN FOR UX 10 IN 10
LUNCH
4/29/2013 108
DESIGN WITH AN EYE FOR
THE USER EXPERIENCE
Beyond Attractive
4/29/2013 109
4/29/2013 110
4/29/2013 111
Comparison Activity
4/29/2013 113
Strategy
How (gaze patterns):
1. Z-pattern
2. F-pattern
4/29/2013 114
Z-pattern
4/29/2013 115
Z-pattern
4/29/2013 116
F-pattern
4/29/2013 117
F-pattern
4/29/2013 118
How Design Support Strategy and Give Emotion
Headers Navigation
Layout
Backgrounds
Typography
Footers
4/29/2013 119
Color Theory and Emotions
4/29/2013 120
Design Strategy
Before
After 4/29/2013 121
Design Strategy
Before
After
4/29/2013 122
Design Strategy
Before
After 4/29/2013 123
Design Strategy
Before
After 4/29/2013 124
Design Strategy
Before
After
4/29/2013 125
Agenda INTRODUCTION
WEB STRATEGY
CONTENT STRATEGY
INFORMATION ARCHITECTURE
10 IN 10
RESPONSIVE DESIGN
CASE STUDY
CASE STUDY
USER TESTING
DESIGN FOR UX
10 IN 10
LUNCH
4/29/2013 126
10 IDEAS IN 10 MINUTES
Just for You
4/29/2013 127