FRONTEND 2011 - The Right Way To Wireframe

2,567 views
2,480 views

Published on

Published in: Design, Business, Education
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,567
On SlideShare
0
From Embeds
0
Number of Embeds
586
Actions
Shares
0
Downloads
0
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

FRONTEND 2011 - The Right Way To Wireframe

  1. 1. THE RIGHT WAY TO WIREFRAMEFRONTEND 2011 | #rwtwRuss Unger | @russu Image Source © Time Inc.
  2. 2. We don’t show OUR WORK
  3. 3. DESIGNERS Do It
  4. 4. DESIGNERS Do It
  5. 5. DEVELOPERS Do It
  6. 6. DEVELOPERS Do It
  7. 7. WHAT ABOUT UX?
  8. 8. We don’t show OUR WORK
  9. 9. “My work is proprietary.” MINE, TOO.
  10. 10. Have you ever seen A WIREFRAME FROM...
  11. 11. Peter Morville
  12. 12. al Navigation Default state store009 Version 1.0 logo search 2 Jesse James Garrett 1 cartn HBR today on current account blogs books authors HBS downloads page highlights timely content from the blogs, magazine, hbr magazine 3 s sections. explore hbr 4ea expand your knowledge build your expertise discover new approaches provides a focal point for all e-commerce related links. page allows users to find aggregated links to content from Partially expanded state uthors across blogs, magazine, and books sections.drawer store logo searchandable area encourages and facilitates exploration of cart y subject. today on current account blogs books authors HBS downloadsyour knowledge hbr magazine features editorially selected sub-categories from the current Strategy Decision making explore hbr Business processes ategory in search results. Leadership Interpersonal skills Management by objectives Organizational change Project management Quality managementur expertise Information & technology Managing uncertainty Forecasting features editorially selected sub-categories from the currentment Skills” category in search results. new approaches features editorially selected sub-categories from the current 5 Global business expand your knowledge Jesse James Garret Time management build your expertise 6 Knowledge management discover new approaches 7Methodologies” category in search results. nks Fully expanded state ks drive users interested in exploring further to dedicated store ages. logo search cart today on current account blogs books authors HBS downloads hbr magazine explore hbr more topics » more skills » more methods » 8 Strategy Decision making Business processes Leadership Interpersonal skills Management by objectives Organizational change Project management Quality management Information & technology Managing uncertainty Forecasting Global business Time management Knowledge management expand your knowledge build your expertise discover new approaches sign | Harvard Business Review
  13. 13. “I’ve never done a wireframe*”* Jared Spool
  14. 14. What is the best tool? WIREFRAMING OR PROTOTYPING
  15. 15. “Now that I’m a consumer of wireframes, I want to see prototypes!” Christina Wodtke | @cwodtke “You can’t saythat works for everyone just because it works for you now!” Me | @russu
  16. 16. “Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”
  17. 17. sigh.
  18. 18. I <3 and...
  19. 19. They are just Communication Tools.Arguing about wireframes vs. prototypes is MISSING THE POINT
  20. 20. It was time to NUT UP OR SHUT UP
  21. 21. 4 DESIGNERS
  22. 22. Russ Will Fred Todd
  23. 23. What is the best tool? WIREFRAMING OR PROTOTYPING
  24. 24. Balsamiq HTML & Omnigraffle Axure RPMockups Fireworks Wireframes Prototypes
  25. 25. Three RULES
  26. 26. Three RULES - EVERYONE uses a different tool - EVERYTHING is documented - NO ONE talks to each other
  27. 27. The CASE STUDY
  28. 28. “If we can give $5 to a stranger at a coffee shop, why can’t we do that for healthcare?” Tori Tuncan 98 Loans for a total of $72,848
  29. 29. www. LEND4HEALTH.COM
  30. 30. whew.
  31. 31. Design the path for funding a loan. The OBJECTIVE
  32. 32. How it’s done TODAY - user reviews profiles/needs in the blog format - user determines amount they can loan - user contacts lend4health - lend4health connects user and loan recipient - lend4health supplies loan agreement - user funds loan via paypal - lender repays funds via paypal per agreement - lender supplies updates to child’s progress to lend4health and lender lend4health updates progress on website - continues until loan is paid back
  33. 33. whew.
  34. 34. The APPROACH
  35. 35. Gabby Hon@gabbyhon
  36. 36. User & Company RESEARCH
  37. 37. User PERSONAS
  38. 38. Task Analysis GRID
  39. 39. Inspiration LIBRARY
  40. 40. This is how I DID IT
  41. 41. Requirements ANALYSIS
  42. 42. Persona CONSIDERATION
  43. 43. Information ARCHITECTURE
  44. 44. Information ARCHITECTURE
  45. 45. Angela: Loan Funder USER JOURNEY Angela Reviews Angela arrives at Angela Searches for a Details of Loan Lend4Health.com Loan to Fund com/photos/ Requesthttp://www.flickr. 06/2912606267/ (0.0.0.0) (1.0.0.0)11762156@N (1.1.0.0)
  46. 46. Pencil & Paper SKETCHINGLend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  47. 47. Quantity over quality 15 SKETCHES / 3 SCREENS
  48. 48. The Original PRESENTATION
  49. 49. Balsamiq Mockups WIREFRAMINGLend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  50. 50. Brad Simpson@simplybrad
  51. 51. Brad Simpson VISUAL DESIGNLend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  52. 52. Lend4Health.com LOAN PAGE SEARCH LOANS HOMEDETAILS
  53. 53. Pretty Cool.
  54. 54. Here’s the ENTIRE PROCESS
  55. 55. Four Designers LOTS OF OVERLAP
  56. 56. Information ARCHITECTURE
  57. 57. Information ARCHITECTURE
  58. 58. Information ARCHITECTURE
  59. 59. Pencil & Paper SKETCHING
  60. 60. Pencil & Paper SKETCHING
  61. 61. Pencil & Paper SKETCHING
  62. 62. Pencil & Paper SKETCHING
  63. 63. Visual DESIGN
  64. 64. Visual DESIGN
  65. 65. Visual DESIGN
  66. 66. Visual DESIGN
  67. 67. Online VIDEOShttp://is.gd/curls http://is.gd/curow http://is.gd/curw2 http://is.gd/curpN
  68. 68. Changing Times & NEW CONSIDERATIONS
  69. 69. Responsive DESIGN
  70. 70. Responsive DESIGN
  71. 71. Responsive DESIGN
  72. 72. Biggest, Smallest, “Just Right” GOLDILOCKSMatthew Milan Source: Wireframes Magazine http://wireframes.linowski.ca/2011/09/responsive-layout-wireframe/ @mmilan
  73. 73. Localization & LANGUAGES
  74. 74. SoWHAT?
  75. 75. The primary CHALLENGES - UNABLE to talk/collaborate - RESEARCH handed to us - NO FORMAL usability testing - DEVELOPER was unknown
  76. 76. Core PRINCIPLES - SKETCHING (a lot) is THINKING (a lot) - CRITIQUE is extremely essential - BEST TOOL: the one you know Find Your Right Way Here!
  77. 77. THANK YOU! FRONTEND 2011 | #rwtwRuss Unger | @russu Image Source © Time Inc.

×