Taug 2013 presentation master

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


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


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


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


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


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


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


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


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


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

http://share.axure.com/UIT47Q

4/29/2013 112

http://share.axure.com/UIT47Q

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


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

Taug 2013 presentation master

Technology

Transcript of Taug 2013 presentation master