Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Design Method: Using Process to Hack Design


Published on

  • Be the first to comment

The Design Method: Using Process to Hack Design

  1. 1. THE DESIGN METHOD Using Process to Hack Design
  2. 2. Raise your hand if:
  3. 3. Image: Jonathan Kos-Read
  4. 4. Image: Suresh Eswaran
  5. 5. Image: Tom Wigley
  6. 6. Can you jazz it up a little? Image: Dan Rocha
  7. 7. I’ll know it when I see it. Image: MSNBC
  8. 8. Today’s talk
  9. 9. Discussion points
  10. 10. Problem(s)
  11. 11. Confusing design for art
  12. 12. Image: Frank Farm
  13. 13. Image: Murray Hall
  14. 14. Letting ego win
  15. 15. Image: Andrew Walsh
  16. 16. Agency: Demner, Merlicek & Bergmann, Vienna
  17. 17. trophies Image: Clio Awards (Sorry for the mockery, dude.)
  18. 18. Mistaking our purpose
  19. 19. Image: Narcissus by Caravaggio
  20. 20. beautiful object Image: For the Love of God by Damien Hirst
  21. 21. Design is:
  22. 22. A utilitarian act;
  23. 23. Left: Art Deco Chair; Right: Eames Aluminum Group Management Chair
  24. 24. Left: Neoprint M319; Right: FF Meta
  25. 25. Images: Royal Canadian Mint
  26. 26. A professional pursuit;
  27. 27. planning gig
  28. 28. Very much like that of an editor
  29. 29. An effort to achieve clarity.
  30. 30. Systems
  31. 31. Design is messy
  32. 32. Concentrate on sales or focus on brand building? How do we measure success? Serif or sans? Crowdsource some of the content? Build or utilize existing technology? Online or traditional? Is the headline overly hyperbolic? Should we try a muted palette? How do we indicate active links? Engage them in a contest? Have we already done this? Lo-fi or higher production value? Matte or gloss? Standalone mobile or responsive? Are we on brand? TypeKit or fontface call? Where’s the call to action? Which visual treatments? How do we engage the viewer? Allow Facebook/Twitter sign in? Animated or live action? More hand crafted? How do we reduce friction for users? Thinner strokes? Is there a means to re-engage? Is the approach defensible? What kind of photography should we use? Drop down navigation? Illustrations: pictorial or symbolic? More cowbell? Desaturate? Treat the images consistently? Measure
  33. 33. Image: USA Today
  34. 34. Systems = Design
  35. 35. Why systems matter
  36. 36. Image/design: Bruce Mau Design
  37. 37. Image/design: Banana Republic
  38. 38. Image/design: Apple
  39. 39. The Method
  40. 40. The Design Method is
  41. 41. Image/design: Adler Design
  42. 42. belief system Image/design: Muji
  43. 43. Image/design: ittalla / Kaj Franck
  44. 44. Cornerstones of The Method
  45. 45. Image: David
  46. 46. “I chose to use a ___________, because it allows us to _______.”
  47. 47. Early and often
  48. 48. About the Method
  49. 49. Image: camknows
  50. 50. “I wish they would have taught me this in design school.”
  51. 51. Involves four stages:
  52. 52. Discovery (Gaining Understanding)
  53. 53. Do good research
  54. 54. Changing your mindset
  55. 55. Collecting data
  56. 56. Customer Story ThoughtFarmer helping make eHarmony an even better place to work eHarmony is a solidly profitable enterprise growing at about 30% a year with over 20 million registered users in all 50 states and 191 countries. A mind-boggling 236 on average say ‘I do’ to their eHarmony matches every day. Now ThoughtFarmer is helping make eHarmony an even better place to work, says vice president of human resources Jim Lambert. “Of all the things we do for employees – and it’s pretty wide and varied – I think ThoughtFarmer has been one of the biggest hits,” Lambert says. His HR group knew from survey that employees wanted to be kept in the loop and up to speed on what the company was doing. eHarmony did have an intranet, but it required knowledge of HTML coding to make changes. Result: not enough employees participated in making changes to the site. “What ThoughtFarmer did was provide a vehicle we could use to communicate with employees on the fly,” Lambert says. “And it allowed HR to manage the flow of information, while at the same time letting employees customize their own intranet pages and share information with others in their department.” The HR group regularly posts current and upcoming events, monthly updates on company performance, messages from the CEO and COO, pictures from the latest company event, and changes to the employee manual. “We’re trying to avoid clogging everybody’s e-mail box by making ThoughtFarmer the central repository for everything,” Lambert explains. Broadcast e-mails only include links to ThoughtFarmer now. ThoughtFarmer ensures the security of the intranet so only employees can access the information, something that is important to eHarmony. “We have been pleased wth the level of security and flexibility to create various levels of access to the system,” Lambert said. Departments can create their own private intranets – but also post information for everyone. Employees are encouraged to include personal information about themselves on their pages and keep them up to date. “We also like to use ThoughtFarmer for recognition when an employee or a department has done a fantastic job,” Lambert says. ThoughtFarmer has been one of the biggest hits.” Featured customer: Continued… SOCIAL INTRANET SOFTWARE ThoughtFarmer is turnkey social intranet software. It enables innovative organizations to share knowledge, engage employees, and foster collaboration. Multilingual support with auto-translate ThoughtFarmer, a product of Openroad Communications Ltd. Suite 210, 12 Water Street, Vancouver, BC V6B 1A5 Canada Email Web Tel 650.648.9599 or 1.888.694.3999 June 2010 System Requirements Typical server hardware for 500 users: Single machine, dual core processor 2 - 4 GB RAM Fast SATA or SCSI drives, 100GB+ Load balanced configurations recommended for over 5000 users Server software: Windows Server 2003 or 2008 SQL Server 2005 or 2008 Active Directory • Exchange 2003 or 2007 Web browsers: Internet Explorer 7, 8 for Windows Firefox 3.0+ for Windows or Mac Safari 3.0+ for Mac Customizable skin Auto-generated navigation Apply tags to pages and documents Display feeds Append files and manage documents Add comments Change page layout to suit content Intranet Features News. Create news sections and archives. Document management. Create, share and manage critical pages, files and photos. Security. Set view and edit privileges by person or group. Employee directory. Browse, sort and filter employees to find expertise. Calendars. Create shared event calendars. Multilingual. Support multiple languages. Auto -translate for cross-language collaboration. Single sign-on. Windows users get a secure, personalized view with no logon required. Powerful search indexes all pages and text inside documents Create a single PDF from multiple pages Control view & edit by person or group Highly rated and favorited pages are boosted in search results Track recent activity via RSS Track changes with version history Create and join groups Social Software Features Wikis. See a mistake? Fix it. Have an idea? Share it. Every user is an editor. Blogs. Create blogs, anywhere. Groups. Create and manage groups with open or closed membership. Sync with Exchange. User profiles. Browse complete profiles, relationships and recent activity for each user. Discussion capture. Capture and record email distribution list conversations. Manage distribution lists with Exchange integration. Feeds. Produce RSS. Display external feeds. Relationship browser. Visual browser shows relationships between people and groups.
  57. 57. Business Plan 2011 Marketing Brand Standards
  58. 58. Image: Hao-po Chang
  59. 59. Starting conversations
  60. 60. I see what you’re doing.
  61. 61. Image: Gaelen Hadlett
  62. 62. Conduct an audit
  63. 63. Research is awesome!
  64. 64. Planning (Determining Course)
  65. 65. Designers are planners
  66. 66. Rethinking what design is
  67. 67. Key planning elements
  68. 68. • Make ThoughtFarmer the coveted social intranet that everyone wants to use • Establish ThoughtFarmer as the thinking intranet company • Turn users into “believers” who share in your mission to help people work better Goals
  69. 69. • Design a flexible brand and identity system that distinctively sets ThoughtFarmer apart from competition • Establish an accessible, cultured, solid tone that reassures buyers and excites users • Actively change the discussion from intranets to how to help people and organizations work better • Craft an elevator pitch that conveys the key benefits of a social intranet • Create “trademarkable” features that become defensible icons Objectives
  70. 70. • Change the discussion from intranets to how to help people and organizations work better • Demonstrate that ThoughtFarmer makes organizations competitive and effective by transforming culture • Sell “intrinsic value” instead of plain feature lists (this changes the game) • Strategically parcel “trademarkable” features to make them defensible • Use your marketing goals to set the path for the company: • To the laggards, make this a different race by convincing them that ThoughtFarmer is a better way to work • To the curious, evangelize the benefits of using a social intranet and aid them in their intranet education • To transitioners, present yourselves as the next generation intranet that really helps organizations work better Strategy
  71. 71. • Demonstrate how ThoughtFarmer can make their jobs easier and more enjoyable • Tell stories that get people excited about taking control • Give a sense of credibility to show that you are a reputable and trustworthy company • Let users know they are dealing with experts who understand the needs of their organization • Present yourselves as who you are: a thoughtful over-achieving software company • Use your Twitter page to show that ThoughtFarmer is supported by a group of dedicated people • Consider incorporating James Robinson’s 5 key points for social intranets (content, communication, collaboration, activity, culture) ! Content • Craft some content that speaks directly to upper management • Group some of your content by key vertical markets • Show client logos on Pricing page to lend confidence at time of purchase • Employ infographics to quickly summarize concepts/facts in a memorable way • Limit the use of humour and consider using more subtle approaches at levity • Include resources that speak business (datasheets, whitepapers, analyst reports, awards) ! Design • Craft a highly distinctive visual system that supports your strategy and messaging goals • Employ a professional and completely distinctive look through bold and unmistakable visuals • Use tight typographic standards to maximize readability and establish content hierarchy • Use images that tell a story, which supports ThoughtFarmer’s strategy and messaging plan • Offer areas of deep text with the ability to rapidly skim it • Create unique symbols for parceled “trademarkable” features • Craft every visual element with thought and care (to show that you pay attention to the details) • Consider using icons/symbols to emphasize calls to action • Avoid using any ORC design elements and maintain a healthy distance between these identities • Consider alluding to “organic” and “growth” (as implied by the TF name) using visual references ! IA/UI • Group clients by key verticals to give potential clients useful category information • Consider making a landing page for each vertical market/industry that you currently service • Group features into buckets to help visitors digest detailed information in a logical fashion • Consider flattening Product and Features into one section since there is only one product • Create a Services section to highlight your implementation and training services • Explore making Pricing a unique section since it’s something that clients are keenly interested in • Move Reviews into a more prominent area • Collect your videos into a subsection (some of your videos are hidden in case studies) Plan
  72. 72. Useful planning tools
  73. 73. Jessica Lee, Intranet Project Manager Jessica (42) is an intranet project manager for a large educational organization. She’s responsible for overseeing the overall performance and health of the school’s IT system. She attends many meetings each week and manages a small team of 2-8 people. Jessica and her team are often busy, fighting IT related fires every couple of days. She’s concerned about system crashes, slow performance, and complaints from the school President. She attends conferences for intranet professionals and reads many industry publications to keep up-to-date. When looking for potential technology providers or partners, she values reliability, great customer service, and sales people who really understand tech. Although she’s impressed by a lot of small providers, she wants to partner with companies that have staying power, and will be around for years to come. Things on her “must have list” include: Microsoft stack support, quick deployment, and customer service.
  74. 74. Jens Romanovich, CEO of a large organization ! Jens is extremely busy managing his company but dedicates time for leadership education and training. Lately he’s been reading articles about workplace collaboration methods in business books and magazines. He learns about “social intranets” and how they could improve existing processes at his company. He “gets it”—it’s a platform to share knowledge and collaborate, it’s not Facebook. He’s curious about using a social intranet as a competitive advantage over his competitors. ! He Googles “social intranet” and the top search result is a company called ThoughtFarmer. He clicks the URL. The site is fresh and inviting—this looks like an innovative company. On the Homepage, he reads a few messages about business, growth, and culture—the messages generally resonate with him. He scans the main navigation bar and finds a section called Results and decides to investigate. The section contains a collection of case studies—the many notable companies listed have him reassured. Each case study link has a photo, title, and brief summary, making them easy to scan. Jens finds a case study that mirrors his company’s situation and decides to read it. There’s a lot of info in the case study but highlighted content makes it easy to skim. He returns to the main Results section and reviews a few other case studies. From the case studies, he’s been exposed to a few strategies that might apply to his company. While he isn’t fully convinced, he does think that ThoughtFarmer could be a good fit. Jen is curious about the people behind ThoughtFarmer. He scans the main navigation bar and finds the About section. He learns that the company has been in business for some time and has a competent leadership team. He quickly scans the main navigation and sees a Plans section and a prominent link for a Demo. He looks at the pricing information and thinks that the licensing costs appear reasonable. He would love to see a demo, but he’s awfully busy. He decides to delegate a number of tasks to his CIO. He asks his CIO to try a demo, compare costs, and determine if there are any road-blocks. He’s tempted to adopt ThoughtFarmer as long as his CIO doesn’t find any critical problems.
  75. 75. June 2, 2011 10884b - ThoughtFarmer, Website, Site Map Version 4-0 Primary links Secondary links Tertiary links 0-0 Home 1-0 Product 2-0 Clients 1-1 Overview 1-2 Communicate 1-3 Collaborate 1-4 Integrate 1-5 Engage 1-6 System Requirements 3-0 Pricing 3-1 Cloud Pricing 3-1-6 Request Pricing 3-2 Self-Hosted Pricing 3-2-1 - 3-2-5 Regional Pricing 3-3 Maintenance & Support 3-4 Professional Services 4-0 Intranets 101 6-0 Blog 6-1 - 6-x Posts 7-0 About 7-1 Overview 7-2 Team 7-3 Partners 7-4 Careers 7-6 Contact 8-1 Thank you for contacting us 8-0 Support Page legend Section legend Standard page External link Future page Multiple pages Section (no page) Primary links Secondary links Tertiary links 5-0 Demo 5-1 Register for a Demo 5-1-1 Thank you for registering 3-1-1 - 3-1-5 Regional Pricing 3-1-6-1 Thank you for price request 3-2-6 Request Pricing 3-2-6-1 Thank you for price request Hidden pages 14-1 Design Landing Page 14-2 Government Landing Page 14-3 Education Landing Page 7-5 Media 9-0 Newsletter Signup 9-1 Thank you for signing up 10-0 Search Results 11-0 Error 404 14-0 Squeeze Pages 12-0 Master Software License 13-0 Chris McGrath’s Calendar 1-4-1 SharePoint Intranet Con. 2-1 Continuum 2-2 eHarmony 2-3 Entropic 2-4 Graymont 2-5 Hicks Morley 2-6 IDEO 2-7 Intrawest 2-8 MEC 2-9 Penn State 2-10 USGS
  76. 76. Content Strategy
  77. 77. What are we marketing? Software that helps people and organizations work better. ! What is the role of the communication? To excite people about social intranets, and get them to choose ThoughtFarmer. ! Who are we trying to reach? • Influencers (CEOs, CXOs, Directors of HR, Operations Managers, and IT employees) • Decision Makers (Directors of IT, CIOs, COOs, Directors of Internal Communications, and Intranet Managers) • Advocates (Industry writers and thought leaders) ! What do we need to say? ThoughtFarmer helps people work better within an organization by providing simple, yet powerful tools. ! Why is this true and relevant? • Most organizations are interested in finding better ways to work • Many use out-of-date intranets or a patchwork of programs that don’t work well together • ThoughtFarmer coined the term “social intranet” and users love them ! What is the competitive advantage? • TF is light but powerful—employing a simple-to-use web interface atop robust technology • TF software has been designed to help people share knowledge and collaborate effectively • A committed team of product focused developers and support staff respond quickly to users ! What is the tone? Good, accessible, wholesome Creative Brief
  78. 78. Notice how interaction design shapes this?
  79. 79. Presenting your plan
  80. 80. What will amaze you
  81. 81. Creative (Working With Ideas)
  82. 82. Let’s abandon “The Reveal”
  83. 83. Image: AMC
  84. 84. A different viewpoint
  85. 85. Image: Diogo Martins
  86. 86. Establishing an appropriate direction
  87. 87. Determining tone
  88. 88. Good, Accessible, Wholesome
  89. 89. Good:
  90. 90. Accessible:
  91. 91. Wholesome:
  92. 92. TERM Good ASSOCIATION USE* Quality We make great intranet software… Accessible Use …that’s easy to use… Wholesome Personality …and we’re nice people you can talk to. Leading to:
  93. 93. Establishing a creative concept
  94. 94. The idea Many subscribe to the notion that, “if you’re not growing, you’re dying.” We believe there’s truth in this phrase, but not as one of simply gaining mass. ThoughtFarmer is all about healthy growth. This encompasses: personal development and exploration; broadening an organization’s size, offering, and depth; and the growth of ThoughtFarmer itself, as a product and community. The ThoughtFarmer brand will leverage notions of ecosystems, agriculture, gardens, farming, and all-around good, honest work. The positive associations surrounding these notions will help us differentiate ThoughtFarmer from the competition, in turn informing a unique and real promise. ! Rationale Most intranet companies obsess over technology, features, and (let’s admit it) bravado. The problem with all of this is that the focus is on the software instead of the user. What these groups seem to completely misunderstand is that their users don’t really care about software. Similarly, their work often has little to do with the technology, features, or ego surrounding a software company. By casting all of this aside, and instead thinking about what our users really need/want, we connect with people on a far more real and meaningful level. Our concept builds upon a simple, understandable metaphor that goes to the heart of systems of engagement. Our software helps them work well, and grow in a natural and healthy way. ! Implied notions • ThoughtFarmer is a good tool that will help you grow your business • ThoughtFarmer’s software is about users, and the way companies really work • You can trust ThoughtFarmer, because it’s a wholesome and honest company ! What we like about this concept • It uses a rich metaphor with lots of room for compelling visuals, language, and constructs • The notions of agriculture and farming link to very positive, real, and honest associations • It’s distinctively different from the competition, which makes it defensible (and memorable) ! Tone Good, accessible, wholesome Concept: Healthy Growth
  95. 95. Developing a design direction
  96. 96. Consider using typefaces that are approachable to avoid appearing stiff. Also consider type with strong historical roots, and the ability to stand the test of time. Explore the wide variety of new web safe fonts to bring a unique and “own able” look to your website. Mix type styles to maintain visual interest and distinguish between different types of information. Hand written type can help to reinforce the “human element” through your materials and bring about a friendly feel. Order your information with a clear and distinct typographic hierarchy making information easy to scan. Use a clean grid to maintain order and ensure proper spacing is given to all typographic elements. Type
  97. 97. Consider a “natural” color palette to convey an honest and approachable feel. Allow the background to remain neutral while hits of bold colour bring content to life. Play with the tones found in garden, and explore using them in unique ways. We like how layering elements creates new colors, and references the merging of components. Using natural surfaces and a simple, yet strong color palette will help imply you’re a responsible bunch. We suggest sampling colors that are found in nature to bring a wholesome feel to the ThoughtFarmer brand. Explore the possibility of using a “rich” color palette to add a level of sophistication. Color
  98. 98. Employ a clean typographic style with ample white space to convey a sense of top-shelf elegance. Consider using color systems and varying color groupings to differentiate offerings. Be brave yet sensible with the placement of graphic elements to show you’re a little different than the rest. Group information in clearly ordered clusters that allows users to easily scan different types of information. Build a family of graphic elements that can be applied across all materials to imply that you “get” systems. Organize content into easy to digest blocks with healthy amounts of leading and space between graphic elements. Form and Use of Space
  99. 99. Explore production techniques like letterpress printing to engage the sense of touch. Apply treatments to type that mimic embossing, and letterpress printing to differentiate headlines from content. Consider using unique graphic elements to highlight important information. Use subtle shifts in tone to bring depth to the screen and clearly indicate click-able areas. Intentionally apply hand-made textures to backgrounds and illustrations to create a warm and inviting feel. Vary the visual depth between content areas to clearly distinguish where content starts and ends. Visual Treatments
  100. 100. Consider effects such as duotones that lend an illustrative sensibility to the photographs in use. Merge photographs into illustrative spaces in order to visually integrate real people into the “ThoughtFarmer world”. Explore using stark, high contrast images, in order to minimize any hokey, old-fashioned, farming clichés. See what can be done by collaging varying forms, elements, textures, and motion, to create a distinctive feel for your brand. Show people screen captures of your application in use, so, they can really understand what you’re offering. Avoid stock photos like the plague, and give us candid (even awkward) images of real people we can actually believe in. Photography (Content and Treatments)
  101. 101. Use naturally colored and textured stock to differentiate your materials from the conventional materials used by others. Consider applying depth to graphic elements that allow them to appear as though they sit on top of the page. Use textures that are familiar to help the user feel comfortable and break away form some more staid software associations. Where possible, employ a slick, machined look to balance any natural treatments and reflect your technological capabilities. Occasionally use textures to break up white space throughout your website. Visually elevate elements from others to bring interest to the page and create separation. Textures
  102. 102. Consider using simple shapes to build complex systems of illustrations, in order to establish a unique style you can call your own. Use earthy textures to help illustrations stand out from backgrounds and create a warm, natural feel. Play with whimsical illustrative styles where applicable to show that you are real and approachable. Explore using illustrations that are flat and graphic. They will never go out of style and won’t date your materials. Use abstract geometric forms and compositions that lend progressive, forward thinking associations. Use simple illustrations to keep users engaged when viewing charts and diagrams. Illustrative Elements
  103. 103. Consider taking a unique, illustrated approach to items like buttons. Symbols and pictograms can be a great way to convey information quickly. Use color, texture, and depth to define actionable areas and encourage interaction. Apply unique background treatments to icons and buttons to define click-able areas. Use button treatments that clearly indicate to users where they are and what they are doing. Cluster information into groups and give users the tools they need to access further information. When navigating through layers of information, provide the user with a clear wayfinding system that allows them to move around the site with ease. UI Elements
  104. 104. Presentation and correction
  105. 105. Application (Making Design Real)
  106. 106. Finishing where others begin
  107. 107. This is the easy part
  108. 108. Building prototypes
  109. 109. Iterating (continually)
  110. 110. Then you produce
  111. 111. Why This Method Works
  112. 112. Allocates time efficiently
  113. 113. Prizes suitability over “genius”
  114. 114. Built on collaboration
  115. 115. Adapts to varying jobs
  116. 116. Acknowledges the changing nature of design
  117. 117. Closing
  118. 118. This is one approach
  119. 119. Find that clarity
  120. 120. Make design that works
  121. 121. Time is limited
  122. 122. @karj