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
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
User	experience	has	mul2ple	layers	
3
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
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
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
User	centered	design	is	a	process	
Research	
behavior	
Design	
solu2ons	
Evaluate	
design	
Discovery	 Design	
Problem	finding	 Problem	solving	
Form	a	strategy	
Prototype	
Revisions	
7
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
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
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
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
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
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
Intercept	Survey	
14
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
Develop	Quick	Personas	
16
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
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
Making	stories	into	journey	
19
Journey	Map	Workshops	
(s2tch	together	lots	of	stories)	
Thoughts	
Feelings	
Ac2ons	
Touchpoints	
Moments	
20
Experience	Maps	
21
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
Card	Sor2ng	
23	
Watch	a	short	video.
Card	Sort	
24
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
Analy2cs	-	Basics	
26
Analy2cs	–	User	Flows	
27
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
The	Experience	
Project	Strategy	
Goals	
	Outcomes	Audiences	
Strategy	
Requirements	 Tone	
Behaviors	
User	Research	 User	Tes2ng	
29
Project	Brief	
Goals	
	Outcomes	
Audiences	
Strategy	
Requirements	
Tone	
30
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
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
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
Tree	Tes2ng	
34	
Watch	a	short	video.
Tree	test	
35
Tree	test	
36
First	Click	Tes2ng	
37	
Watch	a	short	video.
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
Finalized	Taxonomy	
39
40	
Final:	Classes	&	Trips	
Final:	Outdoor	Classes	&	Trips	
Final:	Outdoor	Schools	
Task – Find a calendar of outings and lessons
Resources	
41
Contact 		
Mark	W.	Brown	
mwbrown@mit.edu	
MIT	Office	of	Digital	Learning	
42

User Centered Design: A practical toolkit for making sites that work