Upload
mitcps
View
121
Download
0
Embed Size (px)
Citation preview
UserCenteredDesign:Aprac2caltoolkitformaking
sitesthatwork
MarkBrownDirectorofDigitalLearningExperience
MITOfficeofDigitalLearning10/18/16
Userexperienceismorethanusability
EnjoyableEnhancesvalue
UsableEasyaccesstovalue
UsefulOffersvalue
Evokesposi3veemo3onsthatembodythebrandpromise
Makesitsimple,easyandeffec3ve
An3cipatestheneedsofusers
2
Userexperiencehasmul2plelayers
3
Userexperiencehasmul2plelayers
Surface
Skeleton
Structure
Scope
Strategy
Thewayitlooks
Thewayitworks
Thewayitallfitstogether
Whatyoucandowithit
Whatvalueorservicesitoffers
Concrete
Abstract
Complex,difficultandmurky.
Hardtodefine
Apparentlyeasy,buteasilydisruptedbylowerlevelchangesor
misalignment
4
UserExperiencehasmul2plelayers
Surface
Skeleton
Structure
Scope
Strategy
Thewayitlooks
Thewayitworks
Thewayitallfitstogether
Whatyoucandowithit
Whatvalueorservicesitoffers
VisualDesign
Interac2onDesign
Informa2onArchitecture
ProductFeatures
ProjectGoals
Comps
Wireframes
Sitemap
Requirements/UserStories
StrategyBrief
PRACTICEAREA ARTIFACTELEMENT DESCRIPTION
5
UserExperiencehasmul2plelayers
Surface
Skeleton
Structure
Scope
Strategy
Thewayitlooks
Thewayitworks
Thewayitallfitstogether
Whatyoucandowithit
Whatvalueorservicesitoffers
VisualDesign
Interac2onDesign
Informa2onArchitecture
ProductFeatures
ProjectGoals
Comps
Wireframes
Sitemap
Requirements/UserStories
StrategyBrief
PRACTICEAREA ARTIFACTELEMENT DESCRIPTION
6UserResearch
Usercentereddesignisaprocess
Researchbehavior
Designsolu2ons
Evaluatedesign
Discovery DesignProblemfinding Problemsolving
Formastrategy
Prototype
Revisions
7
Usercentereddesignisaprocess
Researchbehavior
Designsolu2ons
Evaluatedesign
Discovery DesignProblemfinding Problemsolving
Formastrategy
Prototype
Revisions
UserResearch UserResearch
8
UsercentereddesignisaprocessDiscovery DesignProblemfinding Problemsolving
Researchbehavior
Designsolu2ons
Evaluatedesign
Formstrategy
Prototype
Revisions
• Surveys/Interviews/Workshops
• Personas/Stories/Journeys
• CardSorts• Analy2cs
• StrategyBriefWhy?Forwho?How?
• Usabilitytests• A/Btests• Treetests• Firstclicktests• Analy2cs
• Sketches• Wireframes• Sitemaps• Contentmodels
9
Usercentereddesignhasprinciples
• Knowyouraudience• Makeitinclusive• Keepitsketchy
– Don’ttalk.Draw.– Don’tdiscuss.Uses2ckies.
• Tolerateimperfec2on
10
UsercentereddesignisaprocessDiscovery DesignProblemfinding Problemsolving
Researchbehavior
Designsolu2ons
Evaluatedesign
Formstrategy
Prototype
Revisions
• Surveys/Interviews/Workshops
• Personas/Stories/Journeys
• CardSorts• Analy2cs
• StrategyBriefWhy?Forwho?How?
• Usabilitytests• Treetests• Firstclicktests• A/Btests• Analy2cs
• Sketches• Wireframes• Sitemaps• Contentmodels
11
SurveysandInterviews
• Why?– Getoutsideyourbusinessproblem.– Developpersonasanduserstories:
• Who,Where,When,Why
• UseQualtrics–wehaveanMITsitelicense– Keepitshortandmobilefriendly.– Interceptsoremaillistsorsocialmedia.– Askifopentofollowupinterviews.
12
1. Whatisyourprimaryreasonforvisi2ng[---]?2. Howsa2sfiedareyouwithyourexperienceon[---]?3. Whatbestdescribesyou[---]?4. Howoiendoyouvisit[---]?
InterceptSurvey
13
InterceptSurvey
14
UsercentereddesignisaprocessDiscovery DesignProblemfinding Problemsolving
Researchbehavior
Designsolu2ons
Evaluatedesign
Formstrategy
Prototype
Revisions
• Surveys/Interviews/Workshops
• Personas/Stories/Journeys
• CardSorts• Analy2cs
• StrategyBriefWhy?Forwho?How?
• Usabilitytests• Treetests• Firstclicktests• A/Btests• Analy2cs
• Sketches• Wireframes• Sitemaps• Contentmodels
15
DevelopQuickPersonas
16
Createasetofuserstories
Asa[persona],Ican[performanac3on]soIcan[goal].
– Asaprospec3vestudent,Icaneasilyfindbasicinforma.onaboutgraduatedegreerequirements,soIcanapply.
– Astheparentofprospec3vestudent,Icaneasilyfindschooltourinforma.on,soIcanplanavisit.
17
Createasetofuserstories
• Theperfectscopecraiingtool• Succinctlyclarifiesaudiences,tasks,andgoals• Thegreatequalizer:Everyonecanpar2cipate.• Explainsthe“what”–notthe“how”• Asetofwell-craieduserstoriesbecomesthe“cards”thataretradedindefiningscope.
18
Makingstoriesintojourney
19
JourneyMapWorkshops(s2tchtogetherlotsofstories)
Thoughts
Feelings
Ac2ons
Touchpoints
Moments
20
ExperienceMaps
21
Usercentereddesignisaprocess
Researchbehavior
Designsolu2ons
Evaluatedesign
Discovery DesignProblemfinding Problemsolving
Formstrategy
Prototype
Revisions
• Surveys/Interviews/Workshops
• Stories/Journeys
• CardSorts• Analy2cs
• StrategyBriefWhy?Forwho?How?
• Usabilitytests• Treetests• Firstclicktests• A/Btests• Analy2cs
• Sketches• Wireframes• Sitemaps• Contentmodels
22
CardSort
24
Usercentereddesignisaprocess
Researchbehavior
Designsolu2ons
Evaluatedesign
Discovery DesignProblemfinding Problemsolving
Formstrategy
Prototype
Revisions
• Surveys/Interviews/Workshops
• Stories/Journeys
• CardSorts• Analy2cs
• StrategyBriefWhy?Forwho?How?
• Usabilitytests• Treetests• Firstclicktests• A/Btests• Analy2cs
• Sketches• Wireframes• Sitemaps• Contentmodels
25
Analy2cs-Basics
26
Analy2cs–UserFlows
27
Usercentereddesignisaprocess
Researchbehavior
Designsolu2ons
Evaluatedesign
Discovery DesignProblemfinding Problemsolving
Formstrategy
Prototype
Revisions
• Surveys/Interviews/Workshops
• Stories/Journeys
• CardSorts• Analy2cs
• StrategyBriefWhy?Forwho?How?
• Usabilitytests• Treetests• Firstclicktests• A/Btests• Analy2cs
• Sketches• Wireframes• Sitemaps• Contentmodels
28
TheExperience
ProjectStrategy
Goals
OutcomesAudiences
Strategy
Requirements Tone
Behaviors
UserResearch UserTes2ng
29
ProjectBrief
Goals
Outcomes
Audiences
Strategy
Requirements
Tone
30
Usercentereddesignisaprocess
Researchbehavior
Designsolu2ons
Evaluatedesign
Discovery DesignProblemfinding Problemsolving
Formstrategy
Prototype
Revisions
• Surveys/Interviews/Workshops
• Stories/Journeys
• CardSorts• Analy2cs
• StrategyBriefWhy?Forwho?How?
• Usabilitytests• A/Btests• Treetests• Firstclicktests• Analy2cs
• Sketches• Wireframes• Sitemaps• Contentmodels
31
Tes2ngUsabilityTes2ng A/BTes2ng
EarlyprototypesTestmul2pleissuesatonceIden2fykeyissues12testersiden2fy85%ofproblems
MaturedesignsOnekeychangeSafelycompareperformanceTestona%ofallvisitors
32
Usercentereddesignisaprocess
Researchbehavior
Designsolu2ons
Evaluatedesign
Discovery DesignProblemfinding Problemsolving
Formstrategy
Prototype
Revisions
• Surveys/Interviews/Workshops
• Stories/Journeys
• CardSorts• Analy2cs
• StrategyBriefWhy?Forwho?How?
• Usabilitytests• A/Btests• Treetests• Firstclicktests• Analy2cs
• Sketches• Wireframes• Sitemaps• Contentmodels
33
Treetest
35
Treetest
36
CustomerResearch
38
IDENTIFYING THE KEY ISSUES AND SOLUTIONS
1. TestCurrentState 2.CardSortsforCustomerCentricRe-categoriza2on
3.ValidateFutureState
Study Descrip2on Items #P’s Date OverallSuccessRate
Current Useddeeptaxonomyfromthecurrentsitetoestablishbaseline. 90 62 7/14 76.03%
1st UsedarefinedtoplevelhierarchybasedonfindingsfromtheLivestudy.
90 59 12/14 82.50%
2nd Usedadeeptaxonomybasedonfindingsfrom1ststudy,andinputfromSEO,MechantAnalystandUX.
268(90+178new)
634 9/15 85.67%
§ 9.64%increaseinoverallsuccessrateforloca2nganitemfromthebaselinestudytothe2ndstudy.
(2Treejackstudies)(Treejackstudy)
CaseStudy–LLBNaviga2on
FinalizedTaxonomy
39
40
Final:Classes&Trips
Final:OutdoorClasses&Trips
Final:OutdoorSchools
Task – Find a calendar of outings and lessons
Resources
41