An intro to user experience as a design practice and how to apply it to project/product development.

1. UX
Laying a Foundation for
User Experience Design
at SPS Commerce
Chuck Mallott
UX Design Manager
29 OCT 2013

2. Hello.
2

3. Simon Sinek:
People don’t buy
what you do;
they buy why you do it.
3

4. WHY
HOW
WHAT
Make smart, powerful and efficient
software that delights users.
Create a great user experience built
upon modern technology and design
standards.
Research, testing, discovery,
sketching, wire-framing, designing,
prototyping, iterating.
4

5. UX provides design direction and insight
to make smart, powerful, efficient software
that delights users.
5

6. What is UX?
6

7. HNO
USER EXPERIENCE
G
ETIN
K
MAR
TEC
ES &
SAL
What is feasible, given
time, resources and
budget?
LOG
Y
A voice for our customers
What is desirable to our customers?
What is the value to
our business?
How do we get more
customers?
7

8. 8
Source: stuffhappens.com by Eric Burke

9. 9
Source: stuffhappens.com by Eric Burke

10. 10
Source: stuffhappens.com by Eric Burke

11. UI, UX! What’s the difference?
UI (USER INTERFACE)
ypically, the means by
T
which a person
interacts with a website
or application.
does it look like?
What
ow do I use it?
H
UX (USER EXPERIENCE)
The perceived quality of
engagement a person
has when interacting with
a specific design.
How do I feel?
Do I trust these people?
11

12. User Experience Design
UXD
The multi-disciplinary
approach of designing
online experiences with a
focus on the user.
Who is using this?
What does the user need?
How will the user respond?
12

13. UX Themes
1
Design, not Decoration
2
Product Maturity
3
Problem Solving
4
Interface-Driven Architecture
13

14. UX Themes
1
Design, not Decoration
a.k.a.
Form vs. Function
14

15. Frank Lloyd Wright:
Form and function
should be one, joined in
spiritual union.
15

16. 16

17. 17

18. Steve Jobs:
Design is not just what it
looks like and feels like.
Design is how it works.
18

19. UX Themes
2
Product Maturity
19

20. The Goal
Moving SPS Commerce products up the pyramid of experiential maturity
Focused on Experiences
Has personal
significance
MEANINGFUL
Requires values
PLEASURABLE
This is the chasm that is REALLY
hard for organizations to cross
Memorable experience worth sharing
CONVENIENT
Super easy-to-use, works like I think
Requires strengths
USABLE
Can be used without difficulty
RELIABLE
Requires skills
Is available and accurate
FUNCTIONAL
Works as programmed
Focused on Tasks
20
Adapted from Stephen Anderson’s product maturity model http://goo.gl/OX3ZP)

21. Forrester Research:
Websites that are hard to
use frustrate customers,
forfeit revenue and
erode brands.
21

22. UX Themes
3
Problem Solving
What do our users need?
22

23. 23

24. UX is problem solving
Identifying the Problem
RESEARCH
“Users are confused by
our navigation.”
Crafting the Solution
IA
DESIGN
“How can we organize our
content so it aligns with
what users are expecting
to find?”
“How do we make sure
the navigation
elements look nested
and clickable?
DEVELOPMENT
“What is the best way to
build this nav bar?”
“What happens on a tablet
or phone?”
Tools & Deliverables
✓ Contextual
Observation
✓ Mental Maps
✓ Mood Boards
✓ JavaScript
✓ Ruby
✓ Taxonomy Maps
✓ Style Guides
✓ HTML
✓ Python
✓ User Interviews
✓ Card Sorting
✓ Design Patterns
✓ CSS
✓ .NET
✓ Usability Testing
✓ Process Flows
✓ Prototypes
✓ Sass
✓ APIs
✓ Personas
✓ Wireframes
✓ Design Composites
✓ PHP
✓ Heuristic Analysis
✓ Site Maps
✓ Typography/Iconography
✓ Prototypes
✓ HTML/CSS
24

25. Jason Fried:
The design is done when
the problem goes away.
25

26. UX Themes
4
Interface-Driven Architecture
Allows a variety of stakeholders to discover
what the real needs of the project are —
before any code is written.
26

27. Ben Schneiderman:
A picture is worth a thousand words.
An interface is worth a thousand
pictures.
27

28. Let’s do this ...
28

29. Before this ...
29

30. And definitely before any of this ...
30

31. s
w
e
e
t
s
p
o
t
When?
The earlier
the better
DEPLOY
DEVELOP
PROTOTYPE
DESIGN
PLAN
!
IDEA
PRIORITIZE
$
Cost of making
changes
31

32. UX@SPS
32

33. UX Plan
1
Who are our users?
2
Publish design heuristics
3
Begin product-specific UX tasks
4
Establish UI patterns
5
Socialize design-thinking
33

34. UX Plan
1
Who are our users?
34

35. UX Plan
2
Publish design heuristics
What the heck is a heuristic?
Put simply: General guidelines based on intuitive
judgement or common sense.
35

36. Heuristic Analysis
36

37. UX Plan
3
Begin product-specific tasks
Discovery
Design
Build
✓ User interviews &
contextual observation
✓ Sketches
✓ Prototype
✓ Process flows
✓ Testing & feedback
✓ Wireframes
✓ Iteration
✓ Product-specific personas
✓ Heuristic analysis of
existing state
✓ Design patterns
✓ Information architecture &
taxonomy exploration
✓ High-resolution
mockups
✓ Content strategy
37

38. What is usable, useful and desirable?
UX
Design
Product
Management
What is needed and,
therefore, valuable?
Engineering
What is possible and
what is not?
38

39. UX
Funnel
market data
product needs business rules trends
analytics
requirements
user stories
Product Management
content
information
architecture
visual
design
UXD
front-end
development
user
research
usability
prototypes
wireframes
process flows
design specs
style guide design patterns
?
:)
Engineering
39

40. UX Plan
4
Establish UI patterns
The brand expressed as a UI
40

41. Design Patterns
g
/brandin
✓ Logo
avigation
✓ N
Layout
✓
Buttons
✓
elements
Form
✓
✓
s
l window
Moda
ography
✓ Typ
y
nograph
✓ Ico
s
tification
✓ No
g
r handlin
✓ Erro
s
adcrumb
✓ Bre
s
ata table
✓ D
d filtering
Tags an
✓
n
Paginatio
✓
✓ Links
41

42. Applying the design patterns
Across Products
Retail Universe
POS Analytics
WebForms
Catalog
Enablement Tools
Across Devices
42

43. UX Plan
5
Socialize design-thinking
43

44. 44

45. UX: It’s everyone’s job
content
information
architecture
visual design
UX
DESIGN
front-end
development
user research
usability
marketing
development
product
management
support
sales
customer service
Adapted from Jeremy Johnson’s 2010 and Beyond presentation
45

46. When?
46

47. 6-Month Timeline
UX & Product Management
Learning and discovery
Persona development
Develop and publish design heuristics
Product Nomenclature
Socialize design-thinking
Establish interface design patterns
Create and curate a shared design patterns library
Product-specific UX work
OCT
2013
NOV
2013
DEC
2013
JAN
2014
FEB
2014
MAR
2014
47

48. Simon Sinek
It’s better to go slow in the right
direction than to go fast in the
wrong direction.
48

49. Questions?
llott
uck MaManager
Ch
gn
i
UX Des 466
12.844.2
6
@ cma
m
erce.co
scomm
llott@sp
mallott
@chuck
huck
le.com/c
dribbb
HipChat @chuckmallott
49