Rapid Prototyping: Rough to Ready

460aa51706c4ad81c8d63ad7c27cdbbd?s=47 Erica Heinz
October 23, 2012

Rapid Prototyping: Rough to Ready

Lean UX is a new standard for web designers. How can you keep up and ahead? Learn the best processes and most helpful tools for rapid prototyping, whether you're in-house, freelance, or running a startup. See examples of paper, vector, bitmap, and html prototypes and learn when each is appropriate. Understand how they fit into an agile development process or a typical waterfall flow. We'll talk about mobile-first strategies, and responsive frameworks, and how they help prototypes. And we'll unpack the team dynamics and collaborative tools that make all this user research and discussion productive. You'll leave with a full list of resources and tips to start rapid prototyping and make your projects better, faster.

Presented at the Future of Web Design conference at New World Stages in New York City, October 23rd 2012.

Full list of resources at http://bit.ly/rapid-prototyping

460aa51706c4ad81c8d63ad7c27cdbbd?s=128

Erica Heinz

October 23, 2012
Tweet

Transcript

  1. 2.

    “ RALPH WALDO EMERSON Don't be too timid or squeamish

    about your actions. All life is an experiment. The more experiments you make, the better.”
  2. 14.

    “ The problems that plague organizations, or hold them back

    from greatness, are often small things that happen to be consistently overlooked.” SCOTT BERKUN, “DOES SIZE MATTER FOR IDEAS?”, HBR, VIA FRANCISCO INCHAUSTE, DISTANCE 02
  3. 15.

    ART PROJECTS DESIGN PROJECTS BRAIN, DESIGNED BY SAMUEL DION-GIRARDEAU, FROM

    THE NOUN PROJECT GLOBE, DESIGNED BY PROLETKULT GRAPHIK, FROM THE NOUN PROJECT
  4. 16.

    “We should embrace the subjective nature of what we do

    and allow for the multiplicity of responses to thrive, because the mixed pool represents the diversity of human perspective. That diversity fortifies us, makes us strong.” FRANK CHIMERO, THE SHAPE OF DESIGN
  5. 18.

    ➡ PROBLEM INTERVIEWS ★ WHAT DOES OUR COMMUNITY NEED? QUALITATIVE

    ➡ CONCEPT TESTING ★ HOW IS OUR DESIGN PERCEIVED? ➡ USABILITY TESTING ★ HOW ARE THESE FEATURES WORKING? ➡ SOLUTION INTERVIEWS ★ ARE WE SATISFYING CUSTOMERS’ NEEDS?
  6. 19.

    ➡ USER SURVEYS ★ WHAT ARE OUR USERS’ PRIORITIES? QUANTITATIVE

    ➡ ANALYTICS TRACKING ★ WHAT ARE THEY ACTUALLY DOING? ➡ A/B TESTING ★ WHICH LAYOUT IS “BETTER”? ➡ “AARRR” METRICS ★ IS OUR PROJECT SUSTAINABLE?
  7. 23.
  8. 24.

    “Design is a path-dependent process… Our early design decisions are

    like bets whose outcome we will have to live with iteration after iteration.” RYAN SINGER, OF 37SIGNALS, ON QUORA.COM
  9. 26.
  10. 27.
  11. 28.
  12. 29.

    “ Whatever time we spend on prototyping, we typically save

    [clients] three to four fold on the backend.” TODD ZAKI WARFEL, AUTHOR OF “PROTOTYPING: A PRACTITIONER’S GUIDE”, SPEAKING AT BIG SPACESHIP
  13. 31.
  14. 32.
  15. 41.

    PAPER PROTOTYPES answer: what goes on the page good for:

    teams, open thinking requires: co-location, chutzpah
  16. 43.
  17. 44.
  18. 45.
  19. 46.
  20. 48.
  21. 50.
  22. 51.
  23. 52.

    VECTOR PROTOTYPES answer: how flows fit together good for: teams,

    some clients, text-heavy layouts require: layout skills and programs
  24. 53.
  25. 54.

    HOME (GUEST) value props press marketing promo LOG IN HOME

    (USER) featured items marketing promo followed items SIGN UP FOLLOWING grid/list of items price changes coupons? MARKETING LANDING contest etc ABOUT US CATEGORY PG CATEGORY PG CATEGORY PG best sellers CATEGORY PG CATEGORY PG SUBCATEGORY best sellers CATEGORY PG CATEGORY PG PRODUCT robot verdict price history news feed related items SHOPOBOT.COM REQUIRES LOGIN TRADING POST items friends have items i want items friends want items i have follow USER'S GOOGLE READER subscribe USER'S FACEBOOK WALL USER'S TWITTER FEED ASSETS my stuff current value future value friends wants INTERESTS grid of categories SETTINGS password email prefs SEARCH SEARCH RESULTS OTHER EXPOSURES HEADER LINKS available from any page CATEGORY PG CATEGORY PG PRODUCT V2 robot verdict price history news feed related items item options future value share on FB? tweet? Add to wish list CATEGORY PG CATEGORY PG BLOG contests data analysis
  26. 55.

    List Title List blurb LIST TITLE Mark the ones you've

    read! Done FACEBOOK AD BOOKVILLE LIST DONE POST TO YOUR WALL [Say something about this…] List Title List caption List description Share Cancel FACEBOOK SHARE SHARE CLICK Gain: X books Gain: 1 post List Title List blurb LIST TITLE Mark the ones you've read! Done FACEBOOK AD BOOKVILLE LIST DONE POST TO YOUR WALL [Say something about this…] List Title List caption List description Share Cancel FACEBOOK SHARE CANCEL CLICK Gain: X books LIST TITLE — CONFIRMED! Thanks for sharing. Become a Bookville user to save these books, see your friends' favorite books, and meet other people who read the same books as you. Bookville makes finding your next book a pleasure. Ok, sign me up! BOOKVILLE LIST COMPLETED + SHARED BOOKVILLE WOULD LIKE PERMISSION TO: Access the following required information: • Your likes • Friends' likes Access my custom friend lists Allow Cancel FACEBOOK AUTH YOUR NAME Your books Your friends' books Invite more friends! BOOKVILLE PROFILE OK ALLOW 2. Ad clicker, checklist completer, non sharer 4. Ad clicker, checklist completer, score sharer LIST TITLE — DONE Become a Bookville user to save these books, see your friends' favorite books, and meet other people who read the same books as you. Bookville makes finding your next book a pleasure. Ok, sign me up! BOOKVILLE LIST COMPLETED BOOKVILLE WOULD LIKE PERMISSION TO: Access the following required information: • Your likes • Friends' likes Access my custom friend lists Allow Cancel FACEBOOK AUTH YOUR NAME Your books Your friends' books Invite more friends! BOOKVILLE PROFILE OK ALLOW Gain: 1 user Gain: 1 user INVITE FRIENDS INVITE Gain: Y invites SEND INVITE FRIENDS INVITE Gain: Y invites SEND 3. Wall post clicker, checklist completer, score sharer Friend's Comment List Title List blurb FB WALL POST LIST TITLE Mark the ones you've read! Done Your friends who have done this: BOOKVILLE LIST FRIENDLY Gain: X books DONE POST TO YOUR WALL [Say something about this…] List Title List caption List description Share Cancel FACEBOOK SHARE SHARE Gain: 1 post LIST TITLE — CONFIRMED! Thanks for sharing. Become a Bookville user to save these books, see your friends' favorite books, and meet other people who read the same books as you. Bookville makes finding your next book a pleasure. Ok, sign me up! BOOKVILLE LIST COMPLETED + SHARED
  27. 56.
  28. 57.
  29. 58.
  30. 59.
  31. 61.
  32. 62.

    BITMAP PROTOTYPES answer: how things feel good for: investors, clients,

    testers, designers require: design skills and programs
  33. 63.
  34. 64.
  35. 65.
  36. 66.
  37. 67.
  38. 68.
  39. 69.
  40. 70.
  41. 72.
  42. 73.

    HTML PROTOTYPES answer: how things work good for: team, testers,

    some clients, programmers require: front-end coding, maybe back-end
  43. 74.
  44. 78.
  45. 79.
  46. 81.
  47. 83.
  48. 84.
  49. 85.
  50. 86.
  51. 88.
  52. 89.
  53. 91.
  54. 92.
  55. 94.
  56. 95.

    BE PRACTICAL ★ WHAT ARE YOUR SKILLS? ★ WHO’S THE

    AUDIENCE? ★ WHAT’S THE NICHE? ★ WHAT’S THE BUDGET?
  57. 96.
  58. 101.

    discovery ↓ direction ↓ design ↓ development ➡ research ➡

    concepts ➡ IA, UX, UI ➡ code ➡ $ ➡ $ ➡ $ ➡ $
  59. 103.
  60. 106.
  61. 107.

    think ↓ make ↓ check ➡ hypothesis ➡ prototype ➡

    validation each two-week sprint ➡ $
  62. 109.
  63. 110.
  64. 112.

    SPIKE-DRIVEN DESIGN branch github ➡ hack code ➡ screenshot to

    sketch ➡ cherry-pick commits http://pivotallabs.com/users/jonathanpberger/blog/articles/2349-spike-driven-design
  65. 116.

    M review research SAMPLE SCHEDULE T brainstorm W prioritize tasks

    T sketch prototype F review sketch M code prototype T review code W polish design T QA & launch F user testing flex week
  66. 117.

    ACTUALLY LOOKS MORE LIKE Review RESEARCH DESIGN DEV Check-in RESEARCH

    DESIGN DEV Check-in RESEARCH DESIGN DEV Review
  67. 118.
  68. 119.

    M review research SAMPLE SCHEDULE T brainstorm W prioritize tasks

    T sketch prototype F review sketch M code prototype T review code W polish design T QA & launch F user testing flex week
  69. 120.
  70. 122.

    “Checking too often with someone else —pausing for feedback with

    each bit of output—can inhibit or confuse us.” SUSAN CAIN “DOES ARTISTIC COLLABORATION EVER WORK?” THEATLANTIC.COM
  71. 124.
  72. 126.
  73. 128.