An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone.

1,208 views

Published on

Happy Cog directors Kevin M. Hoffman and Christopher Cashdollar explore how they collaborate with each other, their clients, and their team to create custom processes to best design their award-winning web sites.

Published in: Design, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,208
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone.

  1. 1. ARMY OF ONE?NATION OF MILLIONS?Collaboration is not the key, it’s the keystone
  2. 2. 1WHO IS HAPPY COG?Small, dedicated teams
  3. 3. WHO IS HAPPY COG?Innovation & Education
  4. 4. THE BOOK THAT STARTED IT ALLDesigning With Web Standards
  5. 5. WRITINGA List Apart
  6. 6. CONFERENCEAn Event Apart
  7. 7. PUBLISHING (MORE BOOKS)A Book Apart
  8. 8. WHO IS HAPPY COG?Collaboration
  9. 9. EST.1972 KEVIN M. HOFFMAN Experience Director @kevinmhoffman
  10. 10. What I Do:‣ Strategy‣ Requirements‣ User Research‣ Information Architecture ‣ Write articles‣ User Interface Design ‣ Speak at events and‣ Heuristics (Best Practices) conferences‣ (like this one) Content Strategy‣ Editorial Direction
  11. 11. What I Create:‣ Communications Briefs‣ Meeting Agendas ‣ Content Inventory‣ Sitemaps ‣ Editorial Guidelines‣ Research Activities and Reports ‣ User Flows‣ Personas ‣ Business Process‣ Wireframes ‣ UX Tweets from @happycog every‣ Usability Testing Tuesday and Reports
  12. 12. EST. 1977CHRISTOPHER J. CASHDOLLAR Creative Director @ccashdollar
  13. 13. What I Do:‣ Lead the design team‣ I make the pretty, too‣ Team up with the client to set the tone for the project‣ Develop the creative strategy‣ Write / speak / teach
  14. 14. What I Create: ‣ Design-focused workshops ‣ Creative Briefs‣ Website Design ‣ Sketching / brainstorming sessions‣ User Interface Design ‣ Semi-coherent design-‣ Logos related Tweets for‣ Style Guides @happycog every Thursday‣ Illustrations
  15. 15. 1OUR PROCESS
  16. 16. A Our Phases PROJECT INFORMATION VISUAL DEVELOPMENTDEFINITION ARCHITECTURE DESIGN
  17. 17. B A Process could be... DESIGN BLITZ KICKOFF QA &WORKSHOP CREATIVE “VIP” PAGE REFINEMENT CONCEPTS DESIGN TEMPLATE & CREATIVE SITEMAP & CMS BRIEF WIREFRAMES TESTING USER PROTOTYPERESEARCH
  18. 18. COur Process ValuesCOLLABORATIVEITERATIVEFLEXIBLE
  19. 19. COur Process ValuesCOLLABORATIVEITERATIVEFLEXIBLE
  20. 20. COur Process ValuesCOLLABORATIVEITERATIVEFLEXIBLE
  21. 21. CHALLENGE CULTURE‣ E-commerce ‣ Aggressive deadlines‣ Highly customized, ‣ Bottom line driven infinite variations decisions‣ Endless pathways for ‣ Many vendors, but upsell one project
  22. 22. ACollaboration Pairing:
  23. 23. Project Definition/InformationArchitecture‣ Leadership involvement early in process‣ Extended “no meeting” work periods in tight collaboration‣ Collaborative, sprint based design activities
  24. 24. Fast resultsHAVE A COST
  25. 25. 3GEORGETOWNUNIVERSITY
  26. 26. CHALLENGE CULTURE‣ Public (but also ‣ Political... but what does internal) audiences that really mean?‣ Strong, historic ‣ B-52 (bombers, not identity in transition band): Powerful stakeholders outside of‣ Reengineer an the process organizationally based-site to a news ‣ Siloed information and and messaging site solutions
  27. 27. ACollaboration Pairing: AUDIENCES & CLIENTS
  28. 28. Project Definition/InformationArchitecture‣ Early, open discussion with focused meeting outcomes‣ Guerilla, cross-sectional audience research - what ties them together?‣ New solutions to old problems
  29. 29. What is a wireframe?Wireframes provide a presentation of the hierarchy ofitems present on the page, and an overview of what willand wont have persistence throughout the site, when itwill persist, and why.Wireframes are not meant to provide any strict guidelinesfor visual design, and a visual designer will significantlydeviate from the visual appearance and layout whenexecuting them.
  30. 30. HIERARCHY +PERSISTENCE NOT VISUAL DESIGN
  31. 31. ““ Honestly, Im shocked that in 2010 Im still coming across web designers who cant code their own designs. No excuse.” —ELLIOT JAY STOCKS, DESIGNER“ UX Professional is a bullshit job title. Its just a way to over-charge naive clients. All web designers should be UX pros” —RYAN CARSON, ENTREPRENEUR
  32. 32. “SWISS” DESIGNPracticing neutrality
  33. 33. About | Academics | Admissions & Financial Aid | Campus Life | Research | News Our Schools Logo/branding (link to home page) Welcome to Georgetown University Suggested topic Search Plan a Visit | Make a Gift | Contact Us | Work For UsEvents Calendar | Faculty & Office Directory | Maps & Directions | Latest Sports Scores Topic Title Topic Title Topic Title Topic Title Topic TitleTopic statement wouldgo here. Topicstatementwould go here.Teasermm/dd/yy at hh:mm, PMTeasermm/dd/yy at hh:mm, PMTeaser Full Length Story Titlemm/dd/yy at hh:mm, PM
  34. 34. About | Academics | Admissions & Financial Aid | Campus Life | Research | News Our Schools Logo/branding (link to home page) Welcome to Georgetown University Suggested topic Search Plan a Visit | Make a Gift | Contact Us | Work For UsEvents Calendar | Faculty & Office Directory | Maps & Directions | Latest Sports Scores Topic Title Topic Title Topic Title Topic Title Topic TitleTopic statement wouldgo here. Topicstatementwould go here.Teasermm/dd/yy at hh:mm, PMTeasermm/dd/yy at hh:mm, PMTeaser Full Length Story Titlemm/dd/yy at hh:mm, PM
  35. 35. ACollaboration Pairing:OURDESIGNTEAM
  36. 36. DRAW. DRAW QUICKLY.
  37. 37. ITERATE RAPIDLY.
  38. 38. Rules need to be understood TO BE BROKEN
  39. 39. Prepare bombingCONTINGENCIES
  40. 40. 4HAPPY COG
  41. 41. CHALLENGE CULTURE‣ Agency got no blog! ‣ Given license, we’d like to expand more than contract‣ Strong existing presence on the web ‣ Three different offices with (ALA, AEA, different voices and Zeldman.com) different design approaches‣ Happy Cog is more than Jeffrey ‣ Everyone wants to be involved
  42. 42. ACollaboration Pairing: THE BOSSES
  43. 43. CAN WEUSE THETWITTER?
  44. 44. Project Definition/InformationArchitecture‣ Given the mandate “use Twitter.”‣ Experiment. Try something different.
  45. 45. Actual ProcessAs close to agile asHappy Cog is going to get.
  46. 46. ACollaboration Pairing:A FRONT-ENDDEVELOPER
  47. 47. THIS ISBRIANWARREN.
  48. 48. Use deliverables for DISCUSSION
  49. 49. That whole details and DEVILS THING
  50. 50. 5CITY OF PHILADELPHIA
  51. 51. CHALLENGE CULTURE‣ We (need to re) build ‣ Visual thinkers, with great this city (brand)! photography and content‣ Content? We got it! ‣ More prone to thinking In fact, we got too about ad campaigns than much! websites‣ Who is this site for ‣ Keeping up with the again? Jonesez
  52. 52. ACollaboration Pairing: RESEARCH SUBJECTS (WHO ARE ALSO DESIGNERS)
  53. 53. GOALS Increase the number of people from outside1 the Philadelphia area that choose to book a weekend stay through one of the offered hotel specials.
  54. 54. GOALS Increase the number of people from outside1 the Philadelphia area that choose to book a weekend stay through one of the offered hotel specials. Facilitate awareness of events, destinations,2 and attractions to both Philadelphia residents and non-residents equally.
  55. 55. ‣ Things to Do ‣ What’s New‣ Places to Stay ‣ Events Calendar‣ Special Offers ‣ Itineraries & Tours‣ Travel Tools ‣ Countryside‣ Philly Favorites ‣ Photos & Multimedia‣ Your Philadelphia ‣ Our Sponsors
  56. 56. • “Aligning Design Strategy with Human Behavior” • by Indi Young, available at RosenfeldMedia.com or the books are sold on the internetMental Models
  57. 57. Where is the “context?”
  58. 58. Where is the “context?”
  59. 59. Constraint?
  60. 60. Limited research budget & predetermined scope. SOLUTION?
  61. 61. Existing research +USE DESIGN TEAM AS GUINEA PIGS
  62. 62. What is your personal processfor planning a regional, weekend trip?
  63. 63. RESEARCH QUESTIONS‣ How did it first occur to you to ‣ What did you do when you take a weekend or overnight first arrived? trip? ‣ What did you do while you‣ How did you select a were there? destination? ‣ What did you do before you‣ What did you do to select your left? mode of transportation/what ‣ What did you do on the way did you select? home?‣ What did you do before you ‣ What did you do when you got left? home, related to your trip?‣ What did you do on the way?
  64. 64. Sticky Notes!
  65. 65. LEGEND Topic (2) Mental space (3) Category (4) Category (4) Mental model for Cannot be done Somewhat planning and online important executing a weekend trip Could be done Important online Only done Very Important online Alignment DiagramHorizon Line (1) Existing content Existing application
  66. 66. Topic (2) Mental space (3) Category (4) Category (4) Mental model for Cannot be done Somewhat planning and online important executing a weekend trip Could be done Important online Only done Very Important onlineHorizon Line (1) Existing content Existing application Alignment Diagram Proposed and existing web content Proposed Proposed content application and applications that
  67. 67. onlineHorizon Line (1) Existing content Existing application Proposed and existing web content Proposed Proposed content application and applications that align with the tasks and categories listed Existing page Secured stack application above the line. Proposed page External stack Application Alignment Diagram
  68. 68. Choosing Regional Travel Choosing a DestinationResearch Attracted by destination Spontaneous Research Attracted by destination choice Interested in amenitites Area renowned for certain activity Chose a specific Friends, family & museum coworkers Had to go to a Looked for regional wedding bed and breakfasts Self-guided Revisit location Visit family enjoyed on Looked for Friends, family & previous trip urban location coworkers Wanted to see Recommendation Saw magazine Interested in friends in the Looked for rural from trusted friend advertisement location events area Invited by friend Read travel rel. Interested in Wanted to see Looked for local news gallery opening family warm climate Self-guided Considered how Suggested by Purchased a Interested in many people I Read travel rel. Looked for Interested in Interested in friend travel book broadway show know there* local news shopping amenities events Wanted activity Spontaneously Received email Researched local Interested in offered by that decided to Number of friends Research Wanted to see Family/couple recommendation destinations band/concert recommendations information online certain exhibit activities geography travel Things to Do Events Things to Do Events Things to Do Things to Do Things to Do Things to Do (E-mail) Calendar (E-mail) Calendar Plan Your Trip: Tours & Plan Your Trip: Plan Your Trip: Plan Your Trip: Plan Your Trip: Alignment Diagram Attractions Activities Attractions Attractions Attractions Attractions Newsletter Plan Your Trip: Trip Advisor Newsletter Philly Fun Trip Advisor Signup Attractions Reviews Signup Guide Reviews Trip Advisor Philly Fun Reviews Guide
  69. 69. Choosing Regional Travel Choosing a DestinationResearch Attracted by destination Spontaneous Research Attracted by destination choice Interested in amenitites Area renowned for certain activity Chose a specific Friends, family & museum coworkers Had to go to a Looked for regional wedding bed and breakfasts Self-guided Revisit location Visit family enjoyed on Looked for Friends, family & previous trip urban location coworkers Wanted to see Recommendation Saw magazine Interested in friends in the Looked for rural from trusted friend advertisement location events area Invited by friend Read travel rel. Interested in Wanted to see Looked for local news gallery opening family warm climate Self-guided Considered how Suggested by Purchased a Interested in many people I Read travel rel. Looked for Interested in Interested in friend travel book broadway show know there* local news shopping amenities events Wanted activity Spontaneously Received email Researched local Interested in offered by that decided to Number of friends Research Wanted to see Family/couple recommendation destinations band/concert recommendations information online certain exhibit activities geography travel Things to Do Events Things to Do Events Things to Do Things to Do Things to Do Things to Do (E-mail) Calendar (E-mail) Calendar Plan Your Trip: Tours & Plan Your Trip: Plan Your Trip: Plan Your Trip: Plan Your Trip: Attractions Activities Attractions Attractions Attractions Attractions Newsletter Plan Your Trip: Trip Advisor Newsletter Philly Fun Trip Advisor Signup Attractions Reviews Signup Guide Reviews Trip Advisor Philly Fun Reviews Guide
  70. 70. Post Trip Activities Eating & resting Passing time Sharing Enjoying trip Return home business Recoveryns information with items friends Personal business Gave gifts Recommended purchased on restaurant to a trip friend. Told friends Unpacked bags about trip Sleep Blog about trip Balanced Did laundry checkbook Stopped for Read a book Posted pictures Sent thank you Professional Sleep meal to Flickr card to host business Eat the food Slept at odd Eat Catch up on Emailed friends purchased in Downloaded Reviewed notes times from email pictures and from business Little Italy jetlag movies meeting Dining & Food Social (Things to Do) Networking TripAdvisor Reviews Blogger, LiveJournal, etc. Flickr
  71. 71. Choosing Regional Travel Choosing a DestinationResearch Attracted by destination Spontaneous Research Attracted by destination choice Interested in amenitites Area renowned for certain activity Chose a specific Friends, family & museum coworkers Had to go to a Looked for regional wedding bed and breakfasts Self-guided Revisit location Visit family enjoyed on Looked for Friends, family & previous trip urban location coworkers Wanted to see Recommendation Saw magazine Interested in friends in the Looked for rural from trusted friend advertisement location events area Invited by friend Read travel rel. Interested in Wanted to see Looked for local news gallery opening family warm climate Self-guided Considered how Suggested by Purchased a Interested in many people I Read travel rel. Looked for Interested in Interested in friend travel book broadway show know there* local news shopping amenities events Wanted activity Spontaneously Received email Researched local Interested in offered by that decided to Number of friends Research Wanted to see Family/couple recommendation destinations band/concert recommendations information online certain exhibit activities geography travel Things to Do Events Things to Do Events Things to Do Things to Do Things to Do Things to Do (E-mail) Calendar (E-mail) Calendar Plan Your Trip: Tours & Plan Your Trip: Plan Your Trip: Plan Your Trip: Plan Your Trip: Attractions Activities Attractions Attractions Attractions Attractions Newsletter Plan Your Trip: Trip Advisor Newsletter Philly Fun Trip Advisor Signup Attractions Reviews Signup Guide Reviews Trip Advisor Philly Fun Reviews Guide
  72. 72. Choosing Regional Travel Choosing a Destination Choosing Mode of Transportation Trip Preparation Trip Preparation (conResearch Attracted by destination Spontaneous Research Attracted by destination Economizing Consider cost Consider comfort & convenience Travel & lodging Itinerary creation Preparation & packing choice Interested in Research travel amenitites Read reviews Area renowned for certain activity Compare prices Chose a specific on Expedia Friends, family & museum Dining coworkers Compare prices Read reviews Had to go to a Looked for regional Price of airfare on Orbitz wedding bed and breakfasts Self-guided Revisit location Distance from Compare prices Asked for friends enjoyed on Looked for Price of train home recommendations Visit family on Travelocity Friends, family & urban location Tickets & booking Purc previous trip coworkers Wanted to see How much stuff Researched Booked rental Researched Pur Recommendation Saw magazine Looked for rural Cost of gas Ease of public restaurants by hotel Interested in friends in the I needed to take Research lodging parking near airport car Events Attractions sna from trusted friend advertisement location transportation events area Planning Pu Wanted to see Get friend hotel Researched Booked flight Read reviews Read reviews Made restaurant Cleared digital Invited by friend Read travel rel. Interested in Looked for Price of car Parking costs and Total travel time recommendation too family convenience train fares reservations camera local news gallery opening warm climate rental toil Self-guided Save time Considered how Researched Booked train Asked for friends Asked for friends Suggested by Purchased a Interested in Read travel rel. Looked for Looked for train Parking costs and Time duration of Ease of getting Researched Looked online Made a playlist Bo Interested in many people I Interested in plane fares ticket recommendations recommendations friend travel book broadway show local news shopping accessability convenience trip around hotels for restaurants on iPod cam amenities know there* events Save money Wanted activity Spontaneously Can be reached Received email Researched local Weather at Flight distance Researched bed Researched Booked hotel Purchased Checked weather Get friend food Made lists of Bo Interested in offered by that decided to Number of friends Research Wanted to see Family/couple w/o travel time Compared costs Flight distance recommendation destinations recommendations information online and breakfasts parking near train event tickets conditions recommendation band/concert geography travel certain exhibit activities affecting free time destination station things to bring Philadelphia Parking Events Getting Here Getting Here Weather Getting Around Hotels (Places Hotel Packages Things to Do Things to Do Events Things to Do Things to Do Things to Do Special Offers Information My Trip My Trip Dining & Food Things to Do Calendar (Travel Tools) (Travel Tools) (Travel Tools) (Travel Tools) (Places to Stay) (E-mail) Calendar (E-mail) to Stay) (Travel Tools) Itinerary Builder Itinerary Builder Bed & Itineraries & Itineraries & Plan Your Trip: Tours & Plan Your Trip: Plan Your Trip: Plan Your Trip: Getting Around Hotel Packages Getting Here Breakfasts Plan Your Trip: Tours (Things to Tours (Things to Open Table Plan Your Trip: Attractions Activities Attractions Attractions Attractions (Travel Tools) (Places to Stay) (Travel Tools) (Places to Stay) Car Rentals Do) Do) Attractions Hotel Packages Plan Your Trip: Plan Your Trip: Trip Advisor Newsletter Plan Your Trip: Trip Advisor Newsletter Philly Fun Trip Advisor Trip Advisor (Places to Stay) Hotels Attractions Reviews Signup Attractions Reviews Signup Guide Reviews Reviews Trip Advisor Philly Fun Hotel Widget Trip Advisor Reviews Guide Reviews Trip Advisor Reviews Choosing regional travel Choosing a destination ‣ Research locations ‣ Research amenities ‣ Attracted by destination ‣ Attracted by destination ‣ Spontaneous choice ‣ Economizing
  73. 73. Choosing regional travel Choosing a destination‣ Research locations ‣ Research amenities‣ Attracted by destination ‣ Attracted by destination‣ Things To Do Spontaneous choice ‣ Economizing
  74. 74. Sitemap
  75. 75. Wireframes
  76. 76. Balance classification WITH CONTEXT.
  77. 77. EXPLORE.Regardless of scope.
  78. 78. ACollaboration Pairing:OURCLIENT
  79. 79. http://visitphilly.com
  80. 80. NOT ALL STORIES HAVEA HAPPY ENDING.
  81. 81. SIMPLE IS BETTER.
  82. 82. 6UNITED STATESHOLOCAUST MEMORIALMUSEUM
  83. 83. CHALLENGE CULTURE‣ This is a huge, ‣ Passionate and committed complex organization; staff; all of them, at all it has no peer levels‣ International reach ‣ Some tension between and value aspirational goals and actual operations‣ Wealth of content and powerful message(s); ‣ Limited, dedicated web learning is a goal resources
  84. 84. ACollaboration Pairing: LIKE, EVERYBODY. ALL THE PEOPLE.
  85. 85. Project Definition/InformationArchitecture‣ Clarification of the site strategy within the museum strategy‣ Align information structures with persona mental models‣ Content strategy (learners)‣ Meeting design!
  86. 86. 1WHY MEETINGS?
  87. 87. 1MEETINGS SUCK.
  88. 88. MEETINGS ARE TOXIC
  89. 89. AT 37 SIGNALS,TRADITIONALMEETINGSARETOXICTO AGILESOFTWAREDEVELOPMENT.
  90. 90. MEETINGDESIGNFRAMEWORK#1
  91. 91. THE DYNAMICS OFGROUPDECISION-MAKING
  92. 92. NEW DECISIONTOPIC POINT THE DYNAMICS OF DECISION-MAKING
  93. 93. LEADER IDEA GROUP MEMBER IDEA NEW DECISIONTOPIC POINT A UTOPIAN DYNAMIC OF GROUP DECISION-MAKING
  94. 94. WTF? WTF? WTF? NEWTOPIC WTF? WTF? WTF? WTF? THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  95. 95. NEW DECISIONTOPIC POINT THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  96. 96. LEADER IDEA GROUP MEMBER IDEADIVERGENT CONVERGENTTHINKING THINKING NEW DECISION TOPIC POINT THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  97. 97. DIVERGENT CONVERGENTTHINKING THINKING ‣ Generating a list of ‣ Sorting ideas into ideas categories ‣ Free-flowing open ‣ Summarizing key discussion points ‣ Seeking diverse ‣ Coming to points of view agreement ‣ Suspending ‣ Exercising judgement judgment THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  98. 98. NEW DECISIONTOPIC POINT THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  99. 99. NEW DECISIONTOPIC POINT THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  100. 100. THE “GROAN ZONE” NEW DECISIONTOPIC POINT THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  101. 101. ‣ Full participationCORE ‣ Mutual understandingVALUES ‣ Inclusive solutions ‣ Shared responsibility
  102. 102. MAKE IT REAL!
  103. 103. MAKE IT REAL!
  104. 104. VISION SPACEPROCESS SOLUTION MAKE ITDESIGN SPACE REAL! PROBLEM SPACE PATHWAYS TO ACTION MODEL
  105. 105. ACollaboration Pairing:OURCLIENT
  106. 106. BStandard Design Processusually is... CREATIVE CLIENT CONCEPTS REVIEW
  107. 107. WE ARE NOTDON DRAPER
  108. 108. BCollaborative Design Processcan be... CREATIVE CLIENT CONCEPTS REVIEW
  109. 109. BCollaborative Design Processcan be... CREATIVE CLIENT SINGLE CONCEPT CONCEPTS REVIEW ITERATION
  110. 110. CDesign NAMECharacteristics COMPANY CIRCLE ONE NUMBER FOR EACH SCALE. A. “How close will the new design be visually and typographically to the current print materials and branding?” R I G I D LY A D H E R E TO CURRENT N O T C L O S E AT A L L STYLES 1 2 3 4 5 6 7 8 9 10 “Should the homepage use lots of visuals such as photography to B. express ideas or focus more on typography and headlines?” V I S UA L S WORDS 1 2 3 4 5 6 7 8 9 10
  111. 111. C “ Should the new design feel solemn or hopeful?”SOLEMN HOPEFUL 1 2 3 4 5 6 7 8 9 10
  112. 112. D Let’s Play MadLibs“ The new site will feel adjective by showing ” noun
  113. 113. 7YEAH, OK. SO WHAT?
  114. 114. ACAN YOU TELL A STORYABOUT YOUR PROCESS?“So, your process walks into a bar...”
  115. 115. BGOOD IDEAS COMEFROM ANYWHEREEven project managers!
  116. 116. CCOLLABORATION ISEXPENSIVEMake your meetings count!
  117. 117. DBEING DOGMATICIS FOR THE BIRDS“Find” the unique process needs for each project
  118. 118. THANK YOU!Questions?

×