SlideShare une entreprise Scribd logo
and the various techniques to illustrate the interaction
STORYBOARDING
Presented By: Prarthana Panchal and informed by Jon Mann.
INTRODUCTION
Concept Experience Design
• Design
• Develop compelling user
experiences for hardware, software
and services
• Align
• Work closely with Innovation
Marketing and Product
Development
• Pitch
• Create a synergistic vision and sell
the product
feasibility
viability
desirability
HOME
WEB
MOBILE
SERVICES
INTRODUCTION
Moving from Synthesis to Ideation
• Synthesize insights into solutions
• Address market and user needs
• Brainstorm ideas/concepts/features
• Define your user(s)
• Define user experience and
interaction models
DEFINE YOUR DESIGN
DEFINING YOUR PRODUCT
The What, Why, Who, When and
Where of it all
DEFINE YOUR DESIGN
The What…A Mobile Experience
• Always on, always on us
• Linked to the cloud
• Socially enabled
• Shared (hand off your phone)
• Sixth sense (and more coming)
• Microphone, speaker, camera, gps
accelerometer, compass, ambient
light
DEFINE YOUR DESIGN
Designing For Mobile
• Optimized, quick, accessible,
intelligent
• Leverage prediction and probability to
narrow down options (ambient
awareness)
• Multi-modal input: touch, keys, voice,
gestures
• Snack sized, not a buffet
• Quick access window into a larger
ecosystem
• Context of use
DEFINE YOUR DESIGN
The Why
What is the Customer Value Proposition?
• Why would they use it, what do they get?
• What is the promise
• Appeal to a core need
What is the benefit to the company?
• Does it align with a larger strategy
• How do you differentiate
• Does the company have credibility
DEFINE YOUR DESIGN
Make Mantra
Make Mantra *
• What is the essence of your product
• Bring clarity and simplicity to your goals
• Your mantra is the compass (and filter) to
direct your product features
* From Guy Kawasaki’s “The Art of the Start”
DEFINE YOUR DESIGN
Example Mantras
• Authentic athletic performance (Nike)
• Fun family entertainment (Disney)
• Rewarding everyday moments (Starbucks)
• Think (IBM)
• Winning is everything (Vince Lombardiʼs
Green Bay Packers)
DEFINE YOUR DESIGN
Doing it Differently
vsPS3
Technological marvel
Amazing graphics
Blue-ray player
Hardcore gamers
Wii
Simple
Accessible
Accelerometers
Non-gamers
DEFINE YOUR DESIGN
The Who
Target Users
• Can come from research or marketing
• Remember multiple use cases & users
Personas
• Can be simple or complex
The Mobile Angle
• Design for sharing
DEFINE YOUR DESIGN
The Where & When
The Mobile Angle
• Inside vs outside (contrast)
• Stationary vs moving (complexity)
• Active vs passive control (proximity)
• Other environmental limitations
• Public vs private (alerts)
• Other rules of etiquette
DEFINE YOUR DESIGN
Let’s Put It All Together
Mantra: Constantly pushing the limits
What:
• Record tricks (skater & recorder modes)
• Learn/master tricks mode (AR & motion capture)
• Upload & share tricks. Brag/comment/teach
Users:
• Skater: primary owner and user
• Recorder/observer: secondary user
Where/When
• Skate parks and urban streets
• Mostly day, some dusk (low light is an issue)
Mobile Affordances:
• Accelerometer + compass + gps for
motion capture (passive recording)
• Camera for recording + augmented
reality overlay (active recording)
• Upload data to cloud for sharing
• Share recordings on-the-spot with
friends (share phone)
• Simplified UI during recording (w/
auto start/stop)
Special Considerations:
• Viewing in bright light
• Use with safety equipment (helmet,
gloves, etc)
DEFINE YOUR DESIGN
DESIGNERS TOOLBOX
Telling and selling your story
DESIGNERS TOOLBOX
The Designers Toolbox
BRAINSTORMING MIND MAPPING
DESIGN SKETCHING STORYBOARDING
DESIGNERS TOOLBOX
Why Storyboard/Sketch
Refine the Design
• Inform the interaction model +
wireframes
• Vet product concepts and interactions
• Quick and iterative
• Build out your use cases
Sell Your Ideas
• Convey product value proposition
• Sell the vision and brand fit
DESIGNERS TOOLBOX
Storyboarding/Sketching Principles
DO
• Focus on the high-level
tasks/interactions
• Focus on a couple of your primary
use cases
• Show the most likely user experience
DON’T
• Get bogged down in the detailed
interactions. Save that for the
wireframes
DESIGNERS TOOLBOX
Storyboard: Experience/CVP
DESIGNERS TOOLBOX
Storyboard: Motion Graphics
DESIGNERS TOOLBOX
Design Sketching: Interactions
DESIGNERS TOOLBOX
Design Sketching: Task Flows
DESIGNERS TOOLBOX
Examples
Who:
People who are having trouble counting in their heads in accordance with specific
note values in the music. Also, I’d like this app to motivate people to progress
The first goal would be targeted to both older individuals and younger, while the latter
competitive would be mainly targeted at younger students.
What:
This is an visual system that functions as the verbal counting mechanism that many
individuals learn “one and two and three and four and one and…etc).
Where:
The concept could be embedded in the music stand, or the music itself. Also the
instrument could be augmented in some way.
When: The use would come while practicing at home away from a lesson or at an
orchestra rehearsal when you have to be able to site read with the other players. A
big challenge is remembering what you learned at your lesson and then applying
those principals to your practice at home.
Why:
Learning an instrument is difficult. Most of the challenge is staying motivated to
practice even when the going is slow. Many times students quite after a few months
or even a couple of years, on the cusp of understanding. People quite just before they
start to sound good on their instrument.
How:
I want this to be visual and not verbal because when I’m playing it’s very hard for me
to talk or read things.
Either this is a visual map that helps you get through the music or a device that
records your progress and puts you head-to-head with another player.
http://seedandsprout.com/s10_gd492/category/students/cox/
DESIGNERS TOOLBOX
Examples
http://seedandsprout.com/s10_gd492/category/students/cox/
DESIGNERS TOOLBOX
Examples
http://seedandsprout.com/s10_gd492/category/students/cox/
DESIGNERS TOOLBOX
Immersion Techniques
Scenarios
Act out the interaction
Portray the interactions in the
environmental contexts they
would be used.
Note: if you can live it for real, do it!
Role Playing
Act out the roles
Portray the needs and
perspectives of the players in
the interaction.
Personification
Act out the personality
Give personality to the
inanimate qualities of the
product, service or brand.
DESIGNERS TOOLBOX
Tangibles Techniques
Props
Acting with the object
Use props to investigate our
physical and emotional
interactions to the problem
context.
Rapid Prototyping
Interacting with the object
Build interactive props to
experience the
product/service/brand in use.
Sensory Deprivation
Expand beyond the object
Introduce physical constraints
(sight, hearing, dexterity) to
promote more holistic solutions
that cater to all the senses.
IF YOU ARE THINKING NUI!
DESIGNERS TOOLBOX
Simulated experience
DESIGNERS TOOLBOX
AIGA Hive Workshops 28
Tangibles
In Practice
Kinetic UX AIGA Hive Workshops 2011
DESIGNERS TOOLBOX
Make Mantra
• Identify the customer value proposition and use as a compass
Make it Mobile (or the platform you are working in)
• Design for the unique affordances of mobile (platform)
• Embrace the changing contexts of the mobile (platform) user
Storyboard
• Tell your story, sell your CVP
• Sketch: quick and iterative
Conclusion
Thank you.

Contenu connexe

Tendances

Fred Spencer: Designing a Great UI
Fred Spencer: Designing a Great UIFred Spencer: Designing a Great UI
Fred Spencer: Designing a Great UI
Axway Appcelerator
 
From Paths to Sandboxes
From Paths to SandboxesFrom Paths to Sandboxes
From Paths to Sandboxes
Stephen Anderson
 
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
Marc Miquel
 
Remixing Mobile User Experience
Remixing Mobile User ExperienceRemixing Mobile User Experience
Remixing Mobile User Experience
Jason Mesut
 
Touchscreen UX Design Workshop
Touchscreen UX Design WorkshopTouchscreen UX Design Workshop
Touchscreen UX Design Workshop
Kirsten Miller
 
Francisco Inchauste - RIA Mojo - Making your Flex application standout with a...
Francisco Inchauste - RIA Mojo - Making your Flex application standout with a...Francisco Inchauste - RIA Mojo - Making your Flex application standout with a...
Francisco Inchauste - RIA Mojo - Making your Flex application standout with a...
360|Conferences
 
Characteristics of a well designed user interface
Characteristics of a well designed user interfaceCharacteristics of a well designed user interface
Characteristics of a well designed user interface
Thomas Byttebier
 
Mobile UX London - Mobile Usability Hands-on by SABRINA DUDA
Mobile UX London - Mobile Usability Hands-on by SABRINA DUDAMobile UX London - Mobile Usability Hands-on by SABRINA DUDA
Mobile UX London - Mobile Usability Hands-on by SABRINA DUDA
MobileUXLondon
 
Ben Sauer - Principles of Voice Design
Ben Sauer - Principles of Voice DesignBen Sauer - Principles of Voice Design
Ben Sauer - Principles of Voice Design
uxbri
 
Beyond usability
Beyond usabilityBeyond usability
Beyond usability
Jonathan Roberts
 
What is UX?
What is UX?What is UX?
What is UX?
David Carr
 
Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
Rachel Hinman
 
Basics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & UsabilityBasics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & Usability
Sebastian Waters
 
UX (User Experience) Process, May 2017
UX (User Experience) Process, May 2017UX (User Experience) Process, May 2017
UX (User Experience) Process, May 2017
Gary Coker
 
Bill Meyer (Virtual Science Center): Turning Kids on to STEM by Letting Them ...
Bill Meyer (Virtual Science Center): Turning Kids on to STEM by Letting Them ...Bill Meyer (Virtual Science Center): Turning Kids on to STEM by Letting Them ...
Bill Meyer (Virtual Science Center): Turning Kids on to STEM by Letting Them ...
AugmentedWorldExpo
 
Creating a Universal Design System for Web, Mobile, Wearables, and XR
Creating a Universal Design System for Web, Mobile, Wearables, and XRCreating a Universal Design System for Web, Mobile, Wearables, and XR
Creating a Universal Design System for Web, Mobile, Wearables, and XR
damirkotoric
 
UX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesUX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and Archives
Ned Potter
 
MIT OpenDocLab's StoryTools
MIT OpenDocLab's StoryTools MIT OpenDocLab's StoryTools
MIT OpenDocLab's StoryTools
David Dufresne
 
The UX Industry & You
The UX Industry & YouThe UX Industry & You
The UX Industry & You
Rebecca Destello
 

Tendances (19)

Fred Spencer: Designing a Great UI
Fred Spencer: Designing a Great UIFred Spencer: Designing a Great UI
Fred Spencer: Designing a Great UI
 
From Paths to Sandboxes
From Paths to SandboxesFrom Paths to Sandboxes
From Paths to Sandboxes
 
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
 
Remixing Mobile User Experience
Remixing Mobile User ExperienceRemixing Mobile User Experience
Remixing Mobile User Experience
 
Touchscreen UX Design Workshop
Touchscreen UX Design WorkshopTouchscreen UX Design Workshop
Touchscreen UX Design Workshop
 
Francisco Inchauste - RIA Mojo - Making your Flex application standout with a...
Francisco Inchauste - RIA Mojo - Making your Flex application standout with a...Francisco Inchauste - RIA Mojo - Making your Flex application standout with a...
Francisco Inchauste - RIA Mojo - Making your Flex application standout with a...
 
Characteristics of a well designed user interface
Characteristics of a well designed user interfaceCharacteristics of a well designed user interface
Characteristics of a well designed user interface
 
Mobile UX London - Mobile Usability Hands-on by SABRINA DUDA
Mobile UX London - Mobile Usability Hands-on by SABRINA DUDAMobile UX London - Mobile Usability Hands-on by SABRINA DUDA
Mobile UX London - Mobile Usability Hands-on by SABRINA DUDA
 
Ben Sauer - Principles of Voice Design
Ben Sauer - Principles of Voice DesignBen Sauer - Principles of Voice Design
Ben Sauer - Principles of Voice Design
 
Beyond usability
Beyond usabilityBeyond usability
Beyond usability
 
What is UX?
What is UX?What is UX?
What is UX?
 
Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
 
Basics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & UsabilityBasics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & Usability
 
UX (User Experience) Process, May 2017
UX (User Experience) Process, May 2017UX (User Experience) Process, May 2017
UX (User Experience) Process, May 2017
 
Bill Meyer (Virtual Science Center): Turning Kids on to STEM by Letting Them ...
Bill Meyer (Virtual Science Center): Turning Kids on to STEM by Letting Them ...Bill Meyer (Virtual Science Center): Turning Kids on to STEM by Letting Them ...
Bill Meyer (Virtual Science Center): Turning Kids on to STEM by Letting Them ...
 
Creating a Universal Design System for Web, Mobile, Wearables, and XR
Creating a Universal Design System for Web, Mobile, Wearables, and XRCreating a Universal Design System for Web, Mobile, Wearables, and XR
Creating a Universal Design System for Web, Mobile, Wearables, and XR
 
UX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and ArchivesUX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and Archives
 
MIT OpenDocLab's StoryTools
MIT OpenDocLab's StoryTools MIT OpenDocLab's StoryTools
MIT OpenDocLab's StoryTools
 
The UX Industry & You
The UX Industry & YouThe UX Industry & You
The UX Industry & You
 

Similaire à Storyboarding

Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
Tunde Ojediran
 
FLEXperience
FLEXperienceFLEXperience
FLEXperience
Joe Johnston
 
Joe Johnston - FLEXperience - putting the Flex in UX
Joe Johnston - FLEXperience - putting the Flex in UXJoe Johnston - FLEXperience - putting the Flex in UX
Joe Johnston - FLEXperience - putting the Flex in UX
360|Conferences
 
Ux1
Ux1Ux1
User Experience and Prototyping
User Experience and PrototypingUser Experience and Prototyping
User Experience and Prototyping
Kshitiz Anand
 
UX workshop
UX workshopUX workshop
UX workshop
Jonathan Wong
 
UI For Alien Cowboys
UI For Alien CowboysUI For Alien Cowboys
UI For Alien Cowboys
Matt Jones
 
EPFL - PxS, week 4 - UX design techniques
EPFL - PxS, week 4 - UX design techniquesEPFL - PxS, week 4 - UX design techniques
EPFL - PxS, week 4 - UX design techniques
hendrikknoche
 
IxD Works Miniworkshop: Introduction
IxD Works Miniworkshop: IntroductionIxD Works Miniworkshop: Introduction
IxD Works Miniworkshop: Introduction
InteractionDesign
 
Intro to User eXperience
Intro to User eXperienceIntro to User eXperience
Intro to User eXperience
Mike Gallers
 
Janice Tsai | UX Portfolio 2015
Janice Tsai | UX Portfolio 2015Janice Tsai | UX Portfolio 2015
Janice Tsai | UX Portfolio 2015
Janice Tsai
 
LX Journey Mapping Workshop
LX Journey Mapping WorkshopLX Journey Mapping Workshop
LX Journey Mapping Workshop
Joyce Seitzinger
 
Designers whodoeswhatsps2019
Designers whodoeswhatsps2019Designers whodoeswhatsps2019
Designers whodoeswhatsps2019
Jeanndre Spies
 
What I learned at Cooper U about Design Research
What I learned at Cooper U about Design ResearchWhat I learned at Cooper U about Design Research
What I learned at Cooper U about Design Research
SolutionStream
 
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper PrototypingAPIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
European Innovation Academy
 
How User Experience Addresses Unconscious Bias
How User Experience Addresses Unconscious BiasHow User Experience Addresses Unconscious Bias
How User Experience Addresses Unconscious Bias
Marcus Finley
 
Designing for Customer needs: A UX Perspective
Designing for Customer needs: A UX PerspectiveDesigning for Customer needs: A UX Perspective
Designing for Customer needs: A UX Perspective
Richard O'Brien
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface design
Zdeněk Lanc
 
Improving your site's usability - what users really want
Improving your site's usability - what users really wantImproving your site's usability - what users really want
Improving your site's usability - what users really want
leisa reichelt
 
LearningCafe Unconference - Mapping The Journey
LearningCafe Unconference - Mapping The Journey LearningCafe Unconference - Mapping The Journey
LearningCafe Unconference - Mapping The Journey
Joyce Seitzinger
 

Similaire à Storyboarding (20)

Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 
FLEXperience
FLEXperienceFLEXperience
FLEXperience
 
Joe Johnston - FLEXperience - putting the Flex in UX
Joe Johnston - FLEXperience - putting the Flex in UXJoe Johnston - FLEXperience - putting the Flex in UX
Joe Johnston - FLEXperience - putting the Flex in UX
 
Ux1
Ux1Ux1
Ux1
 
User Experience and Prototyping
User Experience and PrototypingUser Experience and Prototyping
User Experience and Prototyping
 
UX workshop
UX workshopUX workshop
UX workshop
 
UI For Alien Cowboys
UI For Alien CowboysUI For Alien Cowboys
UI For Alien Cowboys
 
EPFL - PxS, week 4 - UX design techniques
EPFL - PxS, week 4 - UX design techniquesEPFL - PxS, week 4 - UX design techniques
EPFL - PxS, week 4 - UX design techniques
 
IxD Works Miniworkshop: Introduction
IxD Works Miniworkshop: IntroductionIxD Works Miniworkshop: Introduction
IxD Works Miniworkshop: Introduction
 
Intro to User eXperience
Intro to User eXperienceIntro to User eXperience
Intro to User eXperience
 
Janice Tsai | UX Portfolio 2015
Janice Tsai | UX Portfolio 2015Janice Tsai | UX Portfolio 2015
Janice Tsai | UX Portfolio 2015
 
LX Journey Mapping Workshop
LX Journey Mapping WorkshopLX Journey Mapping Workshop
LX Journey Mapping Workshop
 
Designers whodoeswhatsps2019
Designers whodoeswhatsps2019Designers whodoeswhatsps2019
Designers whodoeswhatsps2019
 
What I learned at Cooper U about Design Research
What I learned at Cooper U about Design ResearchWhat I learned at Cooper U about Design Research
What I learned at Cooper U about Design Research
 
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper PrototypingAPIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
APIA2018 - Zahra Tashakorinia - Design Hacks & Paper Prototyping
 
How User Experience Addresses Unconscious Bias
How User Experience Addresses Unconscious BiasHow User Experience Addresses Unconscious Bias
How User Experience Addresses Unconscious Bias
 
Designing for Customer needs: A UX Perspective
Designing for Customer needs: A UX PerspectiveDesigning for Customer needs: A UX Perspective
Designing for Customer needs: A UX Perspective
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface design
 
Improving your site's usability - what users really want
Improving your site's usability - what users really wantImproving your site's usability - what users really want
Improving your site's usability - what users really want
 
LearningCafe Unconference - Mapping The Journey
LearningCafe Unconference - Mapping The Journey LearningCafe Unconference - Mapping The Journey
LearningCafe Unconference - Mapping The Journey
 

Plus de Prarthana Johnson

SoundCloud + TU Delft Student 360 | 2016 | Group 4
SoundCloud + TU Delft Student 360 | 2016 | Group 4SoundCloud + TU Delft Student 360 | 2016 | Group 4
SoundCloud + TU Delft Student 360 | 2016 | Group 4
Prarthana Johnson
 
SoundCloud + TU Delft Student 360 | 2016 | Group 3
SoundCloud + TU Delft Student 360 | 2016 | Group 3SoundCloud + TU Delft Student 360 | 2016 | Group 3
SoundCloud + TU Delft Student 360 | 2016 | Group 3
Prarthana Johnson
 
SoundCloud + TU Delft Student 360 | 2016 | Group 2
SoundCloud + TU Delft Student 360 | 2016 | Group 2SoundCloud + TU Delft Student 360 | 2016 | Group 2
SoundCloud + TU Delft Student 360 | 2016 | Group 2
Prarthana Johnson
 
SoundCloud + Delft Primer
SoundCloud + Delft PrimerSoundCloud + Delft Primer
SoundCloud + Delft Primer
Prarthana Johnson
 
S360 Strategic Product design collaboration proposal for Berlin 2016
S360 Strategic Product design collaboration proposal for Berlin 2016S360 Strategic Product design collaboration proposal for Berlin 2016
S360 Strategic Product design collaboration proposal for Berlin 2016
Prarthana Johnson
 
All Hail the Committee! Typo 2016 Talk Berlin
All Hail the Committee! Typo 2016 Talk BerlinAll Hail the Committee! Typo 2016 Talk Berlin
All Hail the Committee! Typo 2016 Talk Berlin
Prarthana Johnson
 
Growing a voice as a designer
Growing a voice as a designerGrowing a voice as a designer
Growing a voice as a designer
Prarthana Johnson
 
Four by Design: Design Deprivations
Four by Design: Design DeprivationsFour by Design: Design Deprivations
Four by Design: Design Deprivations
Prarthana Johnson
 
NC State Interaction Design Course Spring 2010
NC State Interaction Design Course Spring 2010NC State Interaction Design Course Spring 2010
NC State Interaction Design Course Spring 2010
Prarthana Johnson
 
Prarthana Presents at HCDE at University of Washington
Prarthana Presents at HCDE at University of Washington Prarthana Presents at HCDE at University of Washington
Prarthana Presents at HCDE at University of Washington
Prarthana Johnson
 
UX Istanbul 2015: Why Design Has A Set At the Table
UX Istanbul 2015: Why Design Has A Set At the TableUX Istanbul 2015: Why Design Has A Set At the Table
UX Istanbul 2015: Why Design Has A Set At the Table
Prarthana Johnson
 
Worktech West Coast 2014: The sweet spot between the digital & physical
Worktech West Coast 2014: The sweet spot between the digital & physicalWorktech West Coast 2014: The sweet spot between the digital & physical
Worktech West Coast 2014: The sweet spot between the digital & physical
Prarthana Johnson
 
IXDA Seattle: Touch and Beyond Series
IXDA Seattle: Touch and Beyond SeriesIXDA Seattle: Touch and Beyond Series
IXDA Seattle: Touch and Beyond Series
Prarthana Johnson
 
Apdf Spontaneous Invention
Apdf Spontaneous InventionApdf Spontaneous Invention
Apdf Spontaneous Invention
Prarthana Johnson
 
Kinetic Brainstorming Workshop Seattle Hive 2011
Kinetic Brainstorming Workshop Seattle Hive 2011Kinetic Brainstorming Workshop Seattle Hive 2011
Kinetic Brainstorming Workshop Seattle Hive 2011
Prarthana Johnson
 

Plus de Prarthana Johnson (15)

SoundCloud + TU Delft Student 360 | 2016 | Group 4
SoundCloud + TU Delft Student 360 | 2016 | Group 4SoundCloud + TU Delft Student 360 | 2016 | Group 4
SoundCloud + TU Delft Student 360 | 2016 | Group 4
 
SoundCloud + TU Delft Student 360 | 2016 | Group 3
SoundCloud + TU Delft Student 360 | 2016 | Group 3SoundCloud + TU Delft Student 360 | 2016 | Group 3
SoundCloud + TU Delft Student 360 | 2016 | Group 3
 
SoundCloud + TU Delft Student 360 | 2016 | Group 2
SoundCloud + TU Delft Student 360 | 2016 | Group 2SoundCloud + TU Delft Student 360 | 2016 | Group 2
SoundCloud + TU Delft Student 360 | 2016 | Group 2
 
SoundCloud + Delft Primer
SoundCloud + Delft PrimerSoundCloud + Delft Primer
SoundCloud + Delft Primer
 
S360 Strategic Product design collaboration proposal for Berlin 2016
S360 Strategic Product design collaboration proposal for Berlin 2016S360 Strategic Product design collaboration proposal for Berlin 2016
S360 Strategic Product design collaboration proposal for Berlin 2016
 
All Hail the Committee! Typo 2016 Talk Berlin
All Hail the Committee! Typo 2016 Talk BerlinAll Hail the Committee! Typo 2016 Talk Berlin
All Hail the Committee! Typo 2016 Talk Berlin
 
Growing a voice as a designer
Growing a voice as a designerGrowing a voice as a designer
Growing a voice as a designer
 
Four by Design: Design Deprivations
Four by Design: Design DeprivationsFour by Design: Design Deprivations
Four by Design: Design Deprivations
 
NC State Interaction Design Course Spring 2010
NC State Interaction Design Course Spring 2010NC State Interaction Design Course Spring 2010
NC State Interaction Design Course Spring 2010
 
Prarthana Presents at HCDE at University of Washington
Prarthana Presents at HCDE at University of Washington Prarthana Presents at HCDE at University of Washington
Prarthana Presents at HCDE at University of Washington
 
UX Istanbul 2015: Why Design Has A Set At the Table
UX Istanbul 2015: Why Design Has A Set At the TableUX Istanbul 2015: Why Design Has A Set At the Table
UX Istanbul 2015: Why Design Has A Set At the Table
 
Worktech West Coast 2014: The sweet spot between the digital & physical
Worktech West Coast 2014: The sweet spot between the digital & physicalWorktech West Coast 2014: The sweet spot between the digital & physical
Worktech West Coast 2014: The sweet spot between the digital & physical
 
IXDA Seattle: Touch and Beyond Series
IXDA Seattle: Touch and Beyond SeriesIXDA Seattle: Touch and Beyond Series
IXDA Seattle: Touch and Beyond Series
 
Apdf Spontaneous Invention
Apdf Spontaneous InventionApdf Spontaneous Invention
Apdf Spontaneous Invention
 
Kinetic Brainstorming Workshop Seattle Hive 2011
Kinetic Brainstorming Workshop Seattle Hive 2011Kinetic Brainstorming Workshop Seattle Hive 2011
Kinetic Brainstorming Workshop Seattle Hive 2011
 

Dernier

一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
ijk38lw
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
kuapy
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 

Dernier (20)

一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 

Storyboarding

  • 1. and the various techniques to illustrate the interaction STORYBOARDING Presented By: Prarthana Panchal and informed by Jon Mann.
  • 2. INTRODUCTION Concept Experience Design • Design • Develop compelling user experiences for hardware, software and services • Align • Work closely with Innovation Marketing and Product Development • Pitch • Create a synergistic vision and sell the product feasibility viability desirability HOME WEB MOBILE SERVICES
  • 3. INTRODUCTION Moving from Synthesis to Ideation • Synthesize insights into solutions • Address market and user needs • Brainstorm ideas/concepts/features • Define your user(s) • Define user experience and interaction models
  • 4. DEFINE YOUR DESIGN DEFINING YOUR PRODUCT The What, Why, Who, When and Where of it all
  • 5. DEFINE YOUR DESIGN The What…A Mobile Experience • Always on, always on us • Linked to the cloud • Socially enabled • Shared (hand off your phone) • Sixth sense (and more coming) • Microphone, speaker, camera, gps accelerometer, compass, ambient light
  • 6. DEFINE YOUR DESIGN Designing For Mobile • Optimized, quick, accessible, intelligent • Leverage prediction and probability to narrow down options (ambient awareness) • Multi-modal input: touch, keys, voice, gestures • Snack sized, not a buffet • Quick access window into a larger ecosystem • Context of use
  • 7. DEFINE YOUR DESIGN The Why What is the Customer Value Proposition? • Why would they use it, what do they get? • What is the promise • Appeal to a core need What is the benefit to the company? • Does it align with a larger strategy • How do you differentiate • Does the company have credibility
  • 8. DEFINE YOUR DESIGN Make Mantra Make Mantra * • What is the essence of your product • Bring clarity and simplicity to your goals • Your mantra is the compass (and filter) to direct your product features * From Guy Kawasaki’s “The Art of the Start”
  • 9. DEFINE YOUR DESIGN Example Mantras • Authentic athletic performance (Nike) • Fun family entertainment (Disney) • Rewarding everyday moments (Starbucks) • Think (IBM) • Winning is everything (Vince Lombardiʼs Green Bay Packers)
  • 10. DEFINE YOUR DESIGN Doing it Differently vsPS3 Technological marvel Amazing graphics Blue-ray player Hardcore gamers Wii Simple Accessible Accelerometers Non-gamers
  • 11. DEFINE YOUR DESIGN The Who Target Users • Can come from research or marketing • Remember multiple use cases & users Personas • Can be simple or complex The Mobile Angle • Design for sharing
  • 12. DEFINE YOUR DESIGN The Where & When The Mobile Angle • Inside vs outside (contrast) • Stationary vs moving (complexity) • Active vs passive control (proximity) • Other environmental limitations • Public vs private (alerts) • Other rules of etiquette
  • 13. DEFINE YOUR DESIGN Let’s Put It All Together Mantra: Constantly pushing the limits What: • Record tricks (skater & recorder modes) • Learn/master tricks mode (AR & motion capture) • Upload & share tricks. Brag/comment/teach Users: • Skater: primary owner and user • Recorder/observer: secondary user Where/When • Skate parks and urban streets • Mostly day, some dusk (low light is an issue) Mobile Affordances: • Accelerometer + compass + gps for motion capture (passive recording) • Camera for recording + augmented reality overlay (active recording) • Upload data to cloud for sharing • Share recordings on-the-spot with friends (share phone) • Simplified UI during recording (w/ auto start/stop) Special Considerations: • Viewing in bright light • Use with safety equipment (helmet, gloves, etc)
  • 14. DEFINE YOUR DESIGN DESIGNERS TOOLBOX Telling and selling your story
  • 15. DESIGNERS TOOLBOX The Designers Toolbox BRAINSTORMING MIND MAPPING DESIGN SKETCHING STORYBOARDING
  • 16. DESIGNERS TOOLBOX Why Storyboard/Sketch Refine the Design • Inform the interaction model + wireframes • Vet product concepts and interactions • Quick and iterative • Build out your use cases Sell Your Ideas • Convey product value proposition • Sell the vision and brand fit
  • 17. DESIGNERS TOOLBOX Storyboarding/Sketching Principles DO • Focus on the high-level tasks/interactions • Focus on a couple of your primary use cases • Show the most likely user experience DON’T • Get bogged down in the detailed interactions. Save that for the wireframes
  • 22. DESIGNERS TOOLBOX Examples Who: People who are having trouble counting in their heads in accordance with specific note values in the music. Also, I’d like this app to motivate people to progress The first goal would be targeted to both older individuals and younger, while the latter competitive would be mainly targeted at younger students. What: This is an visual system that functions as the verbal counting mechanism that many individuals learn “one and two and three and four and one and…etc). Where: The concept could be embedded in the music stand, or the music itself. Also the instrument could be augmented in some way. When: The use would come while practicing at home away from a lesson or at an orchestra rehearsal when you have to be able to site read with the other players. A big challenge is remembering what you learned at your lesson and then applying those principals to your practice at home. Why: Learning an instrument is difficult. Most of the challenge is staying motivated to practice even when the going is slow. Many times students quite after a few months or even a couple of years, on the cusp of understanding. People quite just before they start to sound good on their instrument. How: I want this to be visual and not verbal because when I’m playing it’s very hard for me to talk or read things. Either this is a visual map that helps you get through the music or a device that records your progress and puts you head-to-head with another player. http://seedandsprout.com/s10_gd492/category/students/cox/
  • 25. DESIGNERS TOOLBOX Immersion Techniques Scenarios Act out the interaction Portray the interactions in the environmental contexts they would be used. Note: if you can live it for real, do it! Role Playing Act out the roles Portray the needs and perspectives of the players in the interaction. Personification Act out the personality Give personality to the inanimate qualities of the product, service or brand.
  • 26. DESIGNERS TOOLBOX Tangibles Techniques Props Acting with the object Use props to investigate our physical and emotional interactions to the problem context. Rapid Prototyping Interacting with the object Build interactive props to experience the product/service/brand in use. Sensory Deprivation Expand beyond the object Introduce physical constraints (sight, hearing, dexterity) to promote more holistic solutions that cater to all the senses. IF YOU ARE THINKING NUI!
  • 28. DESIGNERS TOOLBOX AIGA Hive Workshops 28 Tangibles In Practice Kinetic UX AIGA Hive Workshops 2011
  • 30. Make Mantra • Identify the customer value proposition and use as a compass Make it Mobile (or the platform you are working in) • Design for the unique affordances of mobile (platform) • Embrace the changing contexts of the mobile (platform) user Storyboard • Tell your story, sell your CVP • Sketch: quick and iterative Conclusion

Notes de l'éditeur

  1. NM – We over-index in messaging, our customer message more than anyone else. Our handset roadmap will reflect this next year – we are at a peak – do we go up or down? Overall Competitive Data TMO, 100%, 673/sub Verizon, 80%, 533/sub ATT, 60%, 403/sub Sprint, 45%, 298/sub   DARPU Numbers Total = $11.16, 100% Data = $3.79, 34% Msg = $4.80, 43% Grey = $2.57, 23%  
  2. Context of use: Inside or out. Portrait vs. Landscape
  3. NM – We over-index in messaging, our customer message more than anyone else. Our handset roadmap will reflect this next year – we are at a peak – do we go up or down? Overall Competitive Data TMO, 100%, 673/sub Verizon, 80%, 533/sub ATT, 60%, 403/sub Sprint, 45%, 298/sub   DARPU Numbers Total = $11.16, 100% Data = $3.79, 34% Msg = $4.80, 43% Grey = $2.57, 23%  
  4. Jon Scenarios=environmental  Recreating the scene Role Playing=players Personification
  5. Jon
  6. Prar
  7. Prarthana