SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances

UX Research - Overview
UX Research - OverviewUX Research - Overview
UX Research - OverviewMike Gallers
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and PrinciplesPeeyush Sahu CAPM®
 
UX Design Essential Theories
UX Design Essential TheoriesUX Design Essential Theories
UX Design Essential TheoriesRavi Bhadauria
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataMohamed Shehata
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentationaayush_jain_87
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)iFactory Digital
 
UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile AppsKamil Zieba
 

Tendances (20)

UX Research - Overview
UX Research - OverviewUX Research - Overview
UX Research - Overview
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
Introduction to UX Research
Introduction to UX ResearchIntroduction to UX Research
Introduction to UX Research
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
UX Design Essential Theories
UX Design Essential TheoriesUX Design Essential Theories
UX Design Essential Theories
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
What is UX?
What is UX?What is UX?
What is UX?
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
UX Fundamentals for Beginners
UX Fundamentals for BeginnersUX Fundamentals for Beginners
UX Fundamentals for Beginners
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
Ux design process
Ux design processUx design process
Ux design process
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
UX Design for Mobile Apps
UX Design for Mobile AppsUX Design for Mobile Apps
UX Design for Mobile Apps
 

En vedette

Storyboarding Workshop
Storyboarding WorkshopStoryboarding Workshop
Storyboarding WorkshopAlex Cowan
 
Storyboarding : Workshop for TMC|X
Storyboarding : Workshop for TMC|XStoryboarding : Workshop for TMC|X
Storyboarding : Workshop for TMC|XGrace Rodriguez
 
Storytelling: The Ultimate Survival Tool?
Storytelling: The Ultimate Survival Tool?Storytelling: The Ultimate Survival Tool?
Storytelling: The Ultimate Survival Tool?Park Howell
 
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 storiesSarah Doody
 
Users' Story: UX Storyboarding
Users' Story: UX StoryboardingUsers' Story: UX Storyboarding
Users' Story: UX StoryboardingFrank Garofalo
 
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 SlideShareEugene Cheng
 
The Power of Story in Sustainability
The Power of Story in SustainabilityThe Power of Story in Sustainability
The Power of Story in SustainabilityPark Howell
 
Storytelling in Product Management
Storytelling in Product ManagementStorytelling in Product Management
Storytelling in Product ManagementJeremy Horn
 
Fast Pitch Storytelling Workshop
Fast Pitch Storytelling WorkshopFast Pitch Storytelling Workshop
Fast Pitch Storytelling WorkshopPark Howell
 
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)Sarah Doody
 
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...Deb Aoki
 
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....Deb Aoki
 
Introduction to Storyboarding
Introduction to StoryboardingIntroduction to Storyboarding
Introduction to StoryboardingPresenTense Group
 
Huge UX Design School Exercise
Huge UX Design School ExerciseHuge UX Design School Exercise
Huge UX Design School ExerciseElliott Romano
 
Handsketches for Huge Design Exercise
Handsketches for Huge Design ExerciseHandsketches for Huge Design Exercise
Handsketches for Huge Design ExerciseElliott Romano
 
ERP Delta UX Exercise 041713
ERP Delta UX Exercise 041713ERP Delta UX Exercise 041713
ERP Delta UX Exercise 041713Erik Peterson
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX DesignJp Lynch
 

En vedette (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
 

Similaire à A Workshop on UX Design and Storyboarding

Mobile Best Practices for UX
Mobile Best Practices for UXMobile Best Practices for UX
Mobile Best Practices for UXThe Wisdom Daily
 
UX Design Process - MIT ID Innovation
UX Design Process - MIT ID InnovationUX Design Process - MIT ID Innovation
UX Design Process - MIT ID InnovationPankaj Deshpande
 
Ux Overview
Ux OverviewUx Overview
Ux Overviewmbrosset
 
HoytUX Design Process 2016
HoytUX Design Process 2016HoytUX Design Process 2016
HoytUX Design Process 2016Rob Hoyt
 
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 AccessibilityMarc Miquel
 
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 cityRichard Marsh
 
User Experience Poster
User Experience PosterUser Experience Poster
User Experience PosterJessica Fisher
 
User Centered Design
User Centered DesignUser Centered Design
User Centered DesignShawn Calvert
 
Stop making bland things
Stop making bland thingsStop making bland things
Stop making bland thingsAdriaan Fenwick
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineeringsuslpst
 
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 PICNICMyriam Jessier
 
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 UsableAugmentedWorldExpo
 
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 UXqixingz
 
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 ProductsKaterina Maniataki
 
Konsep-UX-Design-dikonversi 02.pdf
Konsep-UX-Design-dikonversi 02.pdfKonsep-UX-Design-dikonversi 02.pdf
Konsep-UX-Design-dikonversi 02.pdfAgusNugrosNugroho
 

Similaire à 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
 
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
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
 

Dernier

Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdfardanaadam1
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfphriedaoyigada
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Yantram Animation Studio Corporation
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesmilalabial
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 

Dernier (20)

Materi dasar prototype dan figma .pdf
Materi dasar prototype dan figma    .pdfMateri dasar prototype dan figma    .pdf
Materi dasar prototype dan figma .pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdfINTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
INTRODUCTION TO UI/UX DESIGN BEGINNERS.pdf
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
Exploring Futuristic Factory Designs: A 3D Interior Rendering Studio's Perspe...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Central-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposesCentral-Visayas-1.pdf reporting purposes
Central-Visayas-1.pdf reporting purposes
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 

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

Notes de l'éditeur

  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.