This document provides an overview of user-centered design. It discusses that user experience has multiple layers, from surface level visual design to deeper strategic considerations. The core of user-centered design is an iterative process of discovery, design, and evaluation. Key activities in this process include user research like surveys, interviews and card sorting to understand user needs and develop personas. Insights are used to create prototypes and test designs through methods such as usability testing, A/B testing, and tree testing to evaluate the design. The goal is to design solutions that meet user needs and are enjoyable, easy to use and useful.

1. User Centered Design:
A prac2cal toolkit for making
sites that work
Mark Brown
Director of Digital Learning Experience
MIT Office of Digital Learning
10/18/16

2. User experience is more than usability
Enjoyable
Enhances value
Usable
Easy access to value
Useful
Offers value
Evokes posi3ve emo3ons
that embody the brand promise
Makes it simple, easy and
effec3ve
An3cipates the needs of users
2

3. User experience has mul2ple layers
3

4. User experience has mul2ple layers
Surface
Skeleton
Structure
Scope
Strategy
The way it
looks
The way it
works
The way it all
fits together
What you can
do with it
What value or services
it offers
Concrete
Abstract
Complex, difficult
and murky.
Hard to define
Apparently
easy, but easily
disrupted by
lower level
changes or
misalignment
4

5. User Experience has mul2ple layers
Surface
Skeleton
Structure
Scope
Strategy
The way it
looks
The way it
works
The way it all
fits together
What you can
do with it
What value or
services it offers
Visual Design
Interac2on
Design
Informa2on
Architecture
Product
Features
Project Goals
Comps
Wireframes
Sitemap
Requirements /
User Stories
Strategy Brief
PRACTICE AREA ARTIFACT ELEMENT DESCRIPTION
5

6. User Experience has mul2ple layers
Surface
Skeleton
Structure
Scope
Strategy
The way it
looks
The way it
works
The way it all
fits together
What you can
do with it
What value or
services it offers
Visual Design
Interac2on
Design
Informa2on
Architecture
Product
Features
Project Goals
Comps
Wireframes
Sitemap
Requirements /
User Stories
Strategy Brief
PRACTICE AREA ARTIFACT ELEMENT DESCRIPTION
6 User Research

7. User centered design is a process
Research
behavior
Design
solu2ons
Evaluate
design
Discovery Design
Problem finding Problem solving
Form a strategy
Prototype
Revisions
7

8. User centered design is a process
Research
behavior
Design
solu2ons
Evaluate
design
Discovery Design
Problem finding Problem solving
Form a strategy
Prototype
Revisions
User Research User Research
8

9. User centered design is a process
Discovery Design
Problem finding Problem solving
Research
behavior
Design
solu2ons
Evaluate
design
Form strategy
Prototype
Revisions
• Surveys /
Interviews /
Workshops
• Personas /
Stories /
Journeys
• Card Sorts
• Analy2cs
• Strategy Brief
Why?
For who?
How?
• Usability tests
• A/B tests
• Tree tests
• First click tests
• Analy2cs
• Sketches
• Wireframes
• Site maps
• Content models
9

10. User centered design has principles
• Know your audience
• Make it inclusive
• Keep it sketchy
– Don’t talk. Draw.
– Don’t discuss. Use s2ckies.
• Tolerate imperfec2on
10

11. User centered design is a process
Discovery Design
Problem finding Problem solving
Research
behavior
Design
solu2ons
Evaluate
design
Form strategy
Prototype
Revisions
• Surveys /
Interviews /
Workshops
• Personas /
Stories /
Journeys
• Card Sorts
• Analy2cs
• Strategy Brief
Why?
For who?
How?
• Usability tests
• Tree tests
• First click tests
• A/B tests
• Analy2cs
• Sketches
• Wireframes
• Site maps
• Content models
11

12. Surveys and Interviews
• Why?
– Get outside your business problem.
– Develop personas and user stories:
• Who, Where, When, Why
• Use Qualtrics – we have an MIT site license
– Keep it short and mobile friendly.
– Intercepts or email lists or social media.
– Ask if open to follow up interviews.
12

13. 1. What is your primary reason for visi2ng [---]?
2. How sa2sfied are you with your experience on [---]?
3. What best describes you [---]?
4. How oien do you visit [---]?
Intercept Survey
13

14. Intercept Survey
14

15. User centered design is a process
Discovery Design
Problem finding Problem solving
Research
behavior
Design
solu2ons
Evaluate
design
Form strategy
Prototype
Revisions
• Surveys /
Interviews /
Workshops
• Personas /
Stories /
Journeys
• Card Sorts
• Analy2cs
• Strategy Brief
Why?
For who?
How?
• Usability tests
• Tree tests
• First click tests
• A/B tests
• Analy2cs
• Sketches
• Wireframes
• Site maps
• Content models
15

16. Develop Quick Personas
16

17. Create a set of user stories
As a [persona],
I can [perform an ac3on]
so I can [goal].
– As a prospec3ve student, I can easily find basic informa.on
about graduate degree requirements, so I can apply.
– As the parent of prospec3ve student, I can easily find school
tour informa.on, so I can plan a visit.
17

18. Create a set of user stories
• The perfect scope craiing tool
• Succinctly clarifies audiences, tasks, and goals
• The great equalizer: Everyone can par2cipate.
• Explains the “what” – not the “how”
• A set of well-craied user stories becomes the
“cards” that are traded in defining scope.
18

19. Making stories into journey
19

20. Journey Map Workshops
(s2tch together lots of stories)
Thoughts
Feelings
Ac2ons
Touchpoints
Moments
20

21. Experience Maps
21

22. User centered design is a process
Research
behavior
Design
solu2ons
Evaluate
design
Discovery Design
Problem finding Problem solving
Form strategy
Prototype
Revisions
• Surveys /
Interviews /
Workshops
• Stories /
Journeys
• Card Sorts
• Analy2cs
• Strategy Brief
Why?
For who?
How?
• Usability tests
• Tree tests
• First click tests
• A/B tests
• Analy2cs
• Sketches
• Wireframes
• Site maps
• Content models
22

23. Card Sor2ng
23
Watch a short video.

24. Card Sort
24

25. User centered design is a process
Research
behavior
Design
solu2ons
Evaluate
design
Discovery Design
Problem finding Problem solving
Form strategy
Prototype
Revisions
• Surveys /
Interviews /
Workshops
• Stories /
Journeys
• Card Sorts
• Analy2cs
• Strategy Brief
Why?
For who?
How?
• Usability tests
• Tree tests
• First click tests
• A/B tests
• Analy2cs
• Sketches
• Wireframes
• Site maps
• Content models
25

26. Analy2cs - Basics
26

27. Analy2cs – User Flows
27

28. User centered design is a process
Research
behavior
Design
solu2ons
Evaluate
design
Discovery Design
Problem finding Problem solving
Form strategy
Prototype
Revisions
• Surveys /
Interviews /
Workshops
• Stories /
Journeys
• Card Sorts
• Analy2cs
• Strategy Brief
Why?
For who?
How?
• Usability tests
• Tree tests
• First click tests
• A/B tests
• Analy2cs
• Sketches
• Wireframes
• Site maps
• Content models
28

29. The Experience
Project Strategy
Goals
Outcomes Audiences
Strategy
Requirements Tone
Behaviors
User Research User Tes2ng
29

30. Project Brief
Goals
Outcomes
Audiences
Strategy
Requirements
Tone
30

31. User centered design is a process
Research
behavior
Design
solu2ons
Evaluate
design
Discovery Design
Problem finding Problem solving
Form strategy
Prototype
Revisions
• Surveys /
Interviews /
Workshops
• Stories /
Journeys
• Card Sorts
• Analy2cs
• Strategy Brief
Why?
For who?
How?
• Usability tests
• A/B tests
• Tree tests
• First click tests
• Analy2cs
• Sketches
• Wireframes
• Site maps
• Content models
31

32. Tes2ng
Usability Tes2ng A/B Tes2ng
Early prototypes
Test mul2ple issues at once
Iden2fy key issues
12 testers iden2fy 85% of problems
Mature designs
One key change
Safely compare performance
Test on a % of all visitors
32

33. User centered design is a process
Research
behavior
Design
solu2ons
Evaluate
design
Discovery Design
Problem finding Problem solving
Form strategy
Prototype
Revisions
• Surveys /
Interviews /
Workshops
• Stories /
Journeys
• Card Sorts
• Analy2cs
• Strategy Brief
Why?
For who?
How?
• Usability tests
• A/B tests
• Tree tests
• First click tests
• Analy2cs
• Sketches
• Wireframes
• Site maps
• Content models
33

34. Tree Tes2ng
34
Watch a short video.

35. Tree test
35

36. Tree test
36

37. First Click Tes2ng
37
Watch a short video.

38. Customer Research
38
IDENTIFYING THE KEY ISSUES AND SOLUTIONS
1. Test Current State 2. Card Sorts for Customer
Centric Re-categoriza2on
3. Validate Future State
Study Descrip2on Items # P’s Date Overall
Success Rate
Current Used deep taxonomy from the current site to establish baseline. 90 62 7/14 76.03%
1st Used a refined top level hierarchy based on findings from the
Live study.
90 59 12/14 82.50%
2nd Used a deep taxonomy based on findings from 1st study, and
input from SEO, Mechant Analyst and UX.
268 (90 +
178 new)
634 9/15 85.67%
§ 9.64% increase in overall success rate for loca2ng an item from
the baseline study to the 2nd study.
(2 Treejack studies) (Treejack study)
Case Study – LLB Naviga2on

39. Finalized Taxonomy
39

40. 40
Final: Classes & Trips
Final: Outdoor Classes & Trips
Final: Outdoor Schools
Task – Find a calendar of outings and lessons

41. Resources
41

42. Contact
Mark W. Brown
mwbrown@mit.edu
MIT Office of Digital Learning
42