Your SlideShare is downloading. ×
  • Like
  • Save
The Right Way to Wireframe - CIDD Chicago, February 6, 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The Right Way to Wireframe - CIDD Chicago, February 6, 2013

  • 4,254 views
Published

 

Published in Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,254
On SlideShare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
9
Comments
5
Likes
30

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. THE RIGHT WAY TO WIREFRAME Image Source © Rusty Lopez ¦ http://rustylopez.typepad.com/imagoarticulus/2007/07/mckinley-county.htmlRuss Unger | @russu
  • 2. We don’t show OUR WORK
  • 3. DESIGNERS Do It
  • 4. DESIGNERS Do It
  • 5. DEVELOPERS Do It
  • 6. DEVELOPERS Do It
  • 7. WHAT ABOUT UX?
  • 8. We don’t show OUR WORK
  • 9. “My work is proprietary.” MINE, TOO.
  • 10. Have you ever seen A WIREFRAME FROM...
  • 11. Peter Morville
  • 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 management Jesse James Garretur expertise Information & technology Managing uncertainty Forecasting features editorially selected sub-categories from the current Global business Time management Knowledge managementment Skills” category in search results. 5 7 new approaches expand your knowledge build your expertise discover new approaches 6 features editorially selected sub-categories from the currentMethodologies” 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. “I’ve never done a wireframe*”* Jared Spool
  • 14. What is the best approach? WIREFRAMING OR PROTOTYPING
  • 15. “Now that I’m a consumer of wireframes, I want to see prototypes!” Christina Wodtke | @cwodtke
  • 16. “Now that I’m a consumer of wireframes, I want to see prototypes!” Christina Wodtke | @cwodtke “You can’t say that worksfor everyone just because it works for you now!” Me | @russu
  • 17. “Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”
  • 18. sigh.
  • 19. I <3 and...
  • 20. They are just Communication Tools.Arguing about wireframes vs. prototypes is MISSING THE POINT
  • 21. It was time to NUT UP OR SHUT UP
  • 22. 4 DESIGNERS
  • 23. Russ Will Fred Todd
  • 24. What is the best approach? WIREFRAMING OR PROTOTYPING
  • 25. Balsamiq HTML & Omnigraffle Axure RPMockups Fireworks Wireframes Prototypes
  • 26. Three RULES
  • 27. Three RULES - EVERYONE uses a different tool - EVERYTHING is documented - NO TALKING to each other
  • 28. The CASE STUDY
  • 29. “If we can give $5 to a strangerat a coffee shop, why can’t we do that for healthcare?” Tori Tuncan 98 Loans for a total of $76,289
  • 30. www. LEND4HEALTH.COM
  • 31. whew.
  • 32. Design the path for funding a loan. The OBJECTIVE
  • 33. 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
  • 34. whew.
  • 35. The APPROACH
  • 36. Gabby Hon@gabbyhon
  • 37. User & Company RESEARCH
  • 38. User PERSONAS
  • 39. This is how I DID IT
  • 40. Requirements ANALYSIS
  • 41. Persona CONSIDERATION
  • 42. Information ARCHITECTURE
  • 43. Information ARCHITECTURE
  • 44. 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)
  • 45. Pencil & Paper SKETCHINGLend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  • 46. Quantity over quality 15 SKETCHES / 3 SCREENS
  • 47. The Original PRESENTATION
  • 48. Balsamiq Mockups WIREFRAMINGLend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  • 49. Brad Simpson @simplybrad
  • 50. 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)
  • 51. Lend4Health.com LOAN DETAILS
  • 52. Pretty Cool.
  • 53. Here’s the ENTIRE PROCESS
  • 54. Four Designers LOTS OF OVERLAP
  • 55. Information ARCHITECTURE
  • 56. Information ARCHITECTURE
  • 57. Information ARCHITECTURE
  • 58. Pencil & Paper SKETCHING
  • 59. Pencil & Paper SKETCHING
  • 60. Pencil & Paper SKETCHING
  • 61. Pencil & Paper SKETCHING
  • 62. Visual DESIGN
  • 63. Visual DESIGN
  • 64. Visual DESIGN
  • 65. Visual DESIGN
  • 66. Online VIDEOShttp://is.gd/curls http://is.gd/curow http://is.gd/curw2 http://is.gd/curpN
  • 67. Changing Times & NEW CONSIDERATIONS
  • 68. Responsive DESIGN Ethan Marcotte @beep
  • 69. Responsive DESIGN Ethan Marcotte @beep
  • 70. Responsive DESIGN Ethan Marcotte @beep
  • 71. Biggest, Smallest, “Just Right” GOLDILOCKSMatthew Milan Source: Wireframes Magazine http://wireframes.linowski.ca/2011/09/responsive-layout-wireframe/ @mmilan
  • 72. Responsive Way TO WIREFRAME
  • 73. Responsive Way TO WIREFRAME
  • 74. Responsive Way TO WIREFRAME
  • 75. Mobile FIRST Image Source © Dustin Kirk ¦ http://www.dustinkirk.com/tag/luke-wroblewski/
  • 76. Localization & LANGUAGES
  • 77. What’s NEXT?
  • 78. So WHAT?
  • 79. The primary CHALLENGES - UNABLE to talk/collaborate - RESEARCH handed to us - NO FORMAL usability testing - DEVELOPER was unknown
  • 80. Core PRINCIPLES - SKETCHING (a lot) is THINKING (a lot) - CRITIQUE is extremely essential - BEST TOOL: the one you know Find Your Right Way Here!
  • 81. THANK YOU! Image Source © Rusty Lopez ¦ http://rustylopez.typepad.com/imagoarticulus/2007/07/mckinley-county.htmlRuss Unger | @russu