MIS5109Summer2017

UserExperienceDesignLearnathon4:

Structure:TOPICSL1.INTRO:MIS5102ANDMIS5109

M1.IntrotoJus8nmind:SetUpL2.ANINTRODUCTIONTOUSEREXPERIENCE

M2.MemorialDayHolidayL3.USERRESEARCH:Understandinguserneedsandbehaviors

M3.IntrotoJus8nmind:GeHngstartedL4.PRINCIPLESOFUXDESIGN+PROTOTYPING

M4.IntrotoJus8nmind:AdvancedVisualsL5.ITERATIVEUXDESIGN/PROTOTYPING/TESTING

M5.IntrotoJus8nmind:PrototypingwithLogicL6.ASSESSINGPROTOTYPESANDTESTING

M6.IntrotoJus8nmind:Troubleshoo8ngL7.FinalProjectPresentaNons

Agenda:DesignPrinciplesforWebandMobileStoryboardingLow,MediumandHighFidelityPrototypingPaperWireframesAmodDange,BusinessSystemsManagerforUXFacebookEnterpriseEngineeringBreakout/Reviewpar8cipa8onassignments

LEARNITASSIGNMENT#1DUE.AnalyzetheUserExperienceandInterfaceofWebexBreakoutSessions:Ini8ateaBreakoutsessioninWebex.Schedulethesession,invitepar8cipants,runthesessionandterminateit.Usingscreenshots,carefullydocumentyouranalysisofthestrengthsandweaknessesoftheWebexBreakoutinterface.BaseyouranalysisontheprinciplesofInterfaceDesignandtheHeuris8csoutlinedinthereadingsfor6/15.CreateaprototypeinJusNnmind,(Powerpointoranotherapprovedso\ware),toimprovetheinterface

ASSIGNMENTBUCKET1:t6/20@11:59pm Howdidthisgo?Howdidthisgo?

Successes?Challenges?

What is Prototyping

?

A Prototype is “a product that is designed and built to test a new design. The prototype is used to correct mistakes and make [the design] more user friendly” From Wireframes&Prototypes:IsThereReallyaDifference?hap://community.protoshare.com/2010/12/wireframes-prototypes-is-there-really-a-difference/

WHYisthisimportant?

A prototype can tell a story of use

What is a Wireframe

?

“A Wireframe is a visual illustration of one Web page. It’s simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work. One of the main purposes of a wireframe is to show you where each item should be placed on a page.” From Wireframes&Prototypes:IsThereReallyaDifference?hap://community.protoshare.com/2010/12/wireframes-prototypes-is-there-really-a-difference/

WHYisthisimportant?Howdoesitdifferfromaprototype?

From hap://www.comentum.com/images/wireframes-sample/ecommerce/home.png

Wireframe

From hap://blog.mockupbuilder.com/wp-content/uploads/2013/06/Thanx-loca8ons-wireframes.png

AnnotatedWireframe

What is the VALUE of a Wireframe

?

?How does Justinmind differ from a Wireframe

What are examples of Low Fidelity Prototypes

?

What is a storyboard

?

Take a 10 min BREAK

AdertheBreak,IwillassignyouintogroupstodiscussyourJourneyMapassignments.

GuestSpeakerAmodDange,BusinessSystemsManagerforUXFacebookEnterpriseEngineeringWhatdoyouwanttolearnfromAmod?

Take a 5 min BREAK

AdertheBreak,IwillassignyouintogroupstodiscussyourJourneyMapassignments.

Postanexampleofanapporwebsite(screenshot)illustraNngastrengthorweaknessregardingdesignprinciplesreferencedinthereadings

Session 4.1: Participation ASSIGNMENT #3

Whatdidyoufind?

Breakout: UX DesignIngroups,compareyourscreenshotsanddiscusshowtheyreflecteithergoodorbadprac8cesforUXdesign.:1.  Whatrules/conceptsaredisplayedbytheexample?2.  Doestheexamplereflectasuccessorfailureoftherule/

concept?Why3.  Howwouldyouimproveit?

?Who will SHARE an EXAMPLE

of UX Design rules/concepts

GuestSpeaker:6/28BrianLynn,DirectorofUserExperienceDesign,LiquidHubWhatdoyouwanttolearnfromBrian?