H i .

I’m Sean. • @kalisurfer

I’m Sean. • @kalisurfer
http://twofortyeight.com • http://sothisisthefuture.posterous.com

I’m from
Let’s talk about user-centric design

What Are The
Challenges?

Challenges

Challenges
0 1 2 3

Challenges
0 1 2 3
What is UX?

Challenges
0 1 2 3
What is UX? We do some UX.

Challenges
0 1 2 3
What is UX? We do some UX. We see UX as a
competitive adv. and
are investing in it.

Challenges
0 1 2 3
What is UX? We do some UX. We see UX as a We see UX as
competitive adv. and critical. We’re
are investing in it. looking to evolve.

Challenges
0 1 2 3
What is UX? We do some UX. We see UX as a We see UX as
competitive adv. and critical. We’re
are investing in it. looking to evolve.
We don’t have a UX
phase.

Challenges
0 1 2 3
What is UX? We do some UX. We see UX as a We see UX as
competitive adv. and critical. We’re
are investing in it. looking to evolve.
We don’t have a UX We’ve started
phase. doing wireframes.

Challenges
0 1 2 3
What is UX? We do some UX. We see UX as a We see UX as
competitive adv. and critical. We’re
are investing in it. looking to evolve.
We don’t have a UX We’ve started We’re doing
phase. doing wireframes. personas &
approaching UX as
a collaborative
process w/creative.

Challenges
0 1 2 3
What is UX? We do some UX. We see UX as a We see UX as
competitive adv. and critical. We’re
are investing in it. looking to evolve.
We don’t have a UX We’ve started We’re doing We poll users at
phase. doing wireframes. personas & every step of the
approaching UX as way and are never
a collaborative going back to a UX-
process w/creative. free project.

So What Exactly is
User Experience?

http://www.jjg.net/ Jesse James Garret

sab ility
IA +U
+C S+
ont ext
C
http://www.jjg.net/ Jesse James Garret

Mental Models by Indi Young

t
rojec
cles stage o
nta y
fap
ny Te uches ever
Marella that to
b
an um
o f it as
Think
Mental Models by Indi Young

Mental Models by Indi Young

“Don’t make something unless it
is both necessary & useful. But if
is it both necessary & useful, don’t
hesitate to make it beautiful.”
Mental Models by Indi Young

“Don’t make something unless it
is both necessary & useful. But if
is it both necessary & useful, don’t
hesitate to make it beautiful.”
Mental Models by Indi Young

Four Approaches to
User Experience

http://www.flickr.com/photos/27076277@N04/2634194441/sizes/
o/ by Curzon79

User-centered Design: User’s behaviors and goals are the compass.
http://www.flickr.com/photos/27076277@N04/2634194441/sizes/
o/ by Curzon79

http://www.flickr.com/photos/38509565@N00/3204017156/sizes/l/
by legoloverman

Activity-centered Design: User’s tools and activities are at the center of the design equation.
http://www.flickr.com/photos/38509565@N00/3204017156/sizes/l/
by legoloverman

http://www.flickr.com/photos/vidgamer838/2874043796/sizes/l/
by Vidgamer838

System Design: User is one variable among many. Focus is on interplay of said variables.
http://www.flickr.com/photos/vidgamer838/2874043796/sizes/l/
by Vidgamer838

http://www.flickr.com/photos/kaptainkobold/257491210/sizes/o/
by KaptainKobold

Genius Design: A mad-scientist go-at-it alone approach.
http://www.flickr.com/photos/kaptainkobold/257491210/sizes/o/
by KaptainKobold

So What’s Changed?

http://www.flickr.com/photos/jhgtreasurechest/3914360308/ by Toy Master

More Choice: We are all confronted with many more choices.
http://www.flickr.com/photos/jhgtreasurechest/3914360308/ by Toy Master

Complexity: Sites aren’t static or even dynamic they are social.

http://www.flickr.com/photos/algarveyoga/2564545665/sizes/l/in/
set-72157605524746827/ by Algarve_Yoga

Complexity: Sites aren’t the only game in town anymore. Meet the kiosk.
http://www.flickr.com/photos/algarveyoga/2564545665/sizes/l/in/
set-72157605524746827/ by Algarve_Yoga

http://www.flickr.com/photos/maarten/3681188288/sizes/o/ by
Marteen

Complexity: 3D is no longer relegated to the realm of gaming. Meet Augmened Realiy.
http://www.flickr.com/photos/maarten/3681188288/sizes/o/ by
Marteen

http://www.flickr.com/photos/webbit/3257541204/sizes/l/ by
Webbit

Complexity: The click is the only interaction model in town. Meet Multitouch.
http://www.flickr.com/photos/webbit/3257541204/sizes/l/ by
Webbit

Complexity: 1024x768 is no longer the only thing you need to worry about. Meet Mobile.

User make decisions quickly

http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen

0.1 Sec
http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen

0.1 Sec 1 Sec
http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen

0.1 Sec 1 Sec 10 Secs
http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen

0.1 Sec 1 Sec 10 Secs 1 Min
http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen

0.1 Sec 1 Sec 10 Secs 1 Min 10 Min
http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen

http://www.flickr.com/photos/jhgtreasurechest/3914360308/ by Toy Master

Users are a lot more vocal
http://www.flickr.com/photos/jhgtreasurechest/3914360308/ by Toy Master

Things Aren’t What They Used To Be

Things Aren’t What They Used To Be
Jan. 2004

Things Aren’t What They Used To Be
Jan. 2004 Oct. 2009

Why it’s important?

ped*.
mL ine ss was revam
Bo tto ow proce
he % after Buy N
es t d 300
rovncrease
X Imp tore i
U S
Hero
u itar
in the G
Sales
Daily
http://www.useit.com/alertbox/timeframes.html by Jakob Nielsen

cts
odu .
r
r P nd features
you
te low price ae.
ntiated on the gam
ere compe les of
lps Difflayers the ru
he ple, music X changed
p
UXfore Ap pple’s U
e
B A

e ss 2 employees
ucce than 1
nf or tSle mor
atio99. With liin ’08.
unds in 19 venue
t
h e Fo door in re
X is ts opened its $8 million
U l
signa ey enjoye
d
in U X, 37 th
nded
Grou

ess million
ucc 1
for S ure $
n
io een able to sec
datonly b lack.
ounas not in the b
h e F yh
X is t entality, Etsncing but g
et
U fi rst m in VC fina
a user
With
http://www.businessweek.com/smallbiz/content/jun2007/
sb20070611_488723_page_2.html by Miller

tion
uA tten
ets yo
UXg

ent ion
ou Att
ge ts y
UX

Case Study Time!

Challenges

Challenges
Re-Energize the Franchise

Challenges
Re-Energize the Franchise Broadened the Audience

Challenges
Re-Energize the Franchise Broadened the Audience Increase Sales

hts
Insig
the
s with
St art

usic
tt he m
la bou
: It’s al
igh t #1
Ins

social
be ing
l ab out
: It’s al
t #2
In sigh

al S ells
3: S oci
ht #
Insig

Lessons Learned

http://www.flickr.com/photos/algarveyoga/2564545665/sizes/l/in/
set-72157605524746827/ by Algarve_Yoga

Be flexible, take what opportunity is given to you.
http://www.flickr.com/photos/algarveyoga/2564545665/sizes/l/in/
set-72157605524746827/ by Algarve_Yoga

http://www.flickr.com/photos/brickmania/3104339306/sizes/l/ By
Brickmania

We may all dream of individual success, but it’s realization is a by-product of great teams
http://www.flickr.com/photos/brickmania/3104339306/sizes/l/ By
Brickmania

Project Keys to Success

All about context. The the industry, the client’s company, it’s competitors and it’s users.
Discovery

All about context. The the industry, the client’s company, it’s competitors and it’s users.
Discovery
Strategy Brief

All about context. The the industry, the client’s company, it’s competitors and it’s users.
Discovery
Strategy Brief UX Brief

All about context. The the industry, the client’s company, it’s competitors and it’s users.
Discovery
Strategy Brief UX Brief Personas

All about context. The the industry, the client’s company, it’s competitors and it’s users.
Discovery
Strategy Brief UX Brief Personas Functional Specs

All about context. The the industry, the client’s company, it’s competitors and it’s users.
Discovery
Strategy Brief UX Brief Personas Functional Specs Feature Function Matrix

Discovery | Research Tools

Research sites, combined with user-research are very a powerful insight combo.
Discovery | Research Tools

Research sites, combined with user-research are very a powerful insight combo.
Discovery | Research Tools
Forrester Research
Great source of industry
analysis and trend insight,
competitive analysis and
best practice

Research sites, combined with user-research are very a powerful insight combo.
Discovery | Research Tools
Forrester Research Mintel Research
Great source of industry Great industry overview
analysis and trend insight, and trend identification.
competitive analysis and Has Audience
best practice segmentation which we
use as aid for personas.

Discovery | User Testing + Interviewing
Usibilla Web-Based User Testing Survey Monkey
Free resource that allows Both paid and non-paid
agencies to submit sites to versions are available.
a friends, family and Great way to poll users
potential customers and and potential customers.
see what they like and
don’t like.

User Testing + Interviewing doesn’t need to happen in a dark room.
Discovery | User Testing + Interviewing
Usibilla Web-Based User Testing Survey Monkey
Free resource that allows Both paid and non-paid
agencies to submit sites to versions are available.
a friends, family and Great way to poll users
potential customers and and potential customers.
see what they like and
don’t like.

Discovery | Personas

Discovery | Personas

Personas shouldn’t be an editorial exercise. They should be full of actionable info.
Discovery | Personas

Personas shouldn’t be an editorial exercise. They should be full of actionable info.
Discovery | Personas

Discovery | Closer Look at Pesonas

This is where context, approach and validation is put together to form the vision
Design

This is where context, approach and validation is put together to form the vision
Design
Page Description Diagrams

This is where context, approach and validation is put together to form the vision
Design
Page Description Diagrams Wireframes

This is where context, approach and validation is put together to form the vision
Design
Page Description Diagrams Wireframes Prototypes

Resources | Design Patterns
Konigi PatternTap
Great resource for Great resource that
everything form design highlights solutions other
pattern to Omnigraffle peers have used to solve
and Visio Stencils. common user experience
problems.

Design patterns are optimal solutions to common usability or accessibility problems.
Resources | Design Patterns
Konigi PatternTap
Great resource for Great resource that
everything form design highlights solutions other
pattern to Omnigraffle peers have used to solve
and Visio Stencils. common user experience
problems.

Design | Wireframes

Wireframes should not be representative of design. Tell that to someone who cares.
Design | Wireframes

Wireframes should not be representative of design. Tell that to someone who cares.
Design | Wireframes
Sketch Page Description Diagrams High-Fidelity Wireframe

ion
I terat
tching a
llabor .
tion +
ke Leads to Coenough
S it. d
do etaile
n e can y not be d
E veryo ns: Ma
Fast, Co
P ros:

g ra ms ent priority.frame.
ion Dia cus on conthe old wire
ipt designer. Fo may want
screly to
t
De Clien
t
age re left entirto designer.
P ctu
u ely r
u al Str e left enti
Pro s: Vis ructur
is ual St
Cons: V

.
them m.
ameClients lovelove the
refrnation. . Clients
Wi imagi ation
lity little to imagin
ide eaves ttle to
gh tFtion. L eaves li
Hi men a L
u ined.
g h doc el constra
h orou may fe
Pros: T igners
: Des
Cons

Development
http://www.flickr.com/photos/toechsner/3837518712/

Stay in contact. Be seen as a problem solver not someone holding on to artifacts.
Development
http://www.flickr.com/photos/toechsner/3837518712/

QA
http://www.flickr.com/photos/gregorybrown/2312539239/sizes/l/
by Gregory Brown

Be a stakeholder. UX as a discipline should have a seat at the table.
QA
http://www.flickr.com/photos/gregorybrown/2312539239/sizes/l/
by Gregory Brown

Qs?
Thank You