Opening the Kimono:
A look behind the design process




                                     Russ Unger | @russu

Iowa UP...
we don’t show our work.
we don’t show our work



                         designers do it
we don’t show our work




                         developers do it
we don’t show our work




                         but...
we don’t show our work




                         have you ever seen a
                             wireframe from:

   ...
we don’t show our work




                                                                                               ...
we don’t show our work




                         Peter Morville?
we don’t show our work




                         Jared Spool?
we don’t show our work




    “our work is proprietary.”
we don’t show our work




  it’s time to ask your boss
 to let you show your work.
wireframing
was the obvious choice.
wireframing was the obvious choice




                                         Visio
      HTML
                         ...
wireframing was the obvious choice




                                          “Now that I’m a consumer of
             ...
wireframing was the obvious choice




                   “Can, too!”
                                     “Cannot!”

    ...
wireframing was the obvious choice




                                     sigh.
wireframing was the obvious choice




        I <3                         and...
wireframing was the obvious choice




 it’s time to end the debate
 of
 wireframes vs. prototypes.
wireframing was the obvious choice




 if you’re still arguing
 about wireframes and
 prototypes, you are
 missing the po...
wireframing was the obvious choice




 they’re just
 communication tools.
nut up
or
shut up.
nut up or shut up




                    four designers
nut up or shut up




                    two wireframers
nut up or shut up




                    two prototypers!
nut up or shut up




 1 problem.
nut up or shut up




 2 rules.
nut up or shut up




 each designer uses
 a different tool.
nut up or shut up




                    balsamiq     omnigraffle




                    axure rp   fireworks/html
nut up or shut up




 no talking.
nut up or shut up




                       oh...

                    document

                    everything.
s
i
d
e
b
a
r
sidebar




          we could have designed
                        anything.
sidebar




          a college website
                    without
          girls under trees.
sidebar




            a website selling
          affordance faucets.
sidebar




                     the project
     had to be for a non-profit
            and had to be real.
the case study
the case study




                   Tori
                 Tuncan
       @lend4health
www.lend4health.com




“     If we...
the case study
the case study
the case study




                 whew.
the case study




                 connecting people is a
                      manual process.
the case study




                      not
                 scalable.
the case study




      Never doubt that a small
            group of thoughtful,
       committed, citizens can
     cha...
requirements &
research
research & requirements




                             Gabby Hon
                                      @gabbyhon
       ...
research & requirements
research & requirements
research & requirements




 objective:

 design the path for
 funding a loan.
research & requirements




  how it’s done today:
  • user reviews profiles/needs in the blog format
  • user determines a...
research & requirements




  whew.
research & requirements




    a very manual process.
research & requirements




    not scalable.
this is how i do it
this is how i do it




                                         requirements




       Requirements Courtesy of:
       ...
this is how i do it




                      personas
this is how i do it




       information architecture
this is how i do it




       information architecture
this is how i do it




       information architecture
this is how i do it




                                            user journey
        Meet Angela
         The Loan Fun...
this is how i do it




                              sketching
            Lend4Health.com
                              ...
this is how i do it




                              sketching
            Lend4Health.com
                              ...
this is how i do it




                              sketching
            Lend4Health.com
                              ...
this is how i do it




                      sketching
this is how i do it




                       sketching




              i even sketched this presentation.
this is how i do it




                      wireframing




                      50% off code:
                      fr...
this is how i do it




                               wireframing
             Lend4Health.com
                          ...
this is how i do it




                      visual design
                                   Brad
                      ...
this is how i do it




                              visual design
            Lend4Health.com
                          ...
this is how i do it




                      kinda cool.
this is how i do it




                      the entire process
the overlap
                            russ unger



      information architecture
the overlap
                           fred beecher



      information architecture
the overlap
                            will evans



      information architecture
the overlap
                          russ unger



              sketching
the overlap
                          todd zaki warfel



              sketching
the overlap
                          fred beecher



              sketching
the overlap
                          will evans



              sketching
the overlap
                              russ unger



              visual design
the overlap
                              todd zaki warfel



              visual design
the overlap
                              fred beecher



              visual design
the overlap
                              will evans



              visual design
the overlap




                        the videos


              http://is.gd/curls   http://is.gd/curow




           ...
Russ Unger | @russu
ideaconference.org   User Experience Director
                                  Happy Cog
Behind the Kimono - Iowa UPA
Upcoming SlideShare
Loading in...5
×

Behind the Kimono - Iowa UPA

1,810

Published on

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

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

No notes for slide

Behind the Kimono - Iowa UPA

  1. 1. Opening the Kimono: A look behind the design process Russ Unger | @russu Iowa UPA User Experience Director Happy Cog
  2. 2. we don’t show our work.
  3. 3. we don’t show our work designers do it
  4. 4. we don’t show our work developers do it
  5. 5. we don’t show our work but...
  6. 6. we don’t show our work have you ever seen a wireframe from: JJG? Peter Morville? Jared Spool?
  7. 7. we don’t show our work JJG? Global Navigation Default state store September 24, 2009 Version 1.0 logo search 2 Jesse James Garrett 1 cart 1. Today on HBR today on current account blogs books authors HBS downloads This new page highlights timely content from the blogs, magazine, hbr magazine 3 and books sections. explore hbr 4 2. Store area expand your knowledge build your expertise discover new approaches This area provides a focal point for all e-commerce related links. 3. Authors This new page allows users to find aggregated links to content from Partially expanded state popular authors across blogs, magazine, and books sections. 4. Explore drawer store logo search This expandable area encourages and facilitates exploration of cart content by subject. today on current account blogs books authors HBS downloads 5. Expand your knowledge hbr magazine This area features editorially selected sub-categories from the current Strategy Decision making explore hbr Business processes “Topics” category in search results. Leadership Interpersonal skills Management by objectives Organizational change Project management Quality management 6. Build your expertise Information & technology Managing uncertainty Forecasting This area features editorially selected sub-categories from the current Global business Time management Knowledge management “Management Skills” category in search results. 5 7 7. Discover new approaches expand your knowledge build your expertise discover new approaches 6 This area features editorially selected sub-categories from the current “Tools & Methodologies” category in search results. 8. “More” links Fully expanded state These links drive users interested in exploring further to dedicated store landing pages. 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 Web Redesign | Harvard Business Review
  8. 8. we don’t show our work Peter Morville?
  9. 9. we don’t show our work Jared Spool?
  10. 10. we don’t show our work “our work is proprietary.”
  11. 11. we don’t show our work it’s time to ask your boss to let you show your work.
  12. 12. wireframing was the obvious choice.
  13. 13. wireframing was the obvious choice Visio HTML Axure Omnigraffle Pencil & Paper what is the best tool? Keynote Flash Catalyst iRise Fireworks Powerpoint Balsamiq
  14. 14. wireframing was the obvious choice “Now that I’m a consumer of wireframes, I want to see prototypes!” Christina Wodtke | @cwodtke “You can’t say that works for everyone just because it works for you now!” Me | @russu
  15. 15. wireframing was the obvious choice “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!”
  16. 16. wireframing was the obvious choice sigh.
  17. 17. wireframing was the obvious choice I <3 and...
  18. 18. wireframing was the obvious choice it’s time to end the debate of wireframes vs. prototypes.
  19. 19. wireframing was the obvious choice if you’re still arguing about wireframes and prototypes, you are missing the point.
  20. 20. wireframing was the obvious choice they’re just communication tools.
  21. 21. nut up or shut up.
  22. 22. nut up or shut up four designers
  23. 23. nut up or shut up two wireframers
  24. 24. nut up or shut up two prototypers!
  25. 25. nut up or shut up 1 problem.
  26. 26. nut up or shut up 2 rules.
  27. 27. nut up or shut up each designer uses a different tool.
  28. 28. nut up or shut up balsamiq omnigraffle axure rp fireworks/html
  29. 29. nut up or shut up no talking.
  30. 30. nut up or shut up oh... document everything.
  31. 31. s i d e b a r
  32. 32. sidebar we could have designed anything.
  33. 33. sidebar a college website without girls under trees.
  34. 34. sidebar a website selling affordance faucets.
  35. 35. sidebar the project had to be for a non-profit and had to be real.
  36. 36. the case study
  37. 37. the case study Tori Tuncan @lend4health www.lend4health.com “ If we can give $5 to a stranger at a coffee shop, why can’t we do that for healthcare?
  38. 38. the case study
  39. 39. the case study
  40. 40. the case study whew.
  41. 41. the case study connecting people is a manual process.
  42. 42. the case study not scalable.
  43. 43. the case study Never doubt that a small group of thoughtful, committed, citizens can change the world. Indeed, it is the only thing that ever has. ~Margaret Mead
  44. 44. requirements & research
  45. 45. research & requirements Gabby Hon @gabbyhon http://linkedin.com/in/gabbyhon @uxbookclubchicago http://uxbookclubchicago.org
  46. 46. research & requirements
  47. 47. research & requirements
  48. 48. research & requirements objective: design the path for funding a loan.
  49. 49. research & requirements 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
  50. 50. research & requirements whew.
  51. 51. research & requirements a very manual process.
  52. 52. research & requirements not scalable.
  53. 53. this is how i do it
  54. 54. this is how i do it requirements Requirements Courtesy of: Gabby Hon @gabbyhon staywiththegroup.com
  55. 55. this is how i do it personas
  56. 56. this is how i do it information architecture
  57. 57. this is how i do it information architecture
  58. 58. this is how i do it information architecture
  59. 59. this is how i do it user journey Meet Angela The Loan Funder Angela Reviews Angela arrives at Angela Searches for a Details of Loan Lend4Health.com Loan to Fund Request (0.0.0.0) (1.0.0.0) (1.1.0.0) http://www.flickr.com/photos/ 11762156@N06/2912606267/ Part-time working mother of 8 year old son Avery who is able to stay with a babysitter several hours a day. Angela has been through the gamut of testing and wants to help others.
  60. 60. this is how i do it sketching Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  61. 61. this is how i do it sketching Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0) quantity over quality.
  62. 62. this is how i do it sketching Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0) quantity over quality. 15 sketches for 3 screens.
  63. 63. this is how i do it sketching
  64. 64. this is how i do it sketching i even sketched this presentation.
  65. 65. this is how i do it wireframing 50% off code: friendofruss (“friend of russ”)
  66. 66. this is how i do it wireframing Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  67. 67. this is how i do it visual design Brad Simpson @simplybrad http://i-rradiate.com
  68. 68. this is how i do it visual design Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  69. 69. this is how i do it kinda cool.
  70. 70. this is how i do it the entire process
  71. 71. the overlap
  72. 72. the overlap russ unger information architecture
  73. 73. the overlap fred beecher information architecture
  74. 74. the overlap will evans information architecture
  75. 75. the overlap russ unger sketching
  76. 76. the overlap todd zaki warfel sketching
  77. 77. the overlap fred beecher sketching
  78. 78. the overlap will evans sketching
  79. 79. the overlap russ unger visual design
  80. 80. the overlap todd zaki warfel visual design
  81. 81. the overlap fred beecher visual design
  82. 82. the overlap will evans visual design
  83. 83. the overlap the videos http://is.gd/curls http://is.gd/curow http://is.gd/curw2 http://is.gd/curpN
  84. 84. Russ Unger | @russu ideaconference.org User Experience Director Happy Cog

×