people-centered design

53
People-Centered Design Creating Cost-Eective Websites June 25, 2008 Commonwealth Club, San Francisco Katrina Alcorn, Hot Studio Renee Anderson, Hot Studio

Upload: katrina-alcorn

Post on 07-Nov-2014

3.416 views

Category:

Business


0 download

DESCRIPTION

Hot Studio presentation for the Commonwealth Club June 2008 about using research to design web sites.

TRANSCRIPT

Page 1: People-Centered Design

People-Centered DesignCreating Cost-E!ective Websites

June 25, 2008Commonwealth Club, San Francisco

Katrina Alcorn, Hot StudioRenee Anderson, Hot Studio

Page 2: People-Centered Design

IntroductionsKatrina Alcorn

Principal, User Experience & Content

Renee Anderson

Director of User Experience

Page 3: People-Centered Design

Meet Hot Studio Hot Studio is a

research-based, people-centered design studio.

Whether it’s a logo, a book or a website:We design things people love to use.

Page 4: People-Centered Design

WebsitesFrom branded experiences to highly complex intranets

Page 5: People-Centered Design

WebsitesFrom ecommerce sites to ecommerce platforms

Page 6: People-Centered Design

WebsitesFrom science curiosity to sales productivity

Page 7: People-Centered Design

What we plan to cover

How do you design things people love to use?

• Bene!ts of research

• Overview of research methods

• Our approach to research

• How research inspired great design

Page 8: People-Centered Design

Why do it?Bene!ts of research

Page 9: People-Centered Design

Bene!ts of research

Page 10: People-Centered Design

Bene!ts of research

Page 11: People-Centered Design

Bene!ts of research

Page 12: People-Centered Design

Bene!ts of research

Page 13: People-Centered Design

The world of researchOverview of research methods

Page 14: People-Centered Design

Overview of research methods

Fundamental questions of user research

• Who are your target audience(s)?

• What are their needs, wants, or aspirations?

• Which of these can you satisfy online?

Page 15: People-Centered Design

Quantitative vs. qualitative methods• Quantitative Research = Information presented in numeric form.

Respondents answers are counted, summed, and typically presented in terms of percentages or averages.  

• When should you use it? When you need to generalize about people’s speci!c responses.

• Qualitative Research = Exploration of people’s behaviors, attitudes, opinions, and beliefs. It allows us to reap rich insights about people’s underlying motivations, feelings, values, attitudes and perceptions.

• When should you use it? To gain deep understanding of the mindset of your target audience.

Page 16: People-Centered Design

Contextual inquiryWhat is it?• Also called “ethnography,” “contextual

observation,” “"eld studies”• 1-2 moderators observe users in their home,

at work, or in another typical environment

What’s it good for?• When it’s critical to see precisely how a user

behaves in a natural setting

Associated costs• Do it yourself or hire an “observer”• Time for analyzing "ndings and writing

report

Contextual inquiry in the jungle (above) or at the Gap (below).

Page 17: People-Centered Design

Surveys & questionnairesWhat are they?• Online or printed questions• Can include both multiple choice/numbers-

based answers as well as open-ended comments

What are they good for?• Getting feedback on what people think or do

(but not why)

Associated costs• Fees for survey and reporting tools• Time for analyzing the data• Thank you gift to participants

Except from Zoomerang questionnaire on SFMOMA project.

Caution: Can be really annoying if over-used! Also, hard to follow up.

Page 18: People-Centered Design

Focus groupsWhat are they?• Form of qualitative research• One researcher to several respondents• Structured, group discussion

What are they good for?• Measuring general attitudes about a product

or concept• Generating ideas

Associated costs• Moderator fees• Time for analyzing data and writing report• Participant fees

Focus groups usually look like a lot of people sitting around a table talking. This is a focus group we conducted with eight art museum representatives from around the world.

Caution: Focus groups can easily be dominated by one member. What people say isn’t always what they do.

Page 19: People-Centered Design

InterviewsWhat are they? • Usually one-on-one• May follow a structured discussion guide• Allows the researcher to observe non-verbal

communication closely

What are they good for?• Excellent way to get an in-depth understanding

of user needs• Ideal for sensitive topics

Associated costs• Do it yourself or hire a moderator• Thank you gift to participants• Possible audio/video recordings• Time for analyzing data and writing report Caution: If you don’t ask questions in

the right way, you may get misleading information.

Hot Studio interviewing stakeholder for umc.org redesign project.

Page 20: People-Centered Design

Usability testingWhat are they?• One-on-one sessions, in person or remote, to

test prototype• Can be on paper or computer

What are they good for?• Re"ning an interface

Associated costs• Possible video/audio recordings• Facility rental• Moderator fees• Participant fees• Time for analyzing data and a written report

Scenes from the testing facility at Otivo, one of Hot’s testing partners

Page 21: People-Centered Design

Customer relationship data What is it?• Data about how audience is

interacting with you or your site• Can come from web log "les,

customer support agents, and anyone who interacts with the end-user

What’s it good for?• Going beyond what people say

they’ll do, and learning what people really do

Associated costs• Fees for reporting tool• Data analysis

Page 22: People-Centered Design

The quest for insightOur approach to research

Page 23: People-Centered Design

When to use research

Page 24: People-Centered Design

When to use research

surveys

ethnography

focus groups

interviews

customer data

usability testing

Page 25: People-Centered Design

These insights often inspire new and creative design ideas.

Our research reveals many detailed !ndings.

Some of these "ndings lead to insights about what the target audience really needs.

How we use this information

Page 26: People-Centered Design

From insight to inspirationHow research inspired great design

Page 27: People-Centered Design

California Academy of Sciences (before)

Page 28: People-Centered Design

California Academy of Sciences

What we learned• Site had to serve needs of everyone from kids to families to

single adults, teachers, donors and sta!• Environmental problems can be depressing – people want

actionable, inspirational steps• Sta! scientists have compelling stories to tell

Page 29: People-Centered Design

CAS: New interactive home page

Page 30: People-Centered Design

CAS: Science “heros” bring science to life

Page 31: People-Centered Design

CAS: Animations create sense of whimsy

Page 32: People-Centered Design

SFMOMA (before)

Page 33: People-Centered Design

SFMOMA—What we learned

Many of the site users• Come from surprising variety of professions and

backgrounds• Are interested, but not necessarily educated, about

modern art• Are fairly passive about Web 2.0-type features• Don’t understand the di!erence between exhibitions and

collections

Page 34: People-Centered Design

SFMOMA: Help people plan their visitInsight: Users don’t understand the di#erence between exhibitions and the permanent collection. They just want to !nd out “what’s going on.”

Design Idea: Create a one-stop section called “Exhibitions + Events.”

Old navigation separates exhibitions from the calendar.

This sketch of new navigation shows an “Exhibitions + Events” section.

Page 35: People-Centered Design

SFMOMA: Be strategic about Web 2.0 features

Insight: Users expressed surprisingly little interest in Web 2.0 features. Any features we incorporate can’t rely too heavily on user participation and should help to make the artwork more accessible.

Design Idea: Bring in informal, outside voices and perspectives that can succeed with minimal user participation.

Page 36: People-Centered Design

SFMOMA: Layer information for diverse usersInsight: General site visitors are looking for very di#erent information than scholars and academics.

Design Idea: Add detailed information in tabs and layers.

Page 37: People-Centered Design

Open Architecture Network

Page 38: People-Centered Design

Open Architecture Network

What we learned• System had to meet diverse needs of architects, funders,

displaced families, project managers, and more• Designers have a hunger to see design, get inspired• Project teams also need to promote work to general

public, show progress to funders• Project teams need place to share "les, comment on

work, and other tools for managing projects

Page 39: People-Centered Design

OAN: Robust search tool

Page 40: People-Centered Design

OAN: A forum to promote and discuss designs

Page 41: People-Centered Design

OAN: Workspace for team collaboration

Page 42: People-Centered Design

United Methodist Church Youth (before)

Page 43: People-Centered Design

United Methodist Church Youth

What we learned• Negative perceptions of church include “It’s boring” and

“I don’t want to adopt pre-de"ned beliefs”• Teens don’t want to be “preached” at – they can handle

tough theological ideas• Reaching out to peers about religion can be risky• Teens are media savvy, distrustful of marketing, looking

for authenticity

Page 44: People-Centered Design

UMC Youth: A place where teens can connect

Page 45: People-Centered Design

UMC Youth: Providing a way to share their voice

Page 46: People-Centered Design

UMC Youth: Share in a “non-churchy” way

Page 47: People-Centered Design

Once Upon a School

Page 48: People-Centered Design

Once Upon a School

What we learned• Achievement leaps when students gets 2-3 hours of

undivided attention• Teachers and parents need help• There are so many people – journalists, graduate

students, copywriters, software developers, retired professionals, and more – willing to give their time

• At 826 Valencia blogs successfully facilitate storytelling

Page 49: People-Centered Design

OUAS: A place to tell stories and get inspired

Page 50: People-Centered Design

OUAS: Connecting teachers with the community

Page 51: People-Centered Design

OUAS: Inspiration through storytelling

Page 52: People-Centered Design

Relative costs of user participation• Costs include:

• Initial price of technology

• Design, installation and maintenance

• Oversight, content creation and moderating

• Upgrades

• RSS + other syndicated content• Auto-generating alerts/emails to users• Institutional blogging / Twittering• Creating an institutional Flickr, Facebook or YouTube channel

• Rating• Tagging• Commenting

• Letting users add institutional content to personal site; or to Digg, del.ici.ous, Flickr

• Moderating discussions• Creating podcasts and webcasts• Implementing Google maps functionality

• Allowing users to add their own content to institution site (video, images ...)• Creating and maintaining a Wiki

• Creating and maintaining a virtual world (Second Life)

• Creating a fully-functional social networking site

• Designing for mobile• Flash interactivity• Dynamic page designs (using DHTML, AJAX, Flash, Flex)

Note: Many platforms have Web 2.0 features out of the box

Page 53: People-Centered Design

Conclusions• Interactivity is not a one-size-!ts-all

• Research can help you be strategic about where you put design e#ort

• There are low-budget ways to do this

Thank you!

Katrina Alcorn, [email protected]

Renee Anderson, [email protected]