!@davidmorganUX
BALANCING HIGH-LEVEL VS
DETAILED DESIGN
!@davidmorganUX
"
@namahn
!@davidmorganUX
CONTEXT OF MY UX PRACTICE
Big corporation, Consumer electronics
e-Commerce, marketing & customer support
Many stake holders
Many processes
Variable turn around time
Graphics and HTML in team
YOU KNOW THAT THING YOU NORMALLY DO IN TWO MONTHS…
DO THAT IN TWO
WEEKS!!
!@davidmorganUX
!@davidmorganUX
!@davidmorganUX
IT SHOULDN’T BE A PROBLEM
THOUGH.
!@davidmorganUX
Design Iterate
IMPORTANT IN (UX) DESIGN
Evaluate
!@davidmorganUX
ITERATING YOUR DESIGN
Time for
changes
Stage of project
Reality
Ideal world
!@davidmorganUX
PARETO RULE
Vilfredo Pareto
!@davidmorganUX
PARETO RULE
80% 20%
20% of cause(s) 80% ofe-commerce visitors profitfeatures usagebugs crashesinput the result
!@davidmorganUX
MORE TIME MORE DETAILOR MAKE SMART CHOICES
Leve
l of D
etai
l
Project parts
Detailed designMid-level DesignSmart Design
!@davidmorganUX
BUT I DON’T WANT TO COMPROMISE!
PRICE QUALITY
TIME
!@davidmorganUX
BUT I DON’T WANT TO COMPROMISE!
PRICE QUALITY
TIME
!@davidmorganUX
2 MAIN UX DELIVERABLES
HIGH-LEVEL DETAILED DESIGN
!@davidmorganUX
HIGH-LEVEL DESIGN GOALS
Understand scope
Understand structure and flows
Get other team members started
!@davidmorganUX
HIGH-LEVEL DESIGN
Reduced content
Only header and button text
No Images, only place holders
Modular
Platform agnostic
Focus on the relevant
Small
Brand
!@davidmorganUX
THUMB FLOWS
BrandBrandBrand Brand
!@davidmorganUX
Brand
!@davidmorganUX
DETAILED DESIGN GOALS
Understand content needs
Micro UX
Realistic representation
Receive conclusive feedback
Can brief Developers and Graphic Designers
!@davidmorganUX
DETAILED DESIGN
Real copy
Real images
Actual scale
Works in destination platform
Brand
!@davidmorganUX
WHEN GO FROM H-L TO DETAILED
Traditional/innovative
80%?
Complicated interactions
Critical for conversion/Business
Easier to show then explain 0
25
50
75
100
1 2 3 4 5 6 7 8 9 10
!@davidmorganUX
WEIGHING IN ON THE ‘HTML VS WYSIWYG’ DISCUSION
HTML VS
!@davidmorganUX
Sketch
TIME VS DETAIL, AVERAGE PROJECT
time
detail
Paper prototype
Axure
HTML
!@davidmorganUX
Sketch
TIME VS DETAIL, LARGE PROJECT
time
detail
Paper prototype
Axure
HTML
!@davidmorganUX
scope
time
TIME VS DETAIL
HTML
Axure
!@davidmorganUX
CONCLUSION
Build iteration into your process
Allow for quick full scope design
Obsess over the right details
Decide per project and designer on your tools
