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

  • 829 views
Uploaded 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 …

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.

More in: Design , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
829
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
22
Comments
0
Likes
2

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. ARMY OF ONE?NATION OF MILLIONS?Collaboration is not the key, it’s the keystone
  • 2. 1WHO IS HAPPY COG?Small, dedicated teams
  • 3. WHO IS HAPPY COG?Innovation & Education
  • 4. THE BOOK THAT STARTED IT ALLDesigning With Web Standards
  • 5. WRITINGA List Apart
  • 6. CONFERENCEAn Event Apart
  • 7. PUBLISHING (MORE BOOKS)A Book Apart
  • 8. WHO IS HAPPY COG?Collaboration
  • 9. EST.1972 KEVIN M. HOFFMAN Experience Director @kevinmhoffman
  • 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. 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. EST. 1977CHRISTOPHER J. CASHDOLLAR Creative Director @ccashdollar
  • 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. 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. 1OUR PROCESS
  • 16. A Our Phases PROJECT INFORMATION VISUAL DEVELOPMENTDEFINITION ARCHITECTURE DESIGN
  • 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. COur Process ValuesCOLLABORATIVEITERATIVEFLEXIBLE
  • 19. COur Process ValuesCOLLABORATIVEITERATIVEFLEXIBLE
  • 20. COur Process ValuesCOLLABORATIVEITERATIVEFLEXIBLE
  • 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. ACollaboration Pairing:
  • 23. Project Definition/InformationArchitecture‣ Leadership involvement early in process‣ Extended “no meeting” work periods in tight collaboration‣ Collaborative, sprint based design activities
  • 24. Fast resultsHAVE A COST
  • 25. 3GEORGETOWNUNIVERSITY
  • 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. ACollaboration Pairing: AUDIENCES & CLIENTS
  • 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. 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. HIERARCHY +PERSISTENCE NOT VISUAL DESIGN
  • 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. “SWISS” DESIGNPracticing neutrality
  • 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. 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. ACollaboration Pairing:OURDESIGNTEAM
  • 36. DRAW. DRAW QUICKLY.
  • 37. ITERATE RAPIDLY.
  • 38. Rules need to be understood TO BE BROKEN
  • 39. Prepare bombingCONTINGENCIES
  • 40. 4HAPPY COG
  • 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. ACollaboration Pairing: THE BOSSES
  • 43. CAN WEUSE THETWITTER?
  • 44. Project Definition/InformationArchitecture‣ Given the mandate “use Twitter.”‣ Experiment. Try something different.
  • 45. Actual ProcessAs close to agile asHappy Cog is going to get.
  • 46. ACollaboration Pairing:A FRONT-ENDDEVELOPER
  • 47. THIS ISBRIANWARREN.
  • 48. Use deliverables for DISCUSSION
  • 49. That whole details and DEVILS THING
  • 50. 5CITY OF PHILADELPHIA
  • 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. ACollaboration Pairing: RESEARCH SUBJECTS (WHO ARE ALSO DESIGNERS)
  • 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. 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. ‣ 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. • “Aligning Design Strategy with Human Behavior” • by Indi Young, available at RosenfeldMedia.com or the books are sold on the internetMental Models
  • 57. Where is the “context?”
  • 58. Where is the “context?”
  • 59. Constraint?
  • 60. Limited research budget & predetermined scope. SOLUTION?
  • 61. Existing research +USE DESIGN TEAM AS GUINEA PIGS
  • 62. What is your personal processfor planning a regional, weekend trip?
  • 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. Sticky Notes!
  • 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. 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. 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. 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. 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. 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. 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. 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. Choosing regional travel Choosing a destination‣ Research locations ‣ Research amenities‣ Attracted by destination ‣ Attracted by destination‣ Things To Do Spontaneous choice ‣ Economizing
  • 74. Sitemap
  • 75. Wireframes
  • 76. Balance classification WITH CONTEXT.
  • 77. EXPLORE.Regardless of scope.
  • 78. ACollaboration Pairing:OURCLIENT
  • 79. http://visitphilly.com
  • 80. NOT ALL STORIES HAVEA HAPPY ENDING.
  • 81. SIMPLE IS BETTER.
  • 82. 6UNITED STATESHOLOCAUST MEMORIALMUSEUM
  • 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. ACollaboration Pairing: LIKE, EVERYBODY. ALL THE PEOPLE.
  • 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. 1WHY MEETINGS?
  • 87. 1MEETINGS SUCK.
  • 88. MEETINGS ARE TOXIC
  • 89. AT 37 SIGNALS,TRADITIONALMEETINGSARETOXICTO AGILESOFTWAREDEVELOPMENT.
  • 90. MEETINGDESIGNFRAMEWORK#1
  • 91. THE DYNAMICS OFGROUPDECISION-MAKING
  • 92. NEW DECISIONTOPIC POINT THE DYNAMICS OF DECISION-MAKING
  • 93. LEADER IDEA GROUP MEMBER IDEA NEW DECISIONTOPIC POINT A UTOPIAN DYNAMIC OF GROUP DECISION-MAKING
  • 94. WTF? WTF? WTF? NEWTOPIC WTF? WTF? WTF? WTF? THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  • 95. NEW DECISIONTOPIC POINT THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  • 96. LEADER IDEA GROUP MEMBER IDEADIVERGENT CONVERGENTTHINKING THINKING NEW DECISION TOPIC POINT THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  • 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. NEW DECISIONTOPIC POINT THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  • 99. NEW DECISIONTOPIC POINT THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  • 100. THE “GROAN ZONE” NEW DECISIONTOPIC POINT THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
  • 101. ‣ Full participationCORE ‣ Mutual understandingVALUES ‣ Inclusive solutions ‣ Shared responsibility
  • 102. MAKE IT REAL!
  • 103. MAKE IT REAL!
  • 104. VISION SPACEPROCESS SOLUTION MAKE ITDESIGN SPACE REAL! PROBLEM SPACE PATHWAYS TO ACTION MODEL
  • 105. ACollaboration Pairing:OURCLIENT
  • 106. BStandard Design Processusually is... CREATIVE CLIENT CONCEPTS REVIEW
  • 107. WE ARE NOTDON DRAPER
  • 108. BCollaborative Design Processcan be... CREATIVE CLIENT CONCEPTS REVIEW
  • 109. BCollaborative Design Processcan be... CREATIVE CLIENT SINGLE CONCEPT CONCEPTS REVIEW ITERATION
  • 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. C “ Should the new design feel solemn or hopeful?”SOLEMN HOPEFUL 1 2 3 4 5 6 7 8 9 10
  • 112. D Let’s Play MadLibs“ The new site will feel adjective by showing ” noun
  • 113. 7YEAH, OK. SO WHAT?
  • 114. ACAN YOU TELL A STORYABOUT YOUR PROCESS?“So, your process walks into a bar...”
  • 115. BGOOD IDEAS COMEFROM ANYWHEREEven project managers!
  • 116. CCOLLABORATION ISEXPENSIVEMake your meetings count!
  • 117. DBEING DOGMATICIS FOR THE BIRDS“Find” the unique process needs for each project
  • 118. THANK YOU!Questions?