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