"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.
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
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