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

1. People-Centered Design
Creating Cost-E ective Websites
June 25, 2008
Commonwealth Club, San Francisco
Katrina Alcorn, Hot Studio
Renee Anderson, Hot Studio

2. Introductions
Katrina Alcorn
Principal, User Experience & Content
Renee Anderson
Director of User Experience

3. 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.

4. Websites
From branded experiences to highly complex intranets

5. Websites
From ecommerce sites to ecommerce platforms

6. Websites
From science curiosity to sales productivity

7. 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

8. Why do it?
Bene ts of research

9. Bene ts of research

10. Bene ts of research

11. Bene ts of research

12. Bene ts of research

13. The world of research
Overview of research methods

14. 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?

15. 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.

16. Contextual inquiry
What 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).

17. Surveys & questionnaires
What 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
Caution: Can be really annoying if over-used!
Also, hard to follow up.
Except from Zoomerang questionnaire on SFMOMA
project.

18. Focus groups
What 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
Focus groups usually look like a lot of people sitting
• Moderator fees around a table talking. This is a focus group we
• Time for analyzing data and writing report conducted with eight art museum representatives
from around the world.
• Participant fees
Caution: Focus groups can easily be
dominated by one member. What people
say isn’t always what they do.

19. Interviews
What 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
Hot Studio interviewing stakeholder for umc.org
Associated costs redesign project.
• 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.

20. Usability testing
What 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

21. 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

22. The quest for insight
Our approach to research

23. When to use research

24. When to use research
ethnography
focus groups
surveys
interviews
usability testing
customer data

25. How we use this information
Our research reveals Some of these These insights often
many detailed ndings lead to inspire new and
ndings. insights about what creative design ideas.
the target audience
really needs.

26. From insight to inspiration
How research inspired great design

27. California Academy of Sciences (before)

28. 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

29. CAS: New interactive home page

30. CAS: Science “heros” bring science to life

31. CAS: Animations create sense of whimsy

32. SFMOMA (before)

33. 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

34. SFMOMA: Help people plan their visit
Insight: 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.

35. 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.

36. SFMOMA: Layer information for diverse users
Insight: General site visitors
are looking for very di erent
information than scholars and
academics.
Design Idea: Add detailed
information in tabs and layers.

37. Open Architecture Network

38. 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

39. OAN: Robust search tool

40. OAN: A forum to promote and discuss designs

41. OAN: Workspace for team collaboration

42. United Methodist Church Youth (before)

43. 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

44. UMC Youth: A place where teens can connect

45. UMC Youth: Providing a way to share their voice

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

47. Once Upon a School

48. 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

49. OUAS: A place to tell stories and get inspired

50. OUAS: Connecting teachers with the community

51. OUAS: Inspiration through storytelling

52. Relative costs of user participation
• Costs include:
• Initial price of technology
• Design, installation and maintenance
• Oversight, content creation and moderating
• Upgrades
• Allowing users to add their own
• Letting users add institutional • Rating content to institution site (video,
content to personal site; or to • Tagging • Creating a fully-functional
images ...) social networking site
Digg, del.ici.ous, Flickr • Commenting • Creating and maintaining a Wiki
• RSS + other syndicated content • Moderating discussions • Designing for mobile • Creating and
• Auto-generating alerts/emails to users • Creating podcasts and • Flash interactivity maintaining a virtual
• Institutional blogging / Twittering webcasts • Dynamic page designs world (Second Life)
• Creating an institutional Flickr, • Implementing Google (using DHTML, AJAX,
Facebook or YouTube channel maps functionality Flash, Flex)
Note: Many platforms have Web 2.0 features out of the box

53. 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, katrina.alcorn@hotstudio.com
Renee Anderson, renee.anderson@hotstudio.com