User Centered Design: A practical toolkit for making sites that work
Transcript of User Centered Design: A practical toolkit for making sites that work
![Page 1: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/1.jpg)
UserCenteredDesign:Aprac2caltoolkitformaking
sitesthatwork
MarkBrownDirectorofDigitalLearningExperience
MITOfficeofDigitalLearning10/18/16
![Page 2: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/2.jpg)
Userexperienceismorethanusability
EnjoyableEnhancesvalue
UsableEasyaccesstovalue
UsefulOffersvalue
Evokesposi3veemo3onsthatembodythebrandpromise
Makesitsimple,easyandeffec3ve
An3cipatestheneedsofusers
2
![Page 3: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/3.jpg)
Userexperiencehasmul2plelayers
3
![Page 4: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/4.jpg)
Userexperiencehasmul2plelayers
Surface
Skeleton
Structure
Scope
Strategy
Thewayitlooks
Thewayitworks
Thewayitallfitstogether
Whatyoucandowithit
Whatvalueorservicesitoffers
Concrete
Abstract
Complex,difficultandmurky.
Hardtodefine
Apparentlyeasy,buteasilydisruptedbylowerlevelchangesor
misalignment
4
![Page 5: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/5.jpg)
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
![Page 6: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/6.jpg)
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
![Page 7: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/7.jpg)
Usercentereddesignisaprocess
Researchbehavior
Designsolu2ons
Evaluatedesign
Discovery DesignProblemfinding Problemsolving
Formastrategy
Prototype
Revisions
7
![Page 8: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/8.jpg)
Usercentereddesignisaprocess
Researchbehavior
Designsolu2ons
Evaluatedesign
Discovery DesignProblemfinding Problemsolving
Formastrategy
Prototype
Revisions
UserResearch UserResearch
8
![Page 9: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/9.jpg)
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
![Page 10: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/10.jpg)
Usercentereddesignhasprinciples
• Knowyouraudience• Makeitinclusive• Keepitsketchy
– Don’ttalk.Draw.– Don’tdiscuss.Uses2ckies.
• Tolerateimperfec2on
10
![Page 11: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/11.jpg)
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
![Page 12: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/12.jpg)
SurveysandInterviews
• Why?– Getoutsideyourbusinessproblem.– Developpersonasanduserstories:
• Who,Where,When,Why
• UseQualtrics–wehaveanMITsitelicense– Keepitshortandmobilefriendly.– Interceptsoremaillistsorsocialmedia.– Askifopentofollowupinterviews.
12
![Page 13: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/13.jpg)
1. Whatisyourprimaryreasonforvisi2ng[---]?2. Howsa2sfiedareyouwithyourexperienceon[---]?3. Whatbestdescribesyou[---]?4. Howoiendoyouvisit[---]?
InterceptSurvey
13
![Page 14: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/14.jpg)
InterceptSurvey
14
![Page 15: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/15.jpg)
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
![Page 16: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/16.jpg)
DevelopQuickPersonas
16
![Page 17: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/17.jpg)
Createasetofuserstories
Asa[persona],Ican[performanac3on]soIcan[goal].
– Asaprospec3vestudent,Icaneasilyfindbasicinforma.onaboutgraduatedegreerequirements,soIcanapply.
– Astheparentofprospec3vestudent,Icaneasilyfindschooltourinforma.on,soIcanplanavisit.
17
![Page 18: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/18.jpg)
Createasetofuserstories
• Theperfectscopecraiingtool• Succinctlyclarifiesaudiences,tasks,andgoals• Thegreatequalizer:Everyonecanpar2cipate.• Explainsthe“what”–notthe“how”• Asetofwell-craieduserstoriesbecomesthe“cards”thataretradedindefiningscope.
18
![Page 19: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/19.jpg)
Makingstoriesintojourney
19
![Page 20: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/20.jpg)
JourneyMapWorkshops(s2tchtogetherlotsofstories)
Thoughts
Feelings
Ac2ons
Touchpoints
Moments
20
![Page 21: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/21.jpg)
ExperienceMaps
21
![Page 22: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/22.jpg)
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
![Page 24: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/24.jpg)
CardSort
24
![Page 25: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/25.jpg)
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
![Page 26: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/26.jpg)
Analy2cs-Basics
26
![Page 27: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/27.jpg)
Analy2cs–UserFlows
27
![Page 28: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/28.jpg)
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
![Page 29: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/29.jpg)
TheExperience
ProjectStrategy
Goals
OutcomesAudiences
Strategy
Requirements Tone
Behaviors
UserResearch UserTes2ng
29
![Page 30: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/30.jpg)
ProjectBrief
Goals
Outcomes
Audiences
Strategy
Requirements
Tone
30
![Page 31: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/31.jpg)
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
![Page 32: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/32.jpg)
Tes2ngUsabilityTes2ng A/BTes2ng
EarlyprototypesTestmul2pleissuesatonceIden2fykeyissues12testersiden2fy85%ofproblems
MaturedesignsOnekeychangeSafelycompareperformanceTestona%ofallvisitors
32
![Page 33: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/33.jpg)
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
![Page 35: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/35.jpg)
Treetest
35
![Page 36: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/36.jpg)
Treetest
36
![Page 38: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/38.jpg)
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
![Page 39: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/39.jpg)
FinalizedTaxonomy
39
![Page 40: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/40.jpg)
40
Final:Classes&Trips
Final:OutdoorClasses&Trips
Final:OutdoorSchools
Task – Find a calendar of outings and lessons
![Page 41: User Centered Design: A practical toolkit for making sites that work](https://reader031.fdocuments.in/reader031/viewer/2022022202/587d51e81a28abee158b4c35/html5/thumbnails/41.jpg)
Resources
41