SlideShare une entreprise Scribd logo
1  sur  49
Télécharger pour lire hors ligne
UX

Laying a Foundation for
User Experience Design
at SPS Commerce

Chuck Mallott
UX Design Manager

29 OCT 2013
Hello.

2
Simon Sinek:

People don’t buy
what you do;
they buy why you do it.
3
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
UX provides design direction and insight
to make smart, powerful, efficient software
that delights users.
5
What is UX?

6
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

Source: stuffhappens.com by Eric Burke
9

Source: stuffhappens.com by Eric Burke
10

Source: stuffhappens.com by Eric Burke
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
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
UX Themes
1

Design, not Decoration

2

Product Maturity

3

Problem Solving

4

Interface-Driven Architecture

13
UX Themes
1

Design, not Decoration

a.k.a.

Form vs. Function

14
Frank Lloyd Wright:

Form and function
should be one, joined in
spiritual union.
15
16
17
Steve Jobs:

Design is not just what it
looks like and feels like.
Design is how it works.
18
UX Themes
2

Product Maturity

19
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)
Forrester Research:

Websites that are hard to
use frustrate customers,
forfeit revenue and
erode brands.
21
UX Themes
3

Problem Solving

What do our users need?

22
23
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
Jason Fried:

The design is done when
the problem goes away.

25
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
Ben Schneiderman:

A picture is worth a thousand words.
An interface is worth a thousand
pictures.

27
Let’s do this ...

28
Before this ...

29
And definitely before any of this ...

30
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
UX@SPS

32
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
UX Plan
1

Who are our users?

34
UX Plan
2

Publish design heuristics

What the heck is a heuristic?
Put simply: General guidelines based on intuitive
judgement or common sense.

35
Heuristic Analysis

36
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
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
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
UX Plan
4

Establish UI patterns

The brand expressed as a UI

40
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
Applying the design patterns
Across Products

Retail Universe

POS Analytics

WebForms

Catalog

Enablement Tools
Across Devices

42
UX Plan
5

Socialize design-thinking

43
44
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
When?

46
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
Simon Sinek

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

48
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

Contenu connexe

Tendances

UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX Murali Krishna
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"MITAcademy1
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It WorksAciron Consulting
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeMadhuri Garg
 
What’s the difference between a UX and UI designer? (Part one)
What’s the difference between a UX and UI designer? (Part one)What’s the difference between a UX and UI designer? (Part one)
What’s the difference between a UX and UI designer? (Part one)iFactory Digital
 
Fundamentals and practices of UX research
Fundamentals and practices of UX research Fundamentals and practices of UX research
Fundamentals and practices of UX research Lucia Trezova
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design ProcessesMuhammad Hijazi
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)iFactory Digital
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX IntroductionPhuong Hoang Vu
 

Tendances (20)

UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
"What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?""What Are the Key Differences between UI and UX Design?"
"What Are the Key Differences between UI and UX Design?"
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
Ux design process
Ux design processUx design process
Ux design process
 
What is UX?
What is UX?What is UX?
What is UX?
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
 
What’s the difference between a UX and UI designer? (Part one)
What’s the difference between a UX and UI designer? (Part one)What’s the difference between a UX and UI designer? (Part one)
What’s the difference between a UX and UI designer? (Part one)
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
Fundamentals and practices of UX research
Fundamentals and practices of UX research Fundamentals and practices of UX research
Fundamentals and practices of UX research
 
UI / UX Design Processes
UI / UX Design ProcessesUI / UX Design Processes
UI / UX Design Processes
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
UX Writing
UX WritingUX Writing
UX Writing
 
[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction[UX Series] 1 - UX Introduction
[UX Series] 1 - UX Introduction
 

Similaire à What is User Experience?

Introduction to UX
Introduction to UXIntroduction to UX
Introduction to UXEffective
 
Building a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and CreativityBuilding a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and Creativityuxpin
 
Bunnyfoot UX Strategy Workshop
Bunnyfoot UX Strategy WorkshopBunnyfoot UX Strategy Workshop
Bunnyfoot UX Strategy WorkshopDavid Williams
 
User Experience and Prototyping
User Experience and PrototypingUser Experience and Prototyping
User Experience and PrototypingKshitiz Anand
 
Training Webinar: From a bad to an awesome user experience - Training Webinar
Training Webinar: From a bad to an awesome user experience - Training WebinarTraining Webinar: From a bad to an awesome user experience - Training Webinar
Training Webinar: From a bad to an awesome user experience - Training WebinarOutSystems
 
User Experience: A Lean UX Process
User Experience: A Lean UX ProcessUser Experience: A Lean UX Process
User Experience: A Lean UX ProcessRicardo Luiz
 
Fra idé til value proposition
Fra idé til value propositionFra idé til value proposition
Fra idé til value propositionSusanne Brøndberg
 
UX principles for co-founders
UX principles for co-foundersUX principles for co-founders
UX principles for co-foundersCyber-Duck
 
Demystifying User Experience
Demystifying User ExperienceDemystifying User Experience
Demystifying User ExperienceCake and Arrow
 
Wells Fargo Ux Strategy - Strategy Presentation
Wells Fargo Ux Strategy - Strategy PresentationWells Fargo Ux Strategy - Strategy Presentation
Wells Fargo Ux Strategy - Strategy PresentationBrad Briscoe
 
CX Strategy - Presentation to the Human Centred Design Group, Dubai dubai ...
CX Strategy - Presentation to the Human Centred Design Group, Dubai    dubai ...CX Strategy - Presentation to the Human Centred Design Group, Dubai    dubai ...
CX Strategy - Presentation to the Human Centred Design Group, Dubai dubai ...User Vision
 
User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience ExplainedSameer dwivedi
 
Ux matters2016-final
Ux matters2016-finalUx matters2016-final
Ux matters2016-finalNada Cbo
 
Mobile Best Practices for UX
Mobile Best Practices for UXMobile Best Practices for UX
Mobile Best Practices for UXThe Wisdom Daily
 
Techstartupday - Digital Product Design
Techstartupday - Digital Product Design Techstartupday - Digital Product Design
Techstartupday - Digital Product Design Little Miss Robot
 
User Centered Design
User Centered DesignUser Centered Design
User Centered DesignShawn Calvert
 
Building for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXBuilding for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXqixingz
 

Similaire à What is User Experience? (20)

Introduction to UX
Introduction to UXIntroduction to UX
Introduction to UX
 
Building a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and CreativityBuilding a UX Process at Salesforce that Promotes Focus and Creativity
Building a UX Process at Salesforce that Promotes Focus and Creativity
 
Bunnyfoot UX Strategy Workshop
Bunnyfoot UX Strategy WorkshopBunnyfoot UX Strategy Workshop
Bunnyfoot UX Strategy Workshop
 
User Experience and Prototyping
User Experience and PrototypingUser Experience and Prototyping
User Experience and Prototyping
 
Training Webinar: From a bad to an awesome user experience - Training Webinar
Training Webinar: From a bad to an awesome user experience - Training WebinarTraining Webinar: From a bad to an awesome user experience - Training Webinar
Training Webinar: From a bad to an awesome user experience - Training Webinar
 
User Experience: A Lean UX Process
User Experience: A Lean UX ProcessUser Experience: A Lean UX Process
User Experience: A Lean UX Process
 
Fra idé til value proposition
Fra idé til value propositionFra idé til value proposition
Fra idé til value proposition
 
Fra idé til value proposition
Fra idé til value propositionFra idé til value proposition
Fra idé til value proposition
 
UX principles for co-founders
UX principles for co-foundersUX principles for co-founders
UX principles for co-founders
 
Demystifying User Experience
Demystifying User ExperienceDemystifying User Experience
Demystifying User Experience
 
Ux strategy
Ux strategyUx strategy
Ux strategy
 
Wells Fargo Ux Strategy - Strategy Presentation
Wells Fargo Ux Strategy - Strategy PresentationWells Fargo Ux Strategy - Strategy Presentation
Wells Fargo Ux Strategy - Strategy Presentation
 
CX Strategy - Presentation to the Human Centred Design Group, Dubai dubai ...
CX Strategy - Presentation to the Human Centred Design Group, Dubai    dubai ...CX Strategy - Presentation to the Human Centred Design Group, Dubai    dubai ...
CX Strategy - Presentation to the Human Centred Design Group, Dubai dubai ...
 
User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience Explained
 
Ux matters2016-final
Ux matters2016-finalUx matters2016-final
Ux matters2016-final
 
Mobile Best Practices for UX
Mobile Best Practices for UXMobile Best Practices for UX
Mobile Best Practices for UX
 
UX Matters
UX MattersUX Matters
UX Matters
 
Techstartupday - Digital Product Design
Techstartupday - Digital Product Design Techstartupday - Digital Product Design
Techstartupday - Digital Product Design
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
 
Building for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXBuilding for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UX
 

Dernier

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 

Dernier (19)

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 

What is User Experience?

  • 1. UX Laying a Foundation for User Experience Design at SPS Commerce Chuck Mallott UX Design Manager 29 OCT 2013
  • 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
  • 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
  • 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
  • 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
  • 30. And definitely before any of this ... 30
  • 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
  • 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
  • 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
  • 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