SlideShare a Scribd company logo
1 of 34
UX Design and
Storyboarding
A workshop about UX and
how it can help us create
better products.
What is User Experience Design?
Why use UX Design?
Activity Time!
Bring it back together
1
Defining it
User experience (UX)is the sum of all aspects of a
product that users experience directly including
its form, behavior, and content.
UX also encompasses users’ broader brand
experience and the response that experience
evokes in them.
2
—Pabini Gabriel-Petit
―The UX Honeycomb‖ Peter
Morville, 2004
User experience goes
beyond usability:
3
Defining it
User experience Design (UXD) is the application
of design principles, methods, cognitive
psychology, and user research in the creation
of all human-facing parts of interactive systems
to meet user and system goals.
 Functionality
 Site Architecture
 Interface Design
4
Functionality
5
Site Architecture
6
Interface Design
7
High-fidelity wireframe done by
Scott Jahnke
The UX Design Process
8
Storyboards
Functionality /
Requirements
Site
Architecture
Interface
Design
Visual Design
User experience research
9
What is User Experience Design?
Why use UX Design?
Activity Time!
Bring it back together
10
The Benefits of UX
 Iterative design catches problems early which can
save time and money
11
Implementation
Testing
Design / Development
Determine Requirements
Traditional
The Benefits of UX
 Iterative design catches problems early which can
save time and money
12
Determine
requirements
Design
Get
Feedback
Revise
Implementation
Testing
Design / Development
Determine Requirements
UX
Traditional
The Benefits of UX
 UX methods can be cheap, fast
13
The Benefits of UX
 UX methods increase user satisfaction and
loyalty by focusing on user goals
14
What is User Experience Design?
Why use UX Design?
Activity Time!
Bring it back together
15
UX Storyboard
A sequence of
illustrations that show
what the user will
experience before,
during, and after
using a product
 Components:
 Character(s)
 Emotions
 Scene (digital or
physical place)
16
Storyboard Structure
17
PROBLEM
BENEFITSOLUTION
Why Storyboard?
 The acts of drawing and seeing helps us think in
different dimensions (sequence, environment
interactions, etc)
 Visuals communicate more effectively than just
words
 Encourage user empathy
 Funsies (sketching skills aren’t necessary!)
18
Our storyboard structure
19
Our storyboard structure
20
Our storyboard structure
21
Our storyboard structure
22
The problem
23
 I am trying to ________
BUT ___________________.
 Before using the
product
 What are the triggers?
The problem
24
 I am trying to ________
BUT ___________________.
 Before using the
product
User’s goal
User’s problem
The solution
25
 What are the steps
that need to occur for
the problem to be
resolved?
 What features of the
product enable
resolution and how do
they affect the user?
The benefit / resolution
26
 What would the user
say is effective about
the solution?
 How do the features
of the product meet
the user’s goals?
Activity Schedule
27
 Individual sketching – 10 minutes
 Small group sharing – 15 minutes
 Large group discussion – 10 minutes
 Conclusion
The scenario
28
 You are arranging transportation to the airport and
you aren’t sure which mode of transportation is
best. You use some kind of tool (website, app, etc.)
to help you resolve the problem.
 The tool can be real or fictional
 Use the storyboard templates to sketch your
experience step-by-step.
29
Small Groups
30
 Walkthrough each person’s storyboard.
 What did you want to buy?
 What product did you use?
 What problem did you encounter, and what were the
steps that led to resolution?
 Critique the product
 How could the product have better addressed the
problem?
 Pick one person to take a photo of their storyboard
and send it to t2tecinfo@gmail.com
What is User Experience Design?
Why use UX Design?
Activity time!
Bringing it back together
31
Using storyboards at T2
32
 Practice empathy - utilize user research to
generate user goals, user problems, and examine
how T2 products meet those goals
 Consider broader context – why do users
encounter problems and how have other products
failed / succeeded
 Sketch, collaborate, share – creating and
communication stimulates brainstorming
Questions?
33

More Related Content

What's hot

What's hot (20)

UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
UXPA UK: UX Strategy. What is UX Strategy? Tim Loo, Foolproof.
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
What is UX?
What is UX?What is UX?
What is UX?
 
UX and UI
UX and UIUX and UI
UX and UI
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
 
What is UX?
What is UX?What is UX?
What is UX?
 
Ux design
Ux designUx design
Ux design
 
Fundamentals of UX Design
Fundamentals of UX DesignFundamentals of UX Design
Fundamentals of UX Design
 
UI UX Design Presentation
UI UX Design Presentation UI UX Design Presentation
UI UX Design Presentation
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 

Viewers also liked

ERP Delta UX Exercise 041713
ERP Delta UX Exercise 041713ERP Delta UX Exercise 041713
ERP Delta UX Exercise 041713
Erik Peterson
 

Viewers also liked (20)

Storyboarding Workshop
Storyboarding WorkshopStoryboarding Workshop
Storyboarding Workshop
 
Workshop 3: storyboarding
Workshop 3: storyboardingWorkshop 3: storyboarding
Workshop 3: storyboarding
 
Storyboarding : Workshop for TMC|X
Storyboarding : Workshop for TMC|XStoryboarding : Workshop for TMC|X
Storyboarding : Workshop for TMC|X
 
Storytelling: The Ultimate Survival Tool?
Storytelling: The Ultimate Survival Tool?Storytelling: The Ultimate Survival Tool?
Storytelling: The Ultimate Survival Tool?
 
Storytelling in Product Development: Knowing your users & their stories
Storytelling in Product Development: Knowing your users & their storiesStorytelling in Product Development: Knowing your users & their stories
Storytelling in Product Development: Knowing your users & their stories
 
Users' Story: UX Storyboarding
Users' Story: UX StoryboardingUsers' Story: UX Storyboarding
Users' Story: UX Storyboarding
 
5 Secrets to Killer Lead Generation Using SlideShare
5 Secrets to Killer Lead Generation Using SlideShare5 Secrets to Killer Lead Generation Using SlideShare
5 Secrets to Killer Lead Generation Using SlideShare
 
The Power of Story in Sustainability
The Power of Story in SustainabilityThe Power of Story in Sustainability
The Power of Story in Sustainability
 
Storytelling in Product Management
Storytelling in Product ManagementStorytelling in Product Management
Storytelling in Product Management
 
Fast Pitch Storytelling Workshop
Fast Pitch Storytelling WorkshopFast Pitch Storytelling Workshop
Fast Pitch Storytelling Workshop
 
Storyboarding In User Experience Workshop (at Mobile UX London)
Storyboarding In User Experience Workshop (at Mobile UX London)Storyboarding In User Experience Workshop (at Mobile UX London)
Storyboarding In User Experience Workshop (at Mobile UX London)
 
Storyboarding csa2013 - Simple sketching for UX, user research & content stra...
Storyboarding csa2013 - Simple sketching for UX, user research & content stra...Storyboarding csa2013 - Simple sketching for UX, user research & content stra...
Storyboarding csa2013 - Simple sketching for UX, user research & content stra...
 
Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov....
Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov....Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov....
Storyboarding for Content Strategy and UX Design - U of W Continuing Ed. Nov....
 
Storyboarding
StoryboardingStoryboarding
Storyboarding
 
Introduction to Storyboarding
Introduction to StoryboardingIntroduction to Storyboarding
Introduction to Storyboarding
 
Huge UX Design School Exercise
Huge UX Design School ExerciseHuge UX Design School Exercise
Huge UX Design School Exercise
 
Handsketches for Huge Design Exercise
Handsketches for Huge Design ExerciseHandsketches for Huge Design Exercise
Handsketches for Huge Design Exercise
 
ERP Delta UX Exercise 041713
ERP Delta UX Exercise 041713ERP Delta UX Exercise 041713
ERP Delta UX Exercise 041713
 
UX Designer Exercise
UX Designer ExerciseUX Designer Exercise
UX Designer Exercise
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 

Similar to A Workshop on UX Design and Storyboarding

User Experience Poster
User Experience PosterUser Experience Poster
User Experience Poster
Jessica Fisher
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
Shawn Calvert
 

Similar to A Workshop on UX Design and Storyboarding (20)

Mobile Best Practices for UX
Mobile Best Practices for UXMobile Best Practices for UX
Mobile Best Practices for UX
 
UX Design Process - MIT ID Innovation
UX Design Process - MIT ID InnovationUX Design Process - MIT ID Innovation
UX Design Process - MIT ID Innovation
 
Ux Overview
Ux OverviewUx Overview
Ux Overview
 
HoytUX Design Process 2016
HoytUX Design Process 2016HoytUX Design Process 2016
HoytUX Design Process 2016
 
UI_UX.pptx
UI_UX.pptxUI_UX.pptx
UI_UX.pptx
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
 
The Science behind Good UIs and UXs
The Science behind Good UIs and UXsThe Science behind Good UIs and UXs
The Science behind Good UIs and UXs
 
Breaking down what UX means
Breaking down what UX meansBreaking down what UX means
Breaking down what UX means
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and Accessibility
 
Richard Marsh, Enterprising User Experience - Flex and the city
Richard Marsh, Enterprising User Experience - Flex and the cityRichard Marsh, Enterprising User Experience - Flex and the city
Richard Marsh, Enterprising User Experience - Flex and the city
 
User Experience Poster
User Experience PosterUser Experience Poster
User Experience Poster
 
Mobile UX-COE
Mobile UX-COEMobile UX-COE
Mobile UX-COE
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
 
Stop making bland things
Stop making bland thingsStop making bland things
Stop making bland things
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
 
Ux and usability it's no PICNIC
Ux and usability   it's no PICNICUx and usability   it's no PICNIC
Ux and usability it's no PICNIC
 
Filip Healy (Threesixty Reality): Making Immersive Tech More Usable
Filip Healy (Threesixty Reality): Making Immersive Tech More UsableFilip Healy (Threesixty Reality): Making Immersive Tech More Usable
Filip Healy (Threesixty Reality): Making Immersive Tech More Usable
 
Building for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UXBuilding for People: 5 Practical Tip for Greating Great UX
Building for People: 5 Practical Tip for Greating Great UX
 
Measuring the User Experience in Digital Products
Measuring the User Experience in Digital ProductsMeasuring the User Experience in Digital Products
Measuring the User Experience in Digital Products
 
Konsep-UX-Design-dikonversi 02.pdf
Konsep-UX-Design-dikonversi 02.pdfKonsep-UX-Design-dikonversi 02.pdf
Konsep-UX-Design-dikonversi 02.pdf
 

Recently uploaded

Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Nitya salvi
 
poliovirus-190801072449. pptx
poliovirus-190801072449.            pptxpoliovirus-190801072449.            pptx
poliovirus-190801072449. pptx
ssuser0ad194
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
eeanqy
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
balqisyamutia
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
eeanqy
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 

Recently uploaded (20)

Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
 
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
Call Girls In Ratnagiri Escorts ☎️8617370543 🔝 💃 Enjoy 24/7 Escort Service En...
 
The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
poliovirus-190801072449. pptx
poliovirus-190801072449.            pptxpoliovirus-190801072449.            pptx
poliovirus-190801072449. pptx
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
How to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in PhotoshopHow to Turn a Picture Into a Line Drawing in Photoshop
How to Turn a Picture Into a Line Drawing in Photoshop
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 

A Workshop on UX Design and Storyboarding

  • 1. UX Design and Storyboarding A workshop about UX and how it can help us create better products.
  • 2. What is User Experience Design? Why use UX Design? Activity Time! Bring it back together 1
  • 3. Defining it User experience (UX)is the sum of all aspects of a product that users experience directly including its form, behavior, and content. UX also encompasses users’ broader brand experience and the response that experience evokes in them. 2 —Pabini Gabriel-Petit
  • 4. ―The UX Honeycomb‖ Peter Morville, 2004 User experience goes beyond usability: 3
  • 5. Defining it User experience Design (UXD) is the application of design principles, methods, cognitive psychology, and user research in the creation of all human-facing parts of interactive systems to meet user and system goals.  Functionality  Site Architecture  Interface Design 4
  • 9. The UX Design Process 8 Storyboards Functionality / Requirements Site Architecture Interface Design Visual Design User experience research
  • 10. 9
  • 11. What is User Experience Design? Why use UX Design? Activity Time! Bring it back together 10
  • 12. The Benefits of UX  Iterative design catches problems early which can save time and money 11 Implementation Testing Design / Development Determine Requirements Traditional
  • 13. The Benefits of UX  Iterative design catches problems early which can save time and money 12 Determine requirements Design Get Feedback Revise Implementation Testing Design / Development Determine Requirements UX Traditional
  • 14. The Benefits of UX  UX methods can be cheap, fast 13
  • 15. The Benefits of UX  UX methods increase user satisfaction and loyalty by focusing on user goals 14
  • 16. What is User Experience Design? Why use UX Design? Activity Time! Bring it back together 15
  • 17. UX Storyboard A sequence of illustrations that show what the user will experience before, during, and after using a product  Components:  Character(s)  Emotions  Scene (digital or physical place) 16
  • 19. Why Storyboard?  The acts of drawing and seeing helps us think in different dimensions (sequence, environment interactions, etc)  Visuals communicate more effectively than just words  Encourage user empathy  Funsies (sketching skills aren’t necessary!) 18
  • 24. The problem 23  I am trying to ________ BUT ___________________.  Before using the product  What are the triggers?
  • 25. The problem 24  I am trying to ________ BUT ___________________.  Before using the product User’s goal User’s problem
  • 26. The solution 25  What are the steps that need to occur for the problem to be resolved?  What features of the product enable resolution and how do they affect the user?
  • 27. The benefit / resolution 26  What would the user say is effective about the solution?  How do the features of the product meet the user’s goals?
  • 28. Activity Schedule 27  Individual sketching – 10 minutes  Small group sharing – 15 minutes  Large group discussion – 10 minutes  Conclusion
  • 29. The scenario 28  You are arranging transportation to the airport and you aren’t sure which mode of transportation is best. You use some kind of tool (website, app, etc.) to help you resolve the problem.  The tool can be real or fictional  Use the storyboard templates to sketch your experience step-by-step.
  • 30. 29
  • 31. Small Groups 30  Walkthrough each person’s storyboard.  What did you want to buy?  What product did you use?  What problem did you encounter, and what were the steps that led to resolution?  Critique the product  How could the product have better addressed the problem?  Pick one person to take a photo of their storyboard and send it to t2tecinfo@gmail.com
  • 32. What is User Experience Design? Why use UX Design? Activity time! Bringing it back together 31
  • 33. Using storyboards at T2 32  Practice empathy - utilize user research to generate user goals, user problems, and examine how T2 products meet those goals  Consider broader context – why do users encounter problems and how have other products failed / succeeded  Sketch, collaborate, share – creating and communication stimulates brainstorming

Editor's Notes

  1. Run through goals for the presentation.
  2. UX is the sum of many different aspects of a product (when I say product, it’s not limited to software. UX principles can be applied to physical environments) UX also deals with how users feel about a brand over time, the response that evokes in them over time.
  3. This diagram illustrates the previous definition. This is known as the UX Honeycomb created by Peter Morville, a renowned Info Arch. These are the qualities that user’s look for when interacting with a system. You’ll notice that usability there on the left is just one facet among many that an effective system needs. Information needs to be findable – users just need to locate it. Information needs to be desirable – users have to want it.
  4. UX Design has its roots in many different disciplines. Suffice to say, UXD uses cognitive psychology, user research, and design principles to create everything that a user might directly interact with, including…system architecture…Explain system goals, user goals
  5. Related to wireframes is the functionality of a product. UXD use user research and design principles to design the features of a system.
  6. UXD concerns things like the site architecture. This is a site map that gives structural overview a website or an app. We can use site maps to get an idea of the different paths a user might take and the functionality they might need to accomplish their goals.`
  7. These are what we call wireframes. OnceUXDers understand the broader picture through the site map, they can start sketching wireframes. Wireframes are a blueprint for the final look and feel of a product. One principle of UXD is to sketch early and often. As we sketch iterate and change the designs. We start out with very sketchy wireframes and slowly add color and flair. We get feedback from developers, project managers, other ux professionals. This feedback concerns layout, grid, functionality, and the interactions on each screen
  8. Run through goals for the presentation.
  9. So this is the UX Iceberg that covers all the layers of UXD. At the top we have the surface, or the visual design, which is what the user sees in the end product, but before that…
  10. Run through goals for the presentation.
  11. Run through goals for the presentation.
  12. Run through goals for the presentation.
  13. Run through goals for the presentation.
  14. Run through goals for the presentation.
  15. Run through goals for the presentation.
  16. Run through goals for the presentation.
  17. Run through goals for the presentation.
  18. Run through goals for the presentation.
  19. Run through goals for the presentation.
  20. Run through goals for the presentation.
  21. Run through goals for the presentation.
  22. Run through goals for the presentation.
  23. Run through goals for the presentation.
  24. Run through goals for the presentation.
  25. Run through goals for the presentation.
  26. Run through goals for the presentation.
  27. Run through goals for the presentation.
  28. Run through goals for the presentation.
  29. Run through goals for the presentation.
  30. Run through goals for the presentation.
  31. Run through goals for the presentation.
  32. Maybe less text on this slidePractice empathy - utilize user research to generate user goals, user problems, and examine how T2 products meet those goalsConsider broader context – why do users encounter problems and how have other products failed / succeededSketch, collaborate, share – creating and communication stimulates brainstorming
  33. Run through goals for the presentation.