UX DESIGN
&
DESIGN SYSTEMS
Erik Johnson
[email protected]
@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 SOLUTION FOCUS
•What does _____ mean? •How might we address this need?
•What are the various tools people •Is this feature intuitive?
currently use? •Which of these concepts do people
•Who is experiencing this problem? respond best to?
•Is this group more receptive than •How are people using our product?
this other group? •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
[email protected]
@ejexpress www.purposeux.com
