SlideShare a Scribd company logo
1 of 45
Download to read offline
Prototyping
Without skills, time or money




@Sjors
Sjors Timmer
UX designer at SapientNitro
Organiser/founder of UXDO
Worked for startups such as Webjam and Zomoto

Started shirtlog.com (and sold it)
Started monbag.com (and waiting for ‘time’)
Why prototype?
Prototyping is the way to find what
doesn't work early and cheap, and spend
your time and money on solutions that do
work
success




Building without prototyping
success




Building with prototyping
success




Building with prototyping
“They'll take ten, and give themselves
room to design without restriction. Later
they whittle that number to three, spend
more months on those three and then
finally end up with one strong decision.”



Helen Walters on Apple’s design process

Helen Walters, Apple’s design process http://www.businessweek.com/the_thread/techbeat/archives/2008/03/
apples_design_p.html
Prototype
HTML 5 Logo sketches
MRVDV 676 buildings
Sketch
“My drawings have been described as
pre-intentionalist, meaning that they
were finished before the ideas for them
had occurred to me. I shall not argue the
point.”



James Thurber

Sketching the User Experience - Bill Buxton
“Quantity has a quality all its own”


Joseph Stalin

Wikipedia :)
Create five sketches, or else:
- We’re wasting our time
- We’re staying in the common response zone
- We’re not saturating the design space

The sketches must be unique, or else:
- You’re iterating the same basic idea
- You risk getting committed to one idea
- You’re still in the common response zone




Design studio: Idea Creation: http://www.slideshare.net/bunky34/design-studios-idea-creation
Adapted from: Jerome Ryckborst’s Five Sketches or Else Method (UPA 2008)
Detail is not important, your trying to
establish hierarchy
Design Studios: Idea Creation
Brian Sullivan
http://www.slideshare.net/bunky34/design-studios-idea-creation




The Back of a Napkin
Dan Roam
http://www.amazon.co.uk/Back-Napkin-Solving-Problems-
Pictures/dp/0462099474/
Paper prototyping
Sketching allows you to explore the
composition in space, paper prototyping
allows you to explore your idea in time
What do you need?
Paper,
Pens,
A bit of glue,
Some post-its,
Print-outs of UI-elements (+ scissors)
What do you need?
Paper,
Pens,
A bit of glue,
Some post-its,
Print-outs of UI-elements (+ scissors)
Other people
Start simple
Start testing
After a few tests you’ll recognise
common mistakes that you can
fix
Detail is not important, your trying to
establish flow
Paper Prototyping
Shawn Medero
http://www.alistapart.com/articles/paperprototyping/




Looking Back on 16 Years of
Paper Prototyping
Jared M. Spool
http://www.uie.com/articles/
looking_back_on_paper_prototyping/
Digital (lo-fi)
prototyping
Turn your sketches into digital
prototypes at connectasketch.com
Fancy wireframing yourself, try
gomockingbird.com
Test your prototype directly with users at
usertesting.com
Testing with 5 users finds 80% of the
usability problems – Jakob Nielsen
Why You Only Need to Test with 5 Users - Jakob Nielsen http://www.useit.com/alertbox/20000319.html
Cheaper, skip video use your friends and
try usabilla.com
Digital (Hi -fi)
prototyping
Now you’ve tested your layout,
interaction and flow, you can do one last
round of Hi-fi digital mock-up testing
Allows you to chunk up your design and
get it done for a fiver at fiverr.com
Or for only $490 more, turn your
wireframes/sketches into designed pages
99designs.com
Have your designed pages turned into
templates for Wordpress, Drupal, Joomla
etc. psd2html.com
Test your new prototype again with
UserTesting.com, usabilla and all your
friends
Start using data to understand your users
clicktale.com
Ask questions specific to certain pages
kissinsights.com
Metric driven design
Joshua Porter
http://www.slideshare.net/bokardo/metricsdriven-
design-4317168




15 startup tools to help you
designing your startup
Sjors Timmer (shameless plug :)
http://www.slideshare.net/sjors/15-startup-tools-to-help-you-
designing-your-startup
By now you should have a pretty well
worked out version of your hypotheses

Now it’s time to convince some designer/
technical co-founders and start working
on itteration 1
Thanks!
@Sjors
notura.com

More Related Content

More from Sjors Timmer

Space as a material for interaction design
Space as a material for interaction designSpace as a material for interaction design
Space as a material for interaction designSjors Timmer
 
A room for understanding
A room for understandingA room for understanding
A room for understandingSjors Timmer
 
The Foundations of Spatial Computing
The Foundations of Spatial ComputingThe Foundations of Spatial Computing
The Foundations of Spatial ComputingSjors Timmer
 
A room for understanding
A room for understandingA room for understanding
A room for understandingSjors Timmer
 
Design better forms
Design better formsDesign better forms
Design better formsSjors Timmer
 
Design better forms – UXBristol
Design better forms  – UXBristolDesign better forms  – UXBristol
Design better forms – UXBristolSjors Timmer
 
Design better forms – Mobile UX London
Design better forms – Mobile UX LondonDesign better forms – Mobile UX London
Design better forms – Mobile UX LondonSjors Timmer
 
The pace of change
The pace of changeThe pace of change
The pace of changeSjors Timmer
 
Using Time to Your Advantage
Using Time to Your AdvantageUsing Time to Your Advantage
Using Time to Your AdvantageSjors Timmer
 
How Tom Cruise Ruined Interaction Design
How Tom Cruise Ruined Interaction DesignHow Tom Cruise Ruined Interaction Design
How Tom Cruise Ruined Interaction DesignSjors Timmer
 
Exploring eternal questions through interaction design
Exploring eternal questions through interaction designExploring eternal questions through interaction design
Exploring eternal questions through interaction designSjors Timmer
 
Rem Koolhaas –designing the design process
Rem Koolhaas –designing the design processRem Koolhaas –designing the design process
Rem Koolhaas –designing the design processSjors Timmer
 
Design and complexity
Design and complexityDesign and complexity
Design and complexitySjors Timmer
 
15 startup tools to help you designing your startup
15 startup tools to help you designing your startup15 startup tools to help you designing your startup
15 startup tools to help you designing your startupSjors Timmer
 
Social Networks Sjors Timmer
Social Networks Sjors TimmerSocial Networks Sjors Timmer
Social Networks Sjors TimmerSjors Timmer
 
Design For Learning
Design For LearningDesign For Learning
Design For LearningSjors Timmer
 

More from Sjors Timmer (17)

Space as a material for interaction design
Space as a material for interaction designSpace as a material for interaction design
Space as a material for interaction design
 
A room for understanding
A room for understandingA room for understanding
A room for understanding
 
The Foundations of Spatial Computing
The Foundations of Spatial ComputingThe Foundations of Spatial Computing
The Foundations of Spatial Computing
 
A room for understanding
A room for understandingA room for understanding
A room for understanding
 
Design better forms
Design better formsDesign better forms
Design better forms
 
Design better forms – UXBristol
Design better forms  – UXBristolDesign better forms  – UXBristol
Design better forms – UXBristol
 
Design better forms – Mobile UX London
Design better forms – Mobile UX LondonDesign better forms – Mobile UX London
Design better forms – Mobile UX London
 
The pace of change
The pace of changeThe pace of change
The pace of change
 
Using Time to Your Advantage
Using Time to Your AdvantageUsing Time to Your Advantage
Using Time to Your Advantage
 
How Tom Cruise Ruined Interaction Design
How Tom Cruise Ruined Interaction DesignHow Tom Cruise Ruined Interaction Design
How Tom Cruise Ruined Interaction Design
 
Exploring eternal questions through interaction design
Exploring eternal questions through interaction designExploring eternal questions through interaction design
Exploring eternal questions through interaction design
 
Rem Koolhaas –designing the design process
Rem Koolhaas –designing the design processRem Koolhaas –designing the design process
Rem Koolhaas –designing the design process
 
Design and complexity
Design and complexityDesign and complexity
Design and complexity
 
Future framing
Future framingFuture framing
Future framing
 
15 startup tools to help you designing your startup
15 startup tools to help you designing your startup15 startup tools to help you designing your startup
15 startup tools to help you designing your startup
 
Social Networks Sjors Timmer
Social Networks Sjors TimmerSocial Networks Sjors Timmer
Social Networks Sjors Timmer
 
Design For Learning
Design For LearningDesign For Learning
Design For Learning
 

Recently uploaded

Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
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
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesVellyslav Petrov
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy ysrajece
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 

Recently uploaded (20)

Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
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 ...
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern Homes
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy y
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 

Prototyping

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. make a less drastic step, quality through quantity\n
  17. \n
  18. \n
  19. \n
  20. \n
  21. interactions following each other\n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n