Designing Experience!
School of Visual Arts | Summer 2009

Intro
Goals of this workshop
• Understand the basic concepts of user
experience design.
• Experience the general process and
techniques used on a design project.

4

view by: sizes:
both all sizes

Introduction

Intro
Anh Dang
Iʼm an information architect at The New York Times,
adjunct professor at Pratt Institute,
instructor at School of Visual Arts,
speaker at various design conferences.

Intro
Robert Stribley
Iʼm an senior information architect and content
strategist at Razorfish,
writer of music and arts reviews,
producer/promoter for a variety show,
photographer of various things.

Intro
About You
• What is your name?
• What do you do?
Select one or the other
• For Love or For Money
• Spontaneous or Plan
• Lavish or Frugal
• Brisket or Ribs

Agenda

Agenda
Morning
• Background
• User Research
• Competitive Audit
• Business Proposal
• Personas
• LUNCH!

Agenda
Afternoon
• Content Analysis & Card Sorting
• Design Concepts
• Grids
• Sketches
• Q&A

Background

Background
in•for•ma•tion ar•chi•tec•ture n.
• The combination of organization, labeling, and
navigation schemes within an information
system.
• The structural design of an information space to
facilitate task completion and intuitive access to
content.
• The art and science of structuring and classifying
web sites and intranets to help people find and
manage information.
• An emerging discipline and community of practice
focused on bringing principles of design and
architecture to the digital landscape.
Information Architecture for the World Wide Web (1st Edition), p . 4, Rosenfeld and Morville

Background
The Information Architecture Institute defines
information architecture as “the art and
science of organizing and labeling websites,
intranets, online communities and software to
support usability.”

Background
\"It's hard to say who really is an
information architect. In some
sense, we all are.”
— Alex Wright, Author Glut

Background
A Brief History of IA
1975
• Richard Saul Wurman coined the term
“information architecture” to describe the field
now more likely described as “information
design”
1994
• Formation of Argus Associates in Ann Arbor,
WI, the first firm devoted to IA
1998
• First edition of Peter Morville and Lou
Rosenfeldʼs Information Architecture for the
World Wide Web, affectionately known as
“The Polar Bear” book.

Background
A Brief History of IA
2000
• First IA Summit, Boston, MA – Defining
Information Architecture
2002
• Boxes & Arrows, online journal for information
architects goes live
• 3 new books on IA published, including Jesse
James GarrettʼsThe Elements of User
Experience
2009
• 10th Annual IA Summit held in Memphis, TN
Partially adapted from:
“A brief history of information architecture” by Peter Morville
Information Architecture: Designing information environments for purpose, edited by Alan Gilchrist and Barry Mahon

Design Process

Design Process
interface
information architecture

Design Process
context
IA
content
users

Design Process
Goal of user experience design
Communicate a message that allows users
to accomplish their goals easily, simply, and
rapidly.

Design Process
Discovery
Definition
Design
Development

Design Process
Discovery
Definition
Design
Development
• Stakeholder interviewers
• Business requirements
• Competitive & Comparative Audits
• User Research

Design Process
Discovery
Definition
Design
Development
• Persona/Scenario Development
• Content & Meta Data Audits
• Use Cases
• Creative Brief
• Moodboards

Design Process
Discovery
Definition
Design
Development
• Site Maps
• Task Flows
• Wireframes
• Prototypes
• User Testing
• Visual Design

Design Process
Discovery
Definition
Design
Development
• Functional
Specifications
• Quality
Assurance
• Site Development

Letʼs Get Started

A Business Proposal
Summer in the City
Flickr.com: yandle

A Business Proposal
forgood is a new start up that wants to
become the online resource for users to learn
about all the summer events in New York City.
Designs by Paul Lau

User Research

User Research
“Through research, we aim to learn enough
about the business goals, the users, and the
information ecology to develop a solid
strategy.”
– Louis Rosenfield & Peter Morville

User Research
Flickr.com: yandle

User Research
Methodology
• Focus Groups
• Surveys
• Interviews
Goals
• Identify patterns and trends in user behavior,
tasks, preferences, obstacles.

User Research
Class Exercise: Survey Questions
• How do you learn about summer events in
NYC?
• What type of events are you interested in?
• Whatʼs more important to you-
– Price
– Type of Event
– Location
– Date
• How often do you attend the events?

Competitive Review

Discovery: Competitive Audit
“This type of assessment helps set an
industry ʻmarkerʼ by looking at what the
competition is up to, what features and
functionalities are standard, and how others
have solved the same problems you might
be tasked with.”
– Dorelle Rabinowitz

Competitive Review
Methodology
• Usability Criteria
• Scorecard
• Heuristic Evaluation
Goals
• Review and analyze competitor sites
according to particular criteria.
• Draw key findings, which can influence and
guide IA through the design phase.

Competitive Review
Competitors

Competitive Review: Flavorpill
Flavorpill
“
Flavorpill loves culture. We
embrace the high-brow, low-brow,
underground, mainstream, and
everything in between — as long
as it's good.
A city guide for those who like to
go out, Flavorpill publishes a daily
update of worthwhile cultural-
event listings, from art exhibits
and readings to concerts, plays,
”
and festivals.
http://flavorpill.com/about

Competitive Review: Flavorpill
Home Page
• Search
• Up Next
• This Week
• Events calendar
• Flavorwire
• Free Events
• Big Shows

Competitive Review: Flavorpill
Navigation
Primary
Utility
• Events
• Sign In
• Daily Dose
• Join Flavorpill
• Cover Art
• Email signup (Get weekly event
updates!)
Secondary
• Search
• City Tabs
• About Us
• Our Blog

Competitive Review: Flavorpill
Functionality
• Search
• Profile
• Calendar
• Submit cover art
• Filtering
• Google maps
• Comments

Competitive Review: Going.com
Going.com
“
Going helps you find fun things to do
and fun people to meet.
Ever wish there were one place where
you can find all the events around
town?
Want to know whether an event is worth
going to and see who else likes it?
Looking to meet some new people who
are up for doing fun things?
We felt the same frustration and
decided to do something about it. The
result is Going: we now have hundreds
of events a day and thousands of
”
people who are up for doing fun things.
http://newyork.going.com/about_site

Competitive Review: Going.com
Home Page
• Post an Event
• Search
• Organizer Tools
• Whatʼs Hot
• Browse Events
• Next in Top this Week
• My Calendar
• Iʼm a Fan Of
• Similar People
• Photobooth
• Recession Busters
• Recently Cool Listed
• City Buzz

Competitive Review: Going.com
Navigation
Primary
Utility
• Things to Do
• Profile
• Places to Go
• Inbox
• People to See
• Settings
• Logout
Secondary
• Post an Event
• Recession Busters
• Search
• Top Photo
• More Cities

Competitive Review: Going.com
Functionality
• Search
• Event posting
• Calendar
• RSVP online
• Profiles
• Picture rating
• Buy tickets
• Event filtering
• Who likes it?
• Link to Google Maps
• Comments

Competitive Review: NYCgo.com
NYCgo.com
“ NYC & Company is New York City’s official
marketing, tourism and partnership
organization. Our mission is to maximize
travel and tourism opportunities throughout
the five boroughs, build economic
prosperity and spread the dynamic image
of New York City around the world. With
the launch of major interactive initiatives—
including nycgo.com and the Official NYC
Information Center—NYC & Company
becomes the ultimate resource for visitors
and residents to find everything they need
”
about what to do and see in New York City.
http://nycgo.com/?event=view.footerArticle&id=49568

Competitive Review: NYCgo.com
Home Page
• Search
• This Week
carousel
• NYC Insider
• NYC Essentials
• Events calendar
• Recent articles
• Filter by borough
• My NYC profiles

Competitive Review: NYCgo.com
Navigation
Primary
Secondary
• Plan Your Visit
• Do Business with NYC & Company
• Hotels
• Dining
Utility
• Shopping
• Search
• Nightlife
• Language Selector
• Arts & Entertainment
• Sports & Leisure
• My NYC
• Offers
• Events
• NYC Life

Competitive Review: NYCgo.com
Functionality
• Search
• Google maps
• Calendar
• Find an event
• Filtering
• MyNYC

Competitive Review
Key Findings
• Search placed prominently on each site, sometimes with
advanced search
• Clear need for and emphasis on filtering of events
• Calendars provide obvious benefit but are handled with
varying degree of success
• Maps also prove helpful, if not as necessary
• Profiles and community features are also common, but
handled with varying degrees of detail, success
• Free events often highlighted/bubbled up
• Event detail pages vary, may have maps, RSVP, sharing,
rating, commenting functionality

Personas

Personas
Designs by Paul Lau

Personas
“Personas summarize user research findings
and bring that research to life in such a way
that everyone can make decisions based on
these personas, not based on themselves.”
– Steve Mulder

Personas
Methodology
• Cluster Analysis
Goals
• Create a narrative based on real data to
illustrate user behavior, motivations, goals.

Personas
Lavish
Spontaneous
Planned
Frugal

Personas
JACK
The “Take-It-All-In” Tourist
“Iʼm visiting the Big Apple
and want to find things that
are cool to check out
besides the typical tourists
attractions.”
Lavish
Spontaneous
Planned
Frugal

Personas
JULIETTE
The “Must-Plan” Mother
“I want to find things that my whole
family can do together. With kids
under 5 years old, itʼs tough to
keep them entertained!”
Lavish
Spontaneous
Planned
Frugal

Personas
KATE
The “No-Non-Sense” Native
“I just want the inside scoop of
the best and most interesting
things to do in the city.”
Lavish
Spontaneous
Planned
Frugal

Personas
SAWYER
The “Happy-Go-Lucky” Cheapster
“I just want to have fun and
not spend a lot of money. ”
Lavish
Spontaneous
Planned
Frugal

Personas
KATE
The “No-None-Sense” Native
JACK
The “Take-It-Stride” Tourist
SAWYER
JULIETTE
The “Happy-Go-Lucky”
The “Must-Plan” Mother
Cheapster

Personas
Class Exercise: Personas
Each team is assigned a Persona. You will role play your
persona to give us a good picture of who you are and what
your behaviors are.
• Characteristics (likes, dislikes, etc.)
• Goals
• Obstacles

Conceptual Design

Conceptual Design
Home Page
Category Page
Details Page

Lunch Break

Agenda
Afternoon
• Content Analysis & Card Sorting
• Sketches
• Wireframes
• Q&A

Card Sorting

Card Sorting
“There are often better ways to organize
data than the traditional ones that first
occur to us. Each organization of the
same set of data expresses different
attributes and messages. It is also
important to experiment, reflect, and
chose which organization best
communicates our messages.”
– Nathan Shedroff

Card Sorting
Flickr.com: cannedtuna

Card Sorting
Methodology
• Grouping and labeling with index cards, post
it notes.
Goals
• Find names for groups of content based on
userʼs perspective.
• Organize content more efficiently.

Card Sorting
Class Exercise: Card Sorting
In teams, organize the data.
L- Location
A- Alphabet
T- Time
C- Categories
H- Hierarchy

Design Concepts

Design Concepts
Donald Norman

Design Concepts
Key Concepts
• Affordance
• Mapping
• Constraints
• Visibility
• Feedback

Design Concepts
Affordance
“Perceived
properties that
determine how a
thing is used [and]
provide strong cues
to the operations of
things.”
-
Donald Norman
77

Design Concepts
Mapping
Relationship
between two things
http://flickr.com/photos/annavsculture/441610821/

Design Concepts
Constraints
Limitations that
constrain possible
interactions
http://flickr.com/photos/hippie/2561854165/

Design Concepts
Visibility
“Just the right things
have to be visible:
to indicate what
parts operate and
how, to indicate
how the user is to
interact with the
device.”
- Donald Norman
http://flickr.com/photos/huladancer22/530743543/

Design Concepts
Feedback
“Sending back to
the user
information about
what action has
actually been done,
what result has
been
accomplished.”
- Donald Norman
81

Grids

Grids
“I think the true benefit of using a grid is
that as you learn how to use a grid, you
start to think systemically about the
solutions you design. You start to try
and see how various details can echo
one another, how different regions of
the canvas can be reused or used for
similar things, how like elements can
be grouped together.”
– Khoi Vinh

Grids

Grids

Grids

Grids

Grids

Grids

Grids

Grids

Sketching

Sketching

Sketching
“There are techniques and processes
whereby we can put experience front and
center in design. My belief is that the basis
for doing so lies in extending the traditional
practice of sketching. ”
-Bill Buxton

Sketching
Methodology
• Draw!
• Limit your time
• Donʼt worry about mistakes
Goals
• Quickly generate ideas and refine through
iterations.

Sketching
Sketching Through the Ages
1485-1487
2005
Ornithopter by Leonardo da Vinci
Schematic representation of
the major components of a
helicopter by Richard Wheeler

Sketching

Sketching

Sketching

Sketching
Twitter
[This sketch] has very special significance – it's hanging in the office somewhere with one other page.
Whenever I'm thinking about something, I really like to take out the yellow notepad and get it down.
– Jack Dorsey, Twitter
“twttr sketch” Twitter.com

Sketching
Attributes of a Sketch
• Quick
• Timely
• Inexpensive
• Disposable
Bill Buxton
• Plentiful
Sketching User
Experiences
• Clear vocabulary
• Distinct gesture
• Minimal detail
• Appropriate degree of refinement
• Suggest & explore rather than confirm
• Ambiguity

Design: Sketching
Class Exercise: Sketching & Wireframes
In teams, sketch your ideas.

Q & A

Braunʼs 10 principles of good design
Good design is…
1. Innovative
2. Enhances the usefulness of product
3. Is aesthetic
4. Displays the logical structure of a product; itʼs form follows
its function
5. Is unobtrusive
6. Is honest
7. Is enduring
8. Is consistent right to the details
9. Is ecologically conscious
10. Is minimal design

Resources
SITES
• Boxesandarrows.com
• Thegridsystem.org
• Konigi.com
• Subtraction.com
PROFESSIONAL ORGANIZATIONS
• Interaction Designers Association (IxDA)
• Usability Professionalsʼ Association (UPA)
• Human Computer Interactions (HCI)
• AIGA

Resources
www.slideshare.com/sva.ia

The End.