"Design isn't what it looks like or feels like. Design is how it works." This model, adapted from Jesse James Garrett, explains how User Experience is not Visual Design. Let's look at an example and then understand what the business benefits are of investing at each layer of this model.

1. Understanding
User Experience

2. Visuals
What does it look like?

3. It’s not just what it looks like and
feels like. Design is how it works.
- Steven Jobs

4. Aesthetics, Functionality, Context

5. How should our
buttons look?

6. SURFACE

7. How should our buttons look?
Surface
How many buttons
appear on this screen?

8. How should our buttons look?
Surface
SKELETON

9. How should our buttons look?
How many buttons appear on this screen?
Skeleton
Surface
How do we organize all
possible buttons?

10. How should our buttons look?
How many buttons appear on this screen?
Skeleton
Surface
STRUCTURE
1
2 3

11. How should our buttons look?
How many buttons appear on this screen?
How do we organize all possible buttons?
Skeleton
Surface
1
2 3
Structure
What buttons do users need?

12. How should our buttons look?
How many buttons appear on this screen?
How do we organize all possible buttons?
Skeleton
Surface
1
2 3
Structure
SCOPE

13. How should our buttons look?
How many buttons appear on this screen?
How do we organize all possible buttons?
What buttons do users need?
Skeleton
Scope
Surface
1
2 3
Structure
Do users need buttons at all?

14. How should our buttons look?
How many buttons appear on this screen?
How do we organize all possible buttons?
What buttons do users need?
Do users need buttons at all?
Skeleton
Scope
Strategy
Surface
1
2 3
Structure

15. SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Example

16. SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Options Menu

17. SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Which tab is currently selected?
SURFACE

18. SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Does this button affect all tabs, or just this one?
SKELETON

19. SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Which tab would you choose to enable subtitles?
STRUCTURE
1
2 3

20. SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Should Framerate Smoothing even be an option?
SCOPE

21. SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Is a menu the best way for users to adjust settings?
STRATEGY

22. Why invest in a layer?

23. VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Surface
Fixes basic usability issues such
as text that’s hard to read due to
font size, color, or placement.
Users already familiar with the
product becomes more efficient.
Microsoft Bing
Choosing a specific color blue over other lighter hues amounted to
an additional $80 million in annual revenue.
Reference: https://www.cnet.com/news/behind-bings-blue-links/
SURFACE

24. VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Skeleton
Fixing the overall layout of a page
will allow for better discoverability
of content and features.
Users already invested are
exposed to new offerings or
features.
Neilson Norman Group
Regardless of screen size, the average difference in how users treat
info above vs. below-the-fold is 84%.
Reference: https://www.nngroup.com/articles/page-fold-manifesto/
SURFACE
SKELETON

25. VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Structure
Decide which features are
presented with which services.
Interested customers further
learn about your offerings and
capabilities.
Expedia
Removing one field from their registration process increased
profits by $12 million.
Reference: http://www.conversionvoodoo.com/blog/2011/11/expedia-deletes-one-field-from-their-registration-process-increases-profit-12m/
1
2 3
SURFACE
SKELETON
STRUCTURE
1
2 3

26. VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Scope
Prioritize and truly align business
goals with user goals, avoiding
unnecessary investments.
Offer potential customers
features they actually need.
Standish Group
Nearly 80% of software costs occur during the maintenance phase.
60% of the maintenance phase is due to rework because the user
requirements were not clear in the beginning.
Reference: http://info.humanfactors.com/acton/attachment/4167/4167:f-003b/1/%7B%7BEnv.MsgId%7D%7D/Bdc4167:f-003b/%7B%7BEnv.SrcId%7D%7D/
%7B%7BEnv.RecId%7D%7D/
SURFACE
SKELETON
STRUCTURE
SCOPE
1
2 3

27. VALUEOUTCOMES
CASE STUDY
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3
Strategy
Understand how this product fits
in the larger journey a user is
taking with your organization.
Gain prospective customers by
considering the rationals of your
users.
Instagram
Started as a check-in app, similar to four square, in 2009.
Cut everything except Photo, Comment, and Like in 2010.
Sold to Facebook for $1 billion in 2012.
Reference: http://www.theatlantic.com/technology/archive/2014/07/instagram-used-to-be-called-brbn/373815/
SURFACE
SKELETON
STRUCTURE
SCOPE
STRATEGY
1
2 3

28. How should our buttons look?
How many buttons appear on this screen?
How do we organize all possible buttons?
What buttons do users need?
Do users need buttons at all?
Skeleton
Scope
Strategy
Surface
1
2 3
Structure

29. Skeleton
Scope
Strategy
Surface
1
2 3
Structure
?