Building a prototypewithout writing a line ofcode.Maggie SteciukUX/UI DesignerTerrible Labs@msteciukmaggie@terriblelabs.com
Terrible Labs
Practically Green
StereoPill
Awesome.me
Ticket Fairy
Agenda•   Why prototype?•   Selecting the right approach•   Dive into specific methods    •   How to get started?    •   Wh...
Everything starts with an idea
Feasible UsableValuable
“The products startups    build are really    experiments”       ERIC RIES, THE LEAN STARTUP
THE LEAN STARTUP PROCESS
Prototyping
Why Prototype?•   Fail early (and cheaply)•   Communicate functionality•   Determine feasibility•   Better understand the ...
What am I trying to accomplish?      Intent    Who’s going to see it?  Audience
Intent
Functional Fidelity
Audience
Visual Fidelity
How done something looks  should correspond to how done something is.
VISUAL FIDELITY   Functional vs. Visual Fidelity                           FUNCTIONAL FIDELITY
SLOW & EXPENSIVE VISUAL FIDELITY    Functional vs. Visual FidelityCHEAP & FAST                 FUNCTIONAL FIDELITY   SLOW ...
SLOW & EXPENSIVE   Functional vs. Visual Fidelity                      Design Expertise                                   ...
SLOW & EXPENSIVE   Functional vs. Visual Fidelity                      Design Expertise                                   ...
SLOW & EXPENSIVE   Functional vs. Visual Fidelity                      Design Expertise                                   ...
Criteria for picking     The right approach• Intent & Audience• Cost & time• Familiarity & learnability• Collaboration• Di...
Sketches & Storyboards                              Wireframes    HTML              Paper  prototypes        prototypes   ...
Functional vs. Visual Fidelity                  High-fidelity           Interactive                    comps               ...
The Free Prototype
SketchingPen and paper, iPad/tablet,Dry erase board
Documenting an       Research toolideaCreating a shared    Validating UXcommunication        design directionThinking thro...
1.Mapping out user     flow
But where to begin?
User goals                   Business goals                                   Showcase their talents              Improve ...
Cores & Paths
Home Page
Home PageContent
Home Page ContentSearch       Other                       RSSEngines      Sites
Home Page ContentSearch       Other                       RSSEngines      Sites
ContentThis is the CORE
Flickr
Netflix
Rogue Amoeba
Inward Paths          Outward Paths               CORE
Home Page ContentSearch      Other                       RSSEngines     Sites
Inward Paths                         Outward PathsHome pageSearch engineSocial media (Twitter, etc)   COREOther sites
Flickr
Netflix
Rogue Amoeba
Inward Paths                         Outward PathsHome page                            Share or forward to a friendSearch ...
User goals                       Business goals                                     Showcase their talents              Co...
User goals              Business goalsInward Paths                                                                Outward ...
Benefits ofsketching
WireframesPen & Paper, Balsamiq, Axure,Keynote/Powerpoint
Selling an idea tostakeholdersTesting high-level conceptswith usersVisualizing userflow ordocumentingfunctionality
Maggie SteciukBOSTON, MA
Maggie SteciukMaggie      ContactBOSTON, MA             Send
Maggie SteciukMaggie      ContactBOSTON, MA    Hey, Maggie!    Just thought I’d let you know this presentation    is going...
Maggie SteciukBOSTON, MA             Your message has been sent.
logo   Ticket Fairy   Scan TicketWallet          Tickets
Align barcode within brackets          Scan                  X
Back    Ticket Fairy 823879389349 02/02/2013       3:15pm Chevrlolet OPP 98 DARTMOUTH ST METER FEE UNPAID - CD252$30.00  P...
Back    Ticket Fairy Visa ending in 2355 MasterCard ending in 3234  Add a Card
Back    Ticket FairyYou’re almost done! Violation number 32453456 issued on 2/2/2013 near Darmouth Stwill be paid using VI...
Back    Ticket Fairy          Success! Your payment was submitted. You will receive an email confirmation from the City of ...
Keynote• Powerful drawing tools• Master slides make it easy to reuse  UI elements• Hyperlinks add “clickability”• Works we...
User goals                   Business goals                                   Showcase their talents              Improve ...
Interactive Design CompsPhotoshop, Illustrator, InVision (and Keynote, too)
Communicating UI designDistributing design documentation          User testing
Benefits
Fully interactive prototypes
Proto.io
Proto.io
Prototyping New Features                      Photo credit: @hedcase at Deviantart.com
1.Plan the tasks you   need to test
2.Use realistic content
3.Test early, test often
4.Consider the limitations
5.One change at a time
6.Beware of Dead Ends
Takeaways•   Sketch a user flow•   Beginning with the core, sketch or create simple    wireframes of application screens•  ...
Resources•   Sketching:    •   Design pattern library (http://developer.yahoo.com)    •   Templates: http://interfacesketc...
Building a prototypewithout writing a line ofcode.Maggie SteciukUX/UI DesignerTerrible Labs@msteciukmaggie@terriblelabs.com
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Building a Prototype Without an Engineer
Upcoming SlideShare
Loading in...5
×

Building a Prototype Without an Engineer

2,286

Published on

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,286
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building a Prototype Without an Engineer

  1. 1. Building a prototypewithout writing a line ofcode.Maggie SteciukUX/UI DesignerTerrible Labs@msteciukmaggie@terriblelabs.com
  2. 2. Terrible Labs
  3. 3. Practically Green
  4. 4. StereoPill
  5. 5. Awesome.me
  6. 6. Ticket Fairy
  7. 7. Agenda• Why prototype?• Selecting the right approach• Dive into specific methods • How to get started? • Which tools to use?• Limits of prototyping• Q&A
  8. 8. Everything starts with an idea
  9. 9. Feasible UsableValuable
  10. 10. “The products startups build are really experiments” ERIC RIES, THE LEAN STARTUP
  11. 11. THE LEAN STARTUP PROCESS
  12. 12. Prototyping
  13. 13. Why Prototype?• Fail early (and cheaply)• Communicate functionality• Determine feasibility• Better understand the problem• Test usability• Resolve conflicts• Gather financial support
  14. 14. What am I trying to accomplish? Intent Who’s going to see it? Audience
  15. 15. Intent
  16. 16. Functional Fidelity
  17. 17. Audience
  18. 18. Visual Fidelity
  19. 19. How done something looks should correspond to how done something is.
  20. 20. VISUAL FIDELITY Functional vs. Visual Fidelity FUNCTIONAL FIDELITY
  21. 21. SLOW & EXPENSIVE VISUAL FIDELITY Functional vs. Visual FidelityCHEAP & FAST FUNCTIONAL FIDELITY SLOW & EXPENSIVE
  22. 22. SLOW & EXPENSIVE Functional vs. Visual Fidelity Design Expertise Technical Expertise VISUAL FIDELITYCHEAP & FAST FUNCTIONAL FIDELITY SLOW & EXPENSIVE
  23. 23. SLOW & EXPENSIVE Functional vs. Visual Fidelity Design Expertise Technical Expertise VISUAL FIDELITYCHEAP & FAST FUNCTIONAL FIDELITY SLOW & EXPENSIVE
  24. 24. SLOW & EXPENSIVE Functional vs. Visual Fidelity Design Expertise Technical Expertise VISUAL FIDELITYCHEAP & FAST FUNCTIONAL FIDELITY SLOW & EXPENSIVE
  25. 25. Criteria for picking The right approach• Intent & Audience• Cost & time• Familiarity & learnability• Collaboration• Distribution• Throwaway vs. reusable
  26. 26. Sketches & Storyboards Wireframes HTML Paper prototypes prototypes Interactive Interactive wireframes design compsHigh-fidelity Production-ready comps prototypes
  27. 27. Functional vs. Visual Fidelity High-fidelity Interactive comps design Fully comps interactive, highVISUAL FIDELITY fidelity prototypes Wireframes Interactive wireframes Sketches FUNCTIONAL FIDELITY
  28. 28. The Free Prototype
  29. 29. SketchingPen and paper, iPad/tablet,Dry erase board
  30. 30. Documenting an Research toolideaCreating a shared Validating UXcommunication design directionThinking through a Mapping out userdesign flow
  31. 31. 1.Mapping out user flow
  32. 32. But where to begin?
  33. 33. User goals Business goals Showcase their talents Improve engagement Create a beautiful profile Increase conversion Inward Paths Outward PathsExternal search Register to join the site Core content / functionalityInternal search Contact userNavigation Engage with contentLinked in email signatureShared via social net work User profile See similar people ShareLink from website Add content Trigger words Core elements Calls to Action My name Avatar, name, loc, interests “Awesome” Showcase Audio, written posts Sign up, Log in Talents, interests Photos, videos
  34. 34. Cores & Paths
  35. 35. Home Page
  36. 36. Home PageContent
  37. 37. Home Page ContentSearch Other RSSEngines Sites
  38. 38. Home Page ContentSearch Other RSSEngines Sites
  39. 39. ContentThis is the CORE
  40. 40. Flickr
  41. 41. Netflix
  42. 42. Rogue Amoeba
  43. 43. Inward Paths Outward Paths CORE
  44. 44. Home Page ContentSearch Other RSSEngines Sites
  45. 45. Inward Paths Outward PathsHome pageSearch engineSocial media (Twitter, etc) COREOther sites
  46. 46. Flickr
  47. 47. Netflix
  48. 48. Rogue Amoeba
  49. 49. Inward Paths Outward PathsHome page Share or forward to a friendSearch engine Favorite / Like / etc...Social media (Twitter, etc) CORE DownloadOther sites Buy
  50. 50. User goals Business goals Showcase their talents Connect users Become a destination for great Create a beautiful profile content Inward Paths Outward PathsExternal search Register to join the site Core content / functionalityInternal search Add contentNavigation “Like” contentLinked in email signature User profile See similar peopleShared via social net work ShareLink from website Contact a user Trigger words Core elements Calls to Action “Maggie Steciuk” Avatar, name, loc, interests “Awesome” “showcase talents” Audio, written posts Sign up, Log in “eportfolio” Photos, videos
  51. 51. User goals Business goalsInward Paths Outward Paths Core content / functionality Trigger words Core elements Calls to Action
  52. 52. Benefits ofsketching
  53. 53. WireframesPen & Paper, Balsamiq, Axure,Keynote/Powerpoint
  54. 54. Selling an idea tostakeholdersTesting high-level conceptswith usersVisualizing userflow ordocumentingfunctionality
  55. 55. Maggie SteciukBOSTON, MA
  56. 56. Maggie SteciukMaggie ContactBOSTON, MA Send
  57. 57. Maggie SteciukMaggie ContactBOSTON, MA Hey, Maggie! Just thought I’d let you know this presentation is going exceptionally well. Hardly anybody in the front of the room fell asleep. Send
  58. 58. Maggie SteciukBOSTON, MA Your message has been sent.
  59. 59. logo Ticket Fairy Scan TicketWallet Tickets
  60. 60. Align barcode within brackets Scan X
  61. 61. Back Ticket Fairy 823879389349 02/02/2013 3:15pm Chevrlolet OPP 98 DARTMOUTH ST METER FEE UNPAID - CD252$30.00 Pay ticket Remind me
  62. 62. Back Ticket Fairy Visa ending in 2355 MasterCard ending in 3234 Add a Card
  63. 63. Back Ticket FairyYou’re almost done! Violation number 32453456 issued on 2/2/2013 near Darmouth Stwill be paid using VISA ending in 2145 $30.00 Submit Payment
  64. 64. Back Ticket Fairy Success! Your payment was submitted. You will receive an email confirmation from the City of Boston. Scan Another Ticket
  65. 65. Keynote• Powerful drawing tools• Master slides make it easy to reuse UI elements• Hyperlinks add “clickability”• Works well with Adobe CS
  66. 66. User goals Business goals Showcase their talents Improve engagement Create a beautiful profile Increase conversion Inward Paths Outward PathsExternal search Register to join the site Core content / functionalityInternal search Contact userNavigation Engage with contentLinked in email signatureShared via social net work User profile See similar people ShareLink from website Add content Trigger words Core elements Calls to Action My name Avatar, name, loc, interests “Awesome” Showcase Audio, written posts Sign up, Log in Talents, interests Photos, videos
  67. 67. Interactive Design CompsPhotoshop, Illustrator, InVision (and Keynote, too)
  68. 68. Communicating UI designDistributing design documentation User testing
  69. 69. Benefits
  70. 70. Fully interactive prototypes
  71. 71. Proto.io
  72. 72. Proto.io
  73. 73. Prototyping New Features Photo credit: @hedcase at Deviantart.com
  74. 74. 1.Plan the tasks you need to test
  75. 75. 2.Use realistic content
  76. 76. 3.Test early, test often
  77. 77. 4.Consider the limitations
  78. 78. 5.One change at a time
  79. 79. 6.Beware of Dead Ends
  80. 80. Takeaways• Sketch a user flow• Beginning with the core, sketch or create simple wireframes of application screens• Add interactivity and visual polish as needed• Consider audience & intent when selecting the right approach, but make it minimally real.• Prototype early and often (no need to code)• Have a nice app!*
  81. 81. Resources• Sketching: • Design pattern library (http://developer.yahoo.com) • Templates: http://interfacesketch.tumblr.com/ • POP for iPhone: http://popapp.in/• Wireframing: • SketchFlow (http://microsoft.com/expression) • Axure (http://www.axure.com) • Balsamiq (http://www.balsamiq.com) • Keynote Kung Fu (http://keynotekungfu.com/) • Keynotopia (http://www.keynotopia.com/themes)• High-fidelity prototypes: • InVision: (http://www.invisionapp.com) • http://Proto.io
  82. 82. Building a prototypewithout writing a line ofcode.Maggie SteciukUX/UI DesignerTerrible Labs@msteciukmaggie@terriblelabs.com

×