startup seminars - prototyping
TRANSCRIPT
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Prototyping
Paul Dawson, Partner at Fluxx
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
/ ThePaulHasToProve
HisCredsToStandUp
HereAndLectureOn
ThisTopicBit / (in 60 seconds or less)
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
For twelve years
“Clear leaders in Europe for
user-centred design” Forrester, 2006
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Fluxx is a product and service innovation company,
encouraging large companies to behave like start-
ups, to see big thinking brought to life
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
A varied client list
@poleydee fluxx.uk.com © 2015 – All rights reserved Fluxx Ltd.
Disrupting
the high street
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Create new startup
businesses for existing ones
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
We help big
companies
do new
things
in new
ways
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
The Audience tonight
No longer want a prototype
Now want a prototype
Will do my prototype differently
Came to totally the wrong lecture, but met somegreat people and had fun
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
What is a
prototype?
Starting at the
beginning
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Definition
From the Greek: PROTOS: first TYPOS: form
/ A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Who?
/ Designed a phone that
inspired a generation
/ Re-invented a familiar
household object for a
new era
/ Pioneered a focus on
prototype testing
/ Made the world feel like a
smaller place
Guess who?
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Guess who?/ Designed a phone that
inspired a generation
/ Re-invented a familiar
household object for a
new era
/ Pioneered a focus on
prototype testing
/ Made the world feel like a
smaller place
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Henry Dreyfuss, 1904-1972/ Designed a phone that
inspired a generation
/ Re-invented a familiar
household object for a
new era
/ Pioneered a focus on
prototype testing
/ Made the world feel like a
smaller place
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
“With a prototype, customers don’t
have to imagine a product, they are
already experiencing it”Marty Numeier, The Brand Flip
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
You can prototype anything
The mainstay of any properly user-centred design process
It’s how you test products with end users before you invest
in making it for real
/ Cheap
/ Fast to make
/ Easy to change
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
What do you want a prototype to prove or test?
DesirabilityWill people
value it?
ViabilityCan we make a
business from it?
FeasibilityCan it be built?
Brand
Pricing
Service Design
Experience Design
Product or UI Design
To get investment
Business Design
Operational Design
Cost to operate
Commercial Models
Required investment
Technology or
materials proof
Process
Technology
Legal or regulatory
Compliance
Cooperation of
partners
fluxx.uk.com
To test the technology
fluxx.uk.com © 2016 – All rights reserved Fluxx Ltd.
To test a new business
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
To test a new way of operating The ‘thin slice’
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Reasons to use a prototype #1
“Bringing
an idea
to life”
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
So, we’ve got this
idea and we’re
looking for some
backing….
“So show me
how it would
work”
Bringing your idea to life
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Not sexyDesigned for the small screen
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
The Big Screen is good at telling stories
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
/ Should:
Tell a story – scenario based
Be larger than life
/ Should not:
Be usable
Probably not even interactive
To bring an idea to life, your prototype…
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
/ Your idea is so
horrendously complex
that the detail of how it
works is really, really,
important
/ In which case… maybe
you should try to simplify
because nobody’s going
to buy it if it’s so
complicated!
Only resort to detailed UI
prototyping at this stage if…
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Reasons to use a prototype #2
“We want to
model how
something
could work”
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
How do you prototype a service?
/ Try it, see how people react
/ It’s the easiest thing to prototype
/ Honestly, it is easy
But if you can’t actually deliver the service…
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
And a couple of years later…
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Reasons to use a prototype #3
“Making a
usable UI”
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Why prototype?
/ It is the ONLY way you will find out if your design is any good Do people get it?
Can they use it?
/ It is the best way to communicate with developers
/ You find problems you never even knew existed
/ How do you use it? Usability testing – you set
people a goal, and see if they can achieve it
Thinking aloud protocol
Come to great interaction labs like the one here at City
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
It’s at the heart of every user-centred
design process
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
It’s at the heart of every user-centred
design process
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
/ Vertical
Real interaction, real data,
but a thin slice
/ Horizontal
Very little is real, but shows
a lot of potential features
/ Scenario
‘Golden path’ – shows a
very particular user journey
UI Prototype Choices
Low Fidelity
Paper, scamps, wireframes
High Fidelity
Clickable, working, populated
with real content
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
/ Axure
/ Balsamiq
/ Mockplus
/ JustInMind
/ Origami
/ Webflow
/ Proto.io
/ Framr
There are plenty of tools
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
/ Beware ‘hinted’ features, they only lead to commitment
/ Always test it in the most ‘real’ environment
/ You MUST throw them away before you start coding for real
/ ONLY use them for usability testing – to test the design of an interface to see if it supports user goals
Golden UI Prototype Rules
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Lean Experimentation
The Minimum Viable
Product (MVP) is the
SMALLEST thing we can
make to advance the
understanding of our idea
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
We call it an experiment
/ Hypothesis
/ Method
/ Expected outcome
/ Controlled variables
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
A true story:
A client of ours was struggling with a thorny issue
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
It involved using customers’ personal
data in a way we believed
they would value
But equally…
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
They might go nuts and
call the Daily Mail
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
So we created an experiment
to find out one way or the other
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
It totally flopped
Only 24% accepted the idea and said they would opt in
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
So we put it live anyway
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
96% of people just did it
without even thinking about it
(and if they hadn’t, it was a small enough experiment
that nobody would have noticed)
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
There’s what people say they’ll do
then there’s what they actually do…
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
What this proves…
Is that people’s reaction to a test or task is greatly
dependent on their awareness of the purpose of the test
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Some experiment methods
/ Get as ‘real’ a reaction as
possible
/ People shouldn’t be
aware that they are
being asked for feedback
/ They’re rarely sustainable
in the long-run
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Experiment Methods: The Pop UpCreate something that also relies on our core hypothesis – either a
cheaper version of our ‘big idea’ or something else entirely
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Experiment Methods: The fake door
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Methods: The Look-a-Like
Deliver the service personally
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Red BrownYellow Green Blue BlackPink
Techniques: Wizard of Oz
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
The “winnings card”
/ Hypothesis:
If we make customers money easy to get at, they
won’t withdraw it every time they have a win
But they might just grab it all, faster, and then we’re
screwed
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
fluxx.uk.com © 2016 – All rights reserved Fluxx Ltd.
Picking the right technique
We need to understand
what people will value
without investing too much
Lean Experiments
We are looking for support
and feedback on a concept
Movie UI, Focus groups,
one to ones
We need to test if our UI
design actually works
Prototypes & Usability
Testing
We want to refine our
design to be more effective
A/B Testing & MVT
Aware UnawareLevel to which customer is aware
they are giving feedback
Level of
product
maturity
Proposition
User
Interface
fluxx.uk.com @poleydee @fluxxstudios © 2016 – All rights reserved Fluxx Ltd.
Experiments don’t ever succeed or fail,
they merely have outcomes
So long as we learn, we succeed
@poleydee
@fluxxstudios
www.fluxx.uk.com
“Fluxx Studio Notes”
on Medium