Opening the Kimono:
                                  A look behind the design process




          Russ Unger | @russu
D...
no one shows their work.
no one shows their work




                                                                    IA Summit
                ...
no one shows their work




                          have you ever seen a
                              wireframe from:

...
no one shows their work




                                                                                              ...
no one shows their work




                          Peter Morville?
no one shows their work




                          Jared Spool?
no one shows their work




“My work is PROPRIETARY”
no one shows their 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




          WTF?!
wireframing was the obvious choice




        I <3                         but...
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




                           i called
                    a few friends.
nut up or shut up




                                                     i called
                                      ...
nut up or shut up




                                                     i called
                                      ...
nut up or shut up




 4 designers.
 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 Mockups      Fireworks




                            Omnigraffle     ...
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.
Tori Tuncan & Lend4Health
tori tuncan & lend4health




                                     Tori Tuncan
                                   @lend4he...
tori tuncan & lend4health
tori tuncan & lend4health
tori tuncan & lend4health




                            whew.
tori tuncan & lend4health




                      connecting people is a
                           manual process.
tori tuncan & lend4health




      Never doubt that a small
            group of thoughtful,
       committed, citizens c...
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
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 Simpson
                   ...
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
this is how i do it
the overlap
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
              Russ Unger           Todd Zaki Warfel
              Balsami...
Opening the Kimono - Big (D)esign Conference, Dallas, TX, May 29, 2010
Upcoming SlideShare
Loading in …5
×

Opening the Kimono - Big (D)esign Conference, Dallas, TX, May 29, 2010

4,627
-1

Published on

This presentation takes a detailed, behind-the-scenes look at their processes, including: research, IA/interaction design, wireframing/prototyping and visual design. Audience members will have an opportunity to see the various work product and processes of 4 designers—–each using different tools to tackle the same problem, from requirements to visual design.

Published in: Design, Education, Business
5 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,627
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
119
Comments
5
Likes
10
Embeds 0
No embeds

No notes for slide

Opening the Kimono - Big (D)esign Conference, Dallas, TX, May 29, 2010

  1. 1. Opening the Kimono: A look behind the design process Russ Unger | @russu Director of Experience Planning Draftfcb Big Design Conference
  2. 2. no one shows their work.
  3. 3. no one shows their work IA Summit 2009 http://pimpformationarchitect.com/?p=67
  4. 4. no one shows their work have you ever seen a wireframe from: JJG? Peter Morville? Jared Spool?
  5. 5. no one shows their 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
  6. 6. no one shows their work Peter Morville?
  7. 7. no one shows their work Jared Spool?
  8. 8. no one shows their work “My work is PROPRIETARY”
  9. 9. no one shows their work it’s time to ask your boss to let you show your work.
  10. 10. wireframing was the obvious choice.
  11. 11. wireframing was the obvious choice Visio HTML Axure Omnigraffle Pencil & Paper what is the best tool? Keynote Flash Catalyst iRise Fireworks Powerpoint Balsamiq
  12. 12. 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
  13. 13. wireframing was the obvious choice “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!” “Can, too!” “Cannot!”
  14. 14. wireframing was the obvious choice WTF?!
  15. 15. wireframing was the obvious choice I <3 but...
  16. 16. wireframing was the obvious choice it’s time to end the debate of wireframes vs. prototypes
  17. 17. wireframing was the obvious choice if you’re still arguing about wireframes and prototypes, you are missing the point.
  18. 18. wireframing was the obvious choice they’re just communication tools.
  19. 19. nut up or shut up.
  20. 20. nut up or shut up i called a few friends.
  21. 21. nut up or shut up i called a few friends. Todd Zaki Warfel Will Evans Fred Beecher @zakiwarfel @semanticwill @fred_beecher Messagefirst Semantic Foundry eVantage
  22. 22. nut up or shut up i called a few friends. Todd Zaki Warfel Will Evans Fred Beecher @zakiwarfel @semanticwill @fred_beecher Messagefirst Semantic Foundry eVantage 2 prototypers! (gasp!)
  23. 23. nut up or shut up 4 designers. 1 problem.
  24. 24. nut up or shut up 2 rules.
  25. 25. nut up or shut up each designer uses a different tool.
  26. 26. nut up or shut up Balsamiq Mockups Fireworks Omnigraffle Axure
  27. 27. nut up or shut up no talking.
  28. 28. nut up or shut up oh... document everything.
  29. 29. s i d e b a r
  30. 30. sidebar we could have designed anything.
  31. 31. sidebar a college website without girls under trees.
  32. 32. sidebar a website selling affordance faucets.
  33. 33. sidebar the project had to be for a non-profit and had to be real.
  34. 34. Tori Tuncan & Lend4Health
  35. 35. tori tuncan & lend4health Tori Tuncan @lend4health www.lend4health.com “If we can lend a friend, or even a stranger, $5 at a coffee shop, why can't we do the same for health?”
  36. 36. tori tuncan & lend4health
  37. 37. tori tuncan & lend4health
  38. 38. tori tuncan & lend4health whew.
  39. 39. tori tuncan & lend4health connecting people is a manual process.
  40. 40. tori tuncan & lend4health 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
  41. 41. requirements & research
  42. 42. research & requirements Gabby Hon @gabbyhon http://linkedin.com/in/gabbyhon @uxbookclubchicago http://uxbookclubchicago.org Available: July 1st!
  43. 43. research & requirements
  44. 44. research & requirements
  45. 45. research & requirements objective: design the path for funding a loan.
  46. 46. 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
  47. 47. research & requirements whew.
  48. 48. research & requirements a very manual process
  49. 49. this is how i do it.
  50. 50. this is how i do it requirements Requirements Courtesy of: Gabby Hon @gabbyhon staywiththegroup.com
  51. 51. this is how i do it personas
  52. 52. this is how i do it information architecture
  53. 53. this is how i do it information architecture
  54. 54. this is how i do it information architecture
  55. 55. 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.
  56. 56. 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)
  57. 57. 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.
  58. 58. 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.
  59. 59. this is how i do it sketching
  60. 60. this is how i do it sketching i even sketched this presentation.
  61. 61. this is how i do it wireframing 50% off code: friendofruss (“friend of russ”)
  62. 62. 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)
  63. 63. this is how i do it visual design Brad Simpson @simplybrad http://i-rradiate.com
  64. 64. 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)
  65. 65. this is how i do it kinda cool.
  66. 66. this is how i do it the entire process
  67. 67. this is how i do it
  68. 68. the overlap
  69. 69. the overlap russ unger information architecture
  70. 70. the overlap fred beecher information architecture
  71. 71. the overlap will evans information architecture
  72. 72. the overlap russ unger sketching
  73. 73. the overlap todd zaki warfel sketching
  74. 74. the overlap fred beecher sketching
  75. 75. the overlap will evans sketching
  76. 76. the overlap russ unger visual design
  77. 77. the overlap todd zaki warfel visual design
  78. 78. the overlap fred beecher visual design
  79. 79. the overlap will evans visual design
  80. 80. the overlap the videos Russ Unger Todd Zaki Warfel Balsamiq Mockups Fireworks / HTML http://is.gd/curls http://is.gd/curpN Will Evans Fred Beecher Omnigraffle Axure http://is.gd/curow http://is.gd/curw2
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×