UX DESIGN

&
DESIGN SYSTEMS

Erik Johnson

erik@purposeux.com

@ejexpress www.purposeux.com
I. WHAT IS UX DESIGN?
 WHAT IS UX DESIGN?

User experience (UX) encompasses all aspects of the end-

user's interaction with the company, its services, and its products.
- Don Norman and Jakob Nielsen (www.nngroup.com)
DESIGN IS A LANGUAGE
 THE CHILD’S MIND

It’s better to ask a stupid question than to remain stupid

“epitome”
“encroach”
“chic”
“despot”
 CONTEXT
and
EMPATHY
are necessary for good design
 THIS IS HORRIBLE…

BUT AT LEAST IT’S NOT BORING

 WHO DOES UX DESIGN?

Discovery
Product Owner, UX Researcher

Design
UX Designer, UI Designer, Graphic Designer

Implementation
UX Engineer, Front-end Developer
(but really it’s everyone)
IF YOU CHOOSE NOT TO DESIGN…

YOU STILL HAVE MADE A CHOICE

 WHY INVEST IN DESIGN?

Without requirements or design, programming is the

art of adding bugs to an empty text file.
- Louis Srygley, UPS applications architect
 WHAT IS UX DESIGN?
1. Exploratory Research - learning about people’s needs,
preferences, and the context in which they work and live.

2. Exploratory Design - using often “low-fidelity” designs or

prototypes to explore concepts, validate assumptions, and learn
more about people’s behavior.

3. Production Design - using “high-fidelity” designs,

prototypes, or products to fine-tune and polish the experience.

4. Validation Research - conducting tests to assess usability

Questions I’ll address in this talk:
1.What is UX design?
2.How should we do research?
3.What’s a good design process?
4.What tools should I use?

… intended audience is people who make design decisions on

a regular basis but are not in a dedicated “designer” role.
Purpose UX is a small design studio that focuses on user
research and design for complex software applications. 



Most of our projects are fixed-scope engagements that focus
on either:

a) new product discovery and design; or 

b) redesigns of a mature product.



You will get a very different perspective from an “in-house”
product designer at a large company or from a designer
who specializing in marketing websites.
II. RESEARCH
If you’re not talking to actual
users, you’re not doing user
experience design
 WHY DO RESEARCH?

It is the cheapest way to learn what you need

to learn while avoiding grave mistakes
KNOW WHAT YOU’RE TRYING TO LEARN

1. PROBLEM FOCUSED OR SOLUTION FOCUSED ?

2. OPEN-ENDED OR FIXED OUTCOME ?

PROBLEM FOCUS
•What does _____ mean?
•What are the various tools people
currently use?
•Who is experiencing this problem?
•Is this group more receptive than
this other group?
SOLUTION FOCUS
•How might we address this need?
•Is this feature intuitive?
•Which of these concepts do people
respond best to?
•How are people using our product?
•Did this redesign make the experience
better?
Give people 100% trust when
they tell you about a problem 


Give people 0% trust when

they tell you how to fix it
NCredible framework

from
www.twigandfish.com FIXED OUTCOME

DISCOVERY VALIDATION
•What are the various tools people currently use? •Is this feature intuitive?
•Is this group more receptive than this other group? •Which of these concepts do people respond best to?
•Did this redesign work?
PROBLEM SOLUTION
FOCUS FOCUS
EXPLORATION DEFINITION
•What does _____ mean? •How might we address this need?
•Who is experiencing this problem? •How are people using our product?

OPEN-ENDED OUTCOME
III. OUR PROCESS
OUR PROCESS
1.Discovery + Definition
2.Concept Design (low- to mid-fidelity)
3.Final Design (mid- to high-fidelity)
4.Implementation
 Stakeholder interviews

OUR PROCESS User interviews

Contextual Inquiry
1.Discovery + Definition
2.Concept Design (low- to mid-fidelity)
Concept testing
3.Final Design (mid- to high-fidelity)
Scenario testing
4.Implementation
Card sorts

Usability testing
Research activities
Analytics
“THE COLLABORATION ZONE” “THE DESIGN ZONE”

Higher-fidelity work

DISCOVERY VALIDATION

EXPLORATION DEFINITION

Lower-fidelity work
1. DISCOVERY + DEFINITION
1.Stakeholder interviews
2.User interviews or contextual inquiry
3.Collaborative workshop
4.User flows, journey map, personas, other useful
deliverables to have conversations around
4-HR DISCOVERY WORKSHOP*
1.Understand Context + Goals
2.Empathize with Users
3.Determine Key Activities
4.Map the User Journey

*try to get 8 hrs, split over two days. 


Use Day 2 to do a deeper dive into issues that surface Day 1.
2. CONCEPT DESIGN
•Make thinking visible
•Give people something to react to
•Focus on navigation, architecture, workflows
•Don’t spend unnecessary effort on aesthetics

Deliverables: Sketches, box-and-arrow diagrams,

wireframes, clickable prototypes, etc.
 Do the minimum amount of
work necessary to learn what
you need to make progress
“THE COLLABORATION ZONE” “THE DESIGN ZONE”

Higher-fidelity work

DISCOVERY VALIDATION

EXPLORATION DEFINITION

Lower-fidelity work
 ITERATE
Higher-fidelity design

DISCOVERY VALIDATION

EXPLORATION DEFINITION

Lower-fidelity design
 The time to start thinking about
implementation is the exact second you
open your design program
 WHAT THIS MEANS
•Every block of text has a defined style
•Every color has a semantic name (primary, secondary, error, etc.)
•Every element used in more than 1 place is a symbol
•Everything is spaced according to a grid (we use 8 pt)
•New elements are only created if they serve a genuinely new function
•Common patterns are used in the expected way
 COMMITTING TO USE
CONSISTENT STYLES +
COMPONENTS

DESIGNERS DEVELOPERS
3. FINAL DESIGN
•Add colors and make it look good
•Double-check for consistency
•Triple-check for consistency
•Quadruple-check for consistency

Deliverables: Pixel-perfect screens, dev-ready

assets (Zeplin), style guide, prototype
4. TOOLS
 TOOLS YOU CAN PAY FOR
RESEARCH DESIGN
1. Lookback (moderated tasks) 1. Sketch /Adobe XD / Figma (pick one)

2. Fullstory (unmoderated qual) 2. Invision (for design reviews w/ non-technical folks)

3. TryMyUI (automated usability) 3. Zeplin (for developer hand-off)

4. User Interviews (recruiting + testing) 4. Abstract (for Sketch version control)

5. Unbounce (landing page tests) 5. Axure / Framer (for “real” prototyping)

 TOOLS THAT ARE FREE/CHEAP
RESEARCH DESIGN
1. Your Phone 1. Paper and Pencil

2. Craigslist Ads 2. Whiteboards + Markers

3. Flyers 3. Keynote / Slides / PowerPoint

4. Emailing people 4. Figma

5. Google / the Library 5. GIMP

6. Balsamiq / Wireframe / quickMockup

Title 80 Bold Title 80 Bold
Title 80 Title 80
Title Small Title Small

Subtitle 48 Bold Subtitle 48 Bold

Subtitle 48 Subtitle 48

Subtitle 32 grey Subtitle 32 grey

 THANK YOU!

Erik Johnson

erik@purposeux.com

@ejexpress www.purposeux.com