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
Prototyping
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
Prototyping
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

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

Recently uploaded (20)

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

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