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

CardSor2ng

23

Watchashortvideo.

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

TreeTes2ng

34

Watchashortvideo.

Treetest

35

Treetest

36

FirstClickTes2ng

37

Watchashortvideo.

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

Contact

MarkW.Brownmwbrown@mit.edu

MITOfficeofDigitalLearning

42