How do you avoid the dreaded "this is not what we asked for" and ensure customer satisfaction when building a new system? In this webinar, Dino Esposito demonstrates a top-down methodology, sometimes mistaken for plain common sense and often boldly ignored, called UX-Driven Design (UXDD). UXDD means coming to a visual agreement with customers by using wireframing tools to iterate on sketches of the new system before building it. Then, rather than building the system from the data model, you proceed in a top-down fashion instead. The resulting system may be slow or even inefficient but it will never be the “wrong” system! In addition, UXDD leads to clarity on a few of today’s most popular patterns that are sometimes difficult to understand like CQRS and Event Sourcing. The presentation covers: An introduction to Wireframing tools Proven ways to save on post-first deployment costs Insights into better customer relationships Better focus on development without 'analysis paralysis' You can watch the webinar recording here: http://www.postsharp.net/blog/post/webinar-recording-ux-driven-design

1. BUILDING BETTER ARCHITECTURE WITH UX-DRIVEN DESIGN
DINO ESPOSITO
http://twitter.com/despos

2. “A good software project must, like a house, start on strong
foundations of good architecture and good requirements.”
(cit.)
ABOUT ESTIMATES
http://noestimatesbook.com/
IN SOFTWARE NOBODY ASKS YOU TO SIMPLY BUILD A HOUSE
TENT HUT CARAVAN CASTLE

3. All details are
described in depth.
CONSCIOUS
REQUIREMENTS
A few details
reckoned obvious
and omitted
UNCONSCIOUS
REQUIREMENTS
Not mentioned at
all
DREAMS
WORDSWORDS

4. To improve the software
development process, we need
a better way to learn.

5. Watch the webinar recording here:
http://www.postsharp.net/blog/post/webinar-
recording-ux-driven-design

6. The user of the software won’t know what
she wants until she sees the software.
Humphrey’s Law
An interactive system can never be fully
specified nor can it ever be fully tested.
Wegner’s Lemma

7. Anonymous
If you wait until the last minute to
complete the user interface, it only takes
a minute.

8. Many great ideas have been first
sketched out on paper napkins.

9. Talk is cheap.
Show me the product.

10. • Visual immediacy
• Missed points caught earlier
• Focus on tasks and actions
• Frontend and backend match up

11. Two Architect Roles
Collect usability requirements to
build the best possible UX for
the presentation layer
Collect business requirements
to build the best possible
domain layer
Software
Architect
Faces the painful truth of
requirements
UX
Architect
Faces the blissful simplicity
of visuals
Remember: all I'm offering is the truth. Nothing more.
—Morpheus (from “The Matrix”)

12. Architecture of the information
User-machine interaction
Usability reviews
•Responsibilities
of UX architects
■ Record users in action
■ Analyze body language
■ Monitor timing of operations

13. UXDD in Three Steps
Create screens as
users love them
Trigger workflows
from screens
Code workflows to
use business logic

14. • Two-phase waterfall
• Low-cost design of the frontend
• Straight implementation of the
backend
•  Longer than classic bottom-up
•  Nearly no post-deployment
costs
•UXDD
Summary

15. •UXDD
Summary
NO POST-DEPLOYMENT COSTS?
NO POST-DEPLOYMENT COSTS.

16. Watch the webinar recording here:
http://www.postsharp.net/blog/post/webinar-
recording-ux-driven-design

17. Presentation
Business
Data
How You See Your System How Users See Your System
Interface
BLACK
MAGIC

18. PRESENTATION
APPLICATION
DOMAIN
INFRASTRUCTURE
DEVELOPER USER/DESIGNER REAL-WORLD
UXDD

19. The experience users go through while
interacting with the application.
User Experience

20. SKETCH
Freehand drawing
primarily done to jot
down ideas
Related Terminology
WIREFRAME
More precise sketch
focused on layout,
navigation, content
MOCKUP
As detailed as a
wireframe with some
sample UI attached

21. PROOF OF CONCEPT
Small exercise to verify
truthfulness or viability of
an assumption
Related Terminology
PROTOTYPE
Fake system simulating
the behavior of the real
system to be built
PILOT
Production-ready system
tested against a subset of
the intended audience

22. Sketches
Wireframes
Prototypes
Basic understanding
Basic prototyping
Advanced
prototyping
UXDD Prototyping Levels

23. PRODUCTS
BALSAMIQ AXURE UXPIN JUSTINMIND

24. DATA MODEL
BUSINESS LOGIC
USER INTERFACE
Possible model mismatch
BOTTOM-UP
REQUIREMENTS

25. TOP-DOWN
DATA MODEL
BUSINESS LOGIC
USER INTERFACE
Model cut to fit
REQUIREMENTS

26. TOP-DOWN
DATA MODEL
BUSINESS LOGIC
USER INTERFACE
Model cut to fit
REQUIREMENTS

27. TOP-DOWN
BLACK MAGIC
USER INTERFACE
REQUIREMENTS
Model cut to fit

28. Watch the webinar recording here:
http://www.postsharp.net/blog/post/webinar-
recording-ux-driven-design

29. USER INTERFACE
SCREEN SCREENSCREEN
APPLICATION LAYER
WORK
FLOW
WORK
FLOW
WORK
FLOW
DOMAIN LAYER
INFRASTRUCTURE LAYER
VIEW model
INPUT model
The UX users want
Backend to support
just the UX users want

30. EVENT
store
READ
model
COMMAND
stack
QUERY
stack
UXDD leads to
■ CQRS
■ Event Sourcing

31. All this said …
The best way to save money on software
projects is learning as much as possible about
the domain and users’ expectations.
Anonymous

32. REFERENCES
http://naa4e.codeplex.com

33. Watch the webinar recording here:
http://www.postsharp.net/blog/post/webinar-
recording-ux-driven-design

34. ■ Modern Software Architecture
Domain Models, CQRS, and Event Sourcing
■ UX-driven Software Design
coming soon
dino.esposito@jetbrains.com
http://twitter.com/despos
http://facebook.com/naa4e
http://software2cents.wordpress.com