Video as a prototyping tool for connected products

Martin Charlier
Martin CharlierDesigner at -
1
Video as a
prototyping tool for
connected products
@marcharlierO’Reilly Design 2017
2
Hello
Product Manager
Industrial design
User Experience
Service design
Strategy
3
Hello
Tom Metcalfe Martin Charlier
@tommetcalfe @marcharlier
4
Video as a
prototyping tool for
connected products
5
Video as a
prototyping tool for
connected products
6
You might learn more
about user experience
from a wooden block and
a chop stick than from
an high-tech prototype.
7
Through early low-fi
prototyping, you can ask
big and fundamental
questions about your
product before you sink
too much cost.
• Would people use this?
• How would it have to work
to be desirable?
• What would it feel like to
use this?
• Should we build this at all?
8
Video as a
prototyping tool for
connected products
9
Challenges with connected products
• The interface might be controls on a new
kind of device.
• The interface could be non-screen based,
like voice, gesture, proximity, physical
interaction.
• Interaction might happen across different
devices, across space or time.
• The overall experience doesn’t just happen
on a computer or a mobile - it involves
unboxing, manuals, different devices,
installation…
Above: Tado Thermostat
Below: Jordi Parra’s Spotify Box (http://blog.zenona.com/)
10
Challenges with connected products
• The interface might be controls on a new
kind of device.
• The interface could be non-screen based,
like voice, gesture, proximity, physical
interaction.
• Interaction might happen across different
devices, across space or time.
• The overall experience doesn’t just happen
on a computer or a mobile - it involves
unboxing, manuals, different devices,
installation…
Amazon Echo
11
Challenges with connected products
• The interface might be controls on a new
kind of device.
• The interface could be non-screen based,
like voice, gesture, proximity, physical
interaction.
• Interaction might happen across different
devices, across space or time.
• The overall experience doesn’t just happen
on a computer or a mobile - it involves
unboxing, manuals, different devices,
installation…
Fujifilm manual
12
Challenges with connected products
• The interface might be controls on a new
kind of device.
• The interface could be non-screen based,
like voice, gesture, proximity, physical
interaction.
• Interaction might happen across different
devices, across space or time.
• The overall experience doesn’t just happen
on a computer or a mobile - it involves
unboxing, manuals, different devices,
installation…
Photo by Ari Jay Comet (www.arijaycomet.com)
13
Conventional
prototyping methods
aren’t always fit for the
prototyping challenges
of connected products.
14
Bootstrap
HTML/CSS/JS
Objective-C / Swift
Software UX
prototyping tools
15
Bootstrap
HTML/CSS/JS
Objective-C / Swift
• Software UX tools are often too
screen centric too soon.
• They don’t really work for Voice
or Gesture UIs.
• Prototyping user journeys that
happen across multiple screens
or devices isn’t ideal.
• It’s easy to forget the physical
context around the device.
16
Industrial design
& electronics
prototyping
17
• Industrial design and physical
prototyping methods often lack
interactivity at the low-fi level.
• You need electronics - this can
be time-consuming.
• Electronics can become a barrier
quickly.
• Easy to get carried away with
optimisation.
18
Service design
prototyping
Photos from:
D-LABS
http://www.servicedesigntools.org/tools/43
http://uxpamagazine.org/business-origami/
Photos from:
D-LABS
http://www.servicedesigntools.org/tools/43
http://uxpamagazine.org/business-origami/
19
• Workshop-based
• Hard to document or share with
people that weren’t there
20
Video as a
prototyping tool for
connected products
21
Video isn’t an obvious
tool for prototyping.
22
The first association for ‘video’ 

in design is often a polished, CGI 

heavy vision film illustrating a 

shiny, seamless future.
23
What makes video great
• Effortless to follow
• Easy to share
• Conveys what an experience feels like -
viewers gain empathy with the actors.
24
Dissecting video
• Script/Scenes = Description of action sequence
• Set = The physical context in which action takes place
• Actors = Multiple humans that carry out actions or interact
• Props = Physical things, mock-ups, prototypes
• Special Effects = Things, actions or behaviours that don’t exist
25
Dissecting video
• Script/Scenes = Description of action sequence
• Set = The physical context in which action takes place
• Actors = Multiple humans that carry out actions or interact
• Props = Physical things, mock-ups, prototypes
• Special Effects = Things, actions or behaviours that don’t exist
The user journey you iterate and develop
26
Dissecting video
• Script/Scenes = Description of action sequence
• Set = The physical context in which action takes place
• Actors = Multiple humans that carry out actions or interact
• Props = Physical things, mock-ups, prototypes
• Special Effects = Things, actions or behaviours that don’t exist
How you gain (and convey) empathy
with the user and their context
27
Dissecting video
• Script/Scenes = Description of action sequence
• Set = The physical context in which action takes place
• Actors = Multiple humans that carry out actions or interact
• Props = Physical things, mock-ups, prototypes
• Special Effects = Things, actions or behaviours that don’t exist
Working across different touch
points, interface types, spaces and
taking into account multiple users.
28
Low-fi video prototyping
builds on paper prototyping,
enactment, storyboarding
and wizard-of-oz.
29
30 minute prototype for a connected herb garden sensor.
Video as a prototyping tool for connected products
31
https://instagram.com/explore/tags/solidprototyping/ https://instagram.com/explore/tags/ixdprototyping
32
Gestural interface for a cooking hob
Script / Scenes
Rapid iteration
through alternative
options you’re unsure
about
Non-screen based
interfaces
33
Set
Understanding the
user’s physical
context
34
Connected loyalty coffee cup
Actors & Props
Interactions that
involve multiple
users and cross-
device interactions.
35
Robotic kitchen aid
Special Effects
Interactions with
robots and machines.
36
A connected fishing rod?!
• It’s a way to figure out whether something is a good idea
before investing much time & money.
37
It’s more about the process than the outcome
80% (The process)
• Rapid iteration and decision
making.
• Exploration across physical
context, multiple devices, time and
space.
• Forces you to think in a time-based
sequence of events - a user journey.
• Acting out: Empathy with the user.
How it might ‘feel’ like using this.
20% (The video)
• It’s self-explanatory and shareable.
• Film is a widely understood
medium that is easily digestible.
• Less ‘loss in translation’, relies less
on imagination of others.
• It lets viewers judge plausibility
(they get a degree of empathy).
38
Why Instagram?
How does it work?
39
Conventional filming Instagram
Edit while filming
Film
↓
Edit
40
Forces you to focus on specific interactions & simplify.
1. Select herb type
2. Start paring
3. Confirm on sensor
4. Install sensor
5. See notification
Substitution
41
The ‘Stop Trick’ (or ‘Substitution splice’)
Recording
STOP START
• Don’t move the camera.
• Keep the same shot.
• Only move the parts
that change.
42
43
44
See last frame as
transparent overlay.
Move clips around after
filming.
Beyond this low-fi
method, there are quick
ways of using video that
have lots of potential.
45
46
1 / 3
More elaborate 

low-fi video prototype
47
Sketch-A-Move: Slightly
more elaborate. Both a
demonstration and an
exploration.
Anab Jain & Louise Klinker
http://superflux.in/index.php/work/sketch-a-move/
48
Sketch-A-Move: Slightly more elaborate. Both a demonstration and an exploration.
http://www.superflux.in/work/sketch-move
49
Inspiring a team
through conveying
the vision behind an
idea.
Matthias Kranz, et. al http://www.eislab.fim.uni-passau.de/files/
publications/2006/SketchAMove_preprint.pdf
50
2 / 3
Take storyboards
to the next level
51
52
“What it would feel like being in the theatre
watching the final film”
“Trying to convey that feeling”
53
The storyboard isn’t
just read out, it is
performed.
The emotional feeling
of the scene is
conveyed.
54
55
Stills compositions
with narration
Cooper Economizer
More info: http://www.cooper.com/journal/
2008/12/economizer
56
A storyboard or video prototype can guide the tech requirements
More info: http://www.cooper.com/journal/2008/12/economizer
Design requirements Design requirements Design requirements Design requirements
57
3 / 3
High-fidelity looks, but
low-fidelity prototypes
58
59
Cut & paste prototype
Issue of The
Economist
Economist-styled
mock up paper parts
we glued in
Cut off
headphone
socket, glued in.
+ +
60
61
Still image animated composition - then add wiggle
Still image Animated flat Wiggle path
+ +
62
Keynote prototyping
63
Keynote prototyping
Look & feel: Pinching timeline to group
photos by affinity
Explainer: Group photos by affinity
when pinching timeline & create album
from stack..
Explainer: Tap stack to “uncompress”
timeline and go to selected photos.
64
Summary
Using video for
prototyping
65
Builds on low-fi methods
• Storyboarding
• Enactment
• Paper prototyping / physical prototyping
• Wizard-of-Oz
66
Works at a range of levels of fidelity
Animated storyboard
Instagram sketch
High-fidelity film with low-fi prototypes
67
Has a range of uses
• Iterate and refine your design
• Articulate a joint vision
• Document design requirements
• Test user desirability
• Convince investors or backers
68
Thank you.
designingconnectedproducts.com
@marcharlier
1 of 68

Recommended

Rapid video prototyping for connected products by
Rapid video prototyping for connected productsRapid video prototyping for connected products
Rapid video prototyping for connected productsMartin Charlier
1.5K views37 slides
Prototyping Experiences for Connected Products by
Prototyping Experiences for Connected ProductsPrototyping Experiences for Connected Products
Prototyping Experiences for Connected ProductsMartin Charlier
1.7K views54 slides
MHIT 603: Lecture 3 - Prototyping Tools by
MHIT 603: Lecture 3 - Prototyping ToolsMHIT 603: Lecture 3 - Prototyping Tools
MHIT 603: Lecture 3 - Prototyping ToolsMark Billinghurst
2.1K views107 slides
MHIT603: Lecture 4 - Experience Prototyping by
MHIT603: Lecture 4 - Experience PrototypingMHIT603: Lecture 4 - Experience Prototyping
MHIT603: Lecture 4 - Experience PrototypingMark Billinghurst
1.3K views56 slides
EGC Presentation at NMC 2010 Symposium by
EGC Presentation at NMC 2010 SymposiumEGC Presentation at NMC 2010 Symposium
EGC Presentation at NMC 2010 SymposiumBrett Bixler
424 views42 slides
COMP 4026 Lecture3 Prototyping and Evaluation by
COMP 4026 Lecture3 Prototyping and EvaluationCOMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and EvaluationMark Billinghurst
1.3K views114 slides

More Related Content

What's hot

Hartford.wayne wh1 by
Hartford.wayne wh1Hartford.wayne wh1
Hartford.wayne wh1NASAPMC
13.5K views22 slides
IoT Meetup Stockholm - Designing Connected Products by
IoT Meetup Stockholm - Designing Connected ProductsIoT Meetup Stockholm - Designing Connected Products
IoT Meetup Stockholm - Designing Connected ProductsMartin Charlier
1.8K views64 slides
Mobile Prototyping Essentials Workshop: Part 2 by
Mobile Prototyping Essentials Workshop: Part 2Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2Rachel Hinman
3.8K views197 slides
COMP 4010 Lecture 3 VR Input and Systems by
COMP 4010 Lecture 3 VR Input and SystemsCOMP 4010 Lecture 3 VR Input and Systems
COMP 4010 Lecture 3 VR Input and SystemsMark Billinghurst
2.9K views80 slides
MHIT 603: Introduction to Interaction Design by
MHIT 603: Introduction to Interaction DesignMHIT 603: Introduction to Interaction Design
MHIT 603: Introduction to Interaction DesignMark Billinghurst
1.1K views77 slides
Rapid Prototyping For Augmented Reality by
Rapid Prototyping For Augmented RealityRapid Prototyping For Augmented Reality
Rapid Prototyping For Augmented RealityMark Billinghurst
16K views124 slides

What's hot(20)

Hartford.wayne wh1 by NASAPMC
Hartford.wayne wh1Hartford.wayne wh1
Hartford.wayne wh1
NASAPMC13.5K views
IoT Meetup Stockholm - Designing Connected Products by Martin Charlier
IoT Meetup Stockholm - Designing Connected ProductsIoT Meetup Stockholm - Designing Connected Products
IoT Meetup Stockholm - Designing Connected Products
Martin Charlier1.8K views
Mobile Prototyping Essentials Workshop: Part 2 by Rachel Hinman
Mobile Prototyping Essentials Workshop: Part 2Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
Rachel Hinman3.8K views
COMP 4010 Lecture 3 VR Input and Systems by Mark Billinghurst
COMP 4010 Lecture 3 VR Input and SystemsCOMP 4010 Lecture 3 VR Input and Systems
COMP 4010 Lecture 3 VR Input and Systems
Mark Billinghurst2.9K views
MHIT 603: Introduction to Interaction Design by Mark Billinghurst
MHIT 603: Introduction to Interaction DesignMHIT 603: Introduction to Interaction Design
MHIT 603: Introduction to Interaction Design
Mark Billinghurst1.1K views
Debugging (Docker) containers in production by bcantrill
Debugging (Docker) containers in productionDebugging (Docker) containers in production
Debugging (Docker) containers in production
bcantrill5.1K views
Leadership Without Management: Scaling Organizations by Scaling Engineers by bcantrill
Leadership Without Management: Scaling Organizations by Scaling EngineersLeadership Without Management: Scaling Organizations by Scaling Engineers
Leadership Without Management: Scaling Organizations by Scaling Engineers
bcantrill69.7K views
COMP 4026 Lecture4: Processing and Advanced Interface Technology by Mark Billinghurst
COMP 4026 Lecture4: Processing and Advanced Interface TechnologyCOMP 4026 Lecture4: Processing and Advanced Interface Technology
COMP 4026 Lecture4: Processing and Advanced Interface Technology
Mark Billinghurst899 views
Cardboard VR: Building Low Cost VR Experiences by Mark Billinghurst
Cardboard VR: Building Low Cost VR ExperiencesCardboard VR: Building Low Cost VR Experiences
Cardboard VR: Building Low Cost VR Experiences
Mark Billinghurst237.6K views
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality by Mark Billinghurst
COMP 4010 - Lecture 5: Interaction Design for Virtual RealityCOMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
Mark Billinghurst2.3K views
Mobile Prototyping Essentials - Part II by Rachel Hinman
Mobile Prototyping Essentials - Part IIMobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Rachel Hinman3.5K views

Similar to Video as a prototyping tool for connected products

User Testing Doesn't Have to Be Hard by
User Testing Doesn't Have to Be HardUser Testing Doesn't Have to Be Hard
User Testing Doesn't Have to Be HardShannon Leahy
211 views54 slides
Mobile Prototyping Essentials by
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
6.8K views135 slides
Mobile Prototyping Essentials by
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
82.2K views206 slides
Prototyping - 2015 PhillyCHI UX Workshop Series by
Prototyping - 2015 PhillyCHI UX Workshop SeriesPrototyping - 2015 PhillyCHI UX Workshop Series
Prototyping - 2015 PhillyCHI UX Workshop SeriesMatthew Thomas
722 views60 slides
La UX delle cose by
La UX delle coseLa UX delle cose
La UX delle coseSimone Chiaretta
466 views19 slides
CSC8605 - Video as Inquiry by
CSC8605 - Video as InquiryCSC8605 - Video as Inquiry
CSC8605 - Video as InquiryJohn Vines
229 views29 slides

Similar to Video as a prototyping tool for connected products(20)

User Testing Doesn't Have to Be Hard by Shannon Leahy
User Testing Doesn't Have to Be HardUser Testing Doesn't Have to Be Hard
User Testing Doesn't Have to Be Hard
Shannon Leahy211 views
Mobile Prototyping Essentials by Rachel Hinman
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
Rachel Hinman6.8K views
Mobile Prototyping Essentials by Rachel Hinman
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
Rachel Hinman82.2K views
Prototyping - 2015 PhillyCHI UX Workshop Series by Matthew Thomas
Prototyping - 2015 PhillyCHI UX Workshop SeriesPrototyping - 2015 PhillyCHI UX Workshop Series
Prototyping - 2015 PhillyCHI UX Workshop Series
Matthew Thomas722 views
CSC8605 - Video as Inquiry by John Vines
CSC8605 - Video as InquiryCSC8605 - Video as Inquiry
CSC8605 - Video as Inquiry
John Vines229 views
UX Beers - A Story about product management at uman.ai - Jasper Verplanken by UX Antwerp Meetup
UX Beers - A Story about product management at uman.ai - Jasper VerplankenUX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Beers - A Story about product management at uman.ai - Jasper Verplanken
UX Antwerp Meetup215 views
Remote usability testing and remote user research for usability by User Vision
Remote usability testing and remote user research for usabilityRemote usability testing and remote user research for usability
Remote usability testing and remote user research for usability
User Vision1.7K views
User eXperience insights by Marion Boberg
User eXperience insightsUser eXperience insights
User eXperience insights
Marion Boberg1.1K views
Agile leadership practices for PIONEERS by Stefan Haas
 Agile leadership practices for PIONEERS Agile leadership practices for PIONEERS
Agile leadership practices for PIONEERS
Stefan Haas18.8K views
Gearing up! A Designer-Focused Evaluation of Ideation Tools for Connected Pro... by Dries De Roeck
Gearing up! A Designer-Focused Evaluation of Ideation Tools for Connected Pro...Gearing up! A Designer-Focused Evaluation of Ideation Tools for Connected Pro...
Gearing up! A Designer-Focused Evaluation of Ideation Tools for Connected Pro...
Dries De Roeck796 views
Ami2013 Tutorial Contextual Experience Prototyping by Thomas Grill
Ami2013 Tutorial Contextual Experience PrototypingAmi2013 Tutorial Contextual Experience Prototyping
Ami2013 Tutorial Contextual Experience Prototyping
Thomas Grill3.9K views
UX Day Mannheim: UX for systems of connected products by Claire Rowland
UX Day Mannheim: UX for systems of connected productsUX Day Mannheim: UX for systems of connected products
UX Day Mannheim: UX for systems of connected products
Claire Rowland1.5K views
User Experience Basics for Product Management by Roger Hart
User Experience Basics for Product ManagementUser Experience Basics for Product Management
User Experience Basics for Product Management
Roger Hart712 views
Multi-Device Digital Product Design by prodactive
Multi-Device Digital Product DesignMulti-Device Digital Product Design
Multi-Device Digital Product Design
prodactive302 views
WORKSHOP: Making the World Easier with Interaction Design by Cheryl Platz
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction Design
Cheryl Platz1.4K views
Usability Workshop at Lillebaelt Academy by Dániel Góré
Usability Workshop at Lillebaelt AcademyUsability Workshop at Lillebaelt Academy
Usability Workshop at Lillebaelt Academy
Dániel Góré1.8K views

Recently uploaded

Behind The Scenes of My Lettering Process - Decorative Monoline Issue 2 by
Behind The Scenes of My Lettering Process - Decorative Monoline Issue 2Behind The Scenes of My Lettering Process - Decorative Monoline Issue 2
Behind The Scenes of My Lettering Process - Decorative Monoline Issue 2Abdelrahman Elyamany | Branding & Presentation Design
35 views22 slides
GMP2 Powerpoint presentation for maker lab by
GMP2 Powerpoint presentation for maker labGMP2 Powerpoint presentation for maker lab
GMP2 Powerpoint presentation for maker labrpham9987
11 views23 slides
Dragon Troubles__Personal Project_______ by
Dragon Troubles__Personal Project_______Dragon Troubles__Personal Project_______
Dragon Troubles__Personal Project_______pulkkinenaliisa
12 views73 slides
Sugar Air Kiss Lipstick by
Sugar Air Kiss LipstickSugar Air Kiss Lipstick
Sugar Air Kiss Lipstickaryasheel1
14 views5 slides
Subzero Report (1).pdf by
Subzero Report (1).pdfSubzero Report (1).pdf
Subzero Report (1).pdfsidhantkhanna8
11 views21 slides
A.K DESIGNS by
A.K DESIGNSA.K DESIGNS
A.K DESIGNSnikitasingh113603
8 views4 slides

Recently uploaded(20)

GMP2 Powerpoint presentation for maker lab by rpham9987
GMP2 Powerpoint presentation for maker labGMP2 Powerpoint presentation for maker lab
GMP2 Powerpoint presentation for maker lab
rpham998711 views
Dragon Troubles__Personal Project_______ by pulkkinenaliisa
Dragon Troubles__Personal Project_______Dragon Troubles__Personal Project_______
Dragon Troubles__Personal Project_______
pulkkinenaliisa12 views
Sugar Air Kiss Lipstick by aryasheel1
Sugar Air Kiss LipstickSugar Air Kiss Lipstick
Sugar Air Kiss Lipstick
aryasheel114 views
Re-envisioning UF's College of Journalism and Communications by emilymccauslin
Re-envisioning UF's College of Journalism and CommunicationsRe-envisioning UF's College of Journalism and Communications
Re-envisioning UF's College of Journalism and Communications
emilymccauslin25 views
INTERNSHIP-PORTFOLIO (shashank) by Shashank Patil
INTERNSHIP-PORTFOLIO (shashank)INTERNSHIP-PORTFOLIO (shashank)
INTERNSHIP-PORTFOLIO (shashank)
Shashank Patil11 views
DR Portfolio.pptx by robertsd2
DR Portfolio.pptxDR Portfolio.pptx
DR Portfolio.pptx
robertsd226 views
boggiano_project 2.pptx by samboggiano
boggiano_project 2.pptxboggiano_project 2.pptx
boggiano_project 2.pptx
samboggiano25 views
Indian wedding dresses design.pdf by Aur Dikhao
Indian wedding dresses design.pdfIndian wedding dresses design.pdf
Indian wedding dresses design.pdf
Aur Dikhao5 views
Dragon Troubles Overview________________ by pulkkinenaliisa
Dragon Troubles Overview________________Dragon Troubles Overview________________
Dragon Troubles Overview________________
pulkkinenaliisa15 views
BeatsFest Brand Guidelines Final.pdf by EddiePena9
BeatsFest Brand Guidelines Final.pdfBeatsFest Brand Guidelines Final.pdf
BeatsFest Brand Guidelines Final.pdf
EddiePena98 views
Free UNICEF foundation day template from best presentation design agency | Sl... by slideceotemplates
Free UNICEF foundation day template from best presentation design agency | Sl...Free UNICEF foundation day template from best presentation design agency | Sl...
Free UNICEF foundation day template from best presentation design agency | Sl...
BREAKFAST GONE WRONG_OVERVIEW___________ by pulkkinenaliisa
BREAKFAST GONE WRONG_OVERVIEW___________BREAKFAST GONE WRONG_OVERVIEW___________
BREAKFAST GONE WRONG_OVERVIEW___________
pulkkinenaliisa11 views

Video as a prototyping tool for connected products