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

4,742 views
4,654 views

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,742
On SlideShare
0
From Embeds
0
Number of Embeds
299
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

×