As a UX designer I believe the design process is at least as important as the design result. In this process it is crucial to be able to re-think and adapt your entire design at almost any point in the design process, but also it is important to be able to easily incorporate input from different stakeholders strengthening collaboration. To meet these needs, we have chosen to split up our wire framing design process into two main parts. This presentation shares our methodology.

1. @davidmorganUX
BALANCING HIGH-LEVEL
VS
DETAILED DESIGN

2. @davidmorganUX
@namahn

3. @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

4. YOU KNOW THAT
THING YOU NORMALLY
DO IN TWO MONTHS…
DO THAT IN TWO
WEEKS!!
@davidmorganUX

5. @davidmorganUX

6. @davidmorganUX
IT SHOULDN’T
BE A PROBLEM
THOUGH.

7. @davidmorganUX
Design Iterate
IMPORTANT IN (UX) DESIGN
Evaluate

8. @davidmorganUX
ITERATING YOUR DESIGN
Time
for
changes
Stage of project
Reality
Ideal world

9. @davidmorganUX
PARETO RULE
Vilfredo Pareto

10. @davidmorganUX
PARETO RULE
80% 20%
20% of cause(s) 80% of
e-commerce visitors profit
features usage
bugs crashes
input the result

11. @davidmorganUX
MORE TIME MORE DETAIL
OR MAKE SMART CHOICES
LevelofDetail
Project parts
Detailed design
Mid-level Design
Smart Design

12. @davidmorganUX
BUT I DON’T WANT TO COMPROMISE!
PRICE QUALITY
TIME

13. @davidmorganUX
BUT I DON’T WANT TO COMPROMISE!
PRICE QUALITY
TIME

14. @davidmorganUX
2 MAIN UX DELIVERABLES
HIGH-LEVEL DETAILED DESIGN

15. @davidmorganUX
HIGH-LEVEL DESIGN GOALS
Understand scope
Understand structure and flows
Get other team members started

16. @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

17. @davidmorganUX
THUMB FLOWS
BrandBrandBrand Brand

18. @davidmorganUX
Brand

19. @davidmorganUX
DETAILED DESIGN GOALS
Understand content needs
Micro UX
Realistic representation
Receive conclusive feedback
Can brief Developers and Graphic Designers

20. @davidmorganUX
DETAILED DESIGN
Real copy
Real images
Actual scale
Works in destination
platform
Brand

21. @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

22. @davidmorganUX
WEIGHING IN ON THE
‘HTML VS WYSIWYG’ DISCUSION
HTML VS

23. @davidmorganUX
Sketch
TIME VS DETAIL, AVERAGE PROJECT
time
detail
Paper prototype
Axure
HTML

24. @davidmorganUX
Sketch
TIME VS DETAIL, LARGE PROJECT
time
detail
Paper prototype
Axure
HTML

25. @davidmorganUX
scope
time
TIME VS DETAIL
HTML
Axure

26. @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

27. THANKS!
@davidmorganUX
dmo@namahn.com