the design method: using process to hack design
TRANSCRIPT
Using Process to Hack DesignTHE DESIGN METHOD
Raise your hand if:
I’ll know it when I see it.
Image: MSNBC
Today’s talk
Discussion points
Problem(s)
Confusing design for art
Letting ego win
Agency: Demner, Merlicek & Bergmann, Vienna
trophies
Image: Clio Awards (Sorry for the mockery, dude.)
Mistaking our purpose
beautiful object
Image: For the Love of God by Damien Hirst
Design is:
A utilitarian act;
Left: Art Deco Chair; Right: Eames Aluminum Group Management Chair
Left: Neoprint M319; Right: FF Meta
A professional pursuit;
planning gig
Very much like that of an editor
An effort to achieve clarity.
Systems
Design is messy
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
Image: USA Today
Systems = Design
Why systems matter
Image/design: Bruce Mau Design
Image/design: Banana Republic
Image/design: Apple
The Method
The Design Method is
Image/design: ittalla / Kaj Franck
Cornerstones of The Method
“I chose to use a ___________, because it allows us to _______.”
Early and often
About the Method
“I wish they would have taughtme this in design school.”
Involves four stages:
Discovery (Gaining Understanding)
Do good research
Changing your mindset
Collecting data
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…
June 2010
ThoughtFarmer, a product of Openroad Communications Ltd. ThoughtFarmer, a product of Openroad Communications Ltd. ThoughtFarmer, a product of Openroad Communications Ltd. ThoughtFarmer, a product of Openroad Communications Ltd. Suite 210, 12 Water Street, Vancouver, BC V6B 1A5 Canada
Email Email Email Email [email protected] WebWebWebWeb www.thoughtfarmer.com Tel Tel Tel Tel 650.648.9599 or 1.888.694.3999
System Requirements
Typical server hardware for 500 users:Typical server hardware for 500 users:Typical server hardware for 500 users: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:Server software:Server software:Server software: Windows Server 2003 or 2008 SQL Server 2005 or 2008 Active Directory • Exchange 2003 or 2007
Web browsers:Web browsers:Web browsers:Web browsers: Internet Explorer 7, 8 for Windows Firefox 3.0+ for Windows or Mac Safari 3.0+ for Mac
ThoughtFarmer is turnkey social intranet software. ThoughtFarmer is turnkey social intranet software. ThoughtFarmer is turnkey social intranet software. ThoughtFarmer is turnkey social intranet software. It enables innovative organizations to share knowledge, engage employees, and foster collaboration.
SOCIAL INTRANET SOFTWARE
Intranet Features
News.News.News.News. Create news sections and archives.
Document management.Document management.Document management.Document management. Create, share and manage critical pages, files and photos.
Security.Security.Security.Security. Set view and edit privileges by person or group.
Employee directory. Employee directory. Employee directory. Employee directory. Browse, sort and filter employees to find expertise.
Calendars.Calendars.Calendars.Calendars. Create shared event calendars.
Multilingual.Multilingual.Multilingual.Multilingual. Support multiple languages. Auto-translate for cross-language collaboration. Single signSingle signSingle signSingle sign----on.on.on.on. Windows users get a secure, personalized view with no logon required.
Customizable skin
Auto-generated navigation
Apply tags to pages and documents
Display feeds
Add comments
Append files and manage documents
Change page layout to suit content
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
Multilingual support with auto-translate
Create and join groups
Social Software Features
Wikis.Wikis.Wikis.Wikis. See a mistake? Fix it. Have an idea? Share it. Every user is an editor.
Blogs. Blogs. Blogs. Blogs. Create blogs, anywhere.
Groups. Groups. Groups. Groups. Create and manage groups with open or closed membership. Sync with Exchange.
User profiles. User profiles. User profiles. User profiles. Browse complete profiles, relationships and recent activity for each user.
Discussion capture. Discussion capture. Discussion capture. Discussion capture. Capture and record email distribution list conversations. Manage distribution lists with Exchange integration.
Feeds.Feeds.Feeds.Feeds. Produce RSS. Display external feeds.
Relationship browser. Relationship browser. Relationship browser. Relationship browser. Visual browser shows relationships between people and groups.
Business Plan
2011 Marketing Brand
Standards
Starting conversations
I see what you’re doing.
Conduct an audit
Research is awesome!
Planning (Determining Course)
Designers are planners
Rethinking what design is
Key planning elements
• 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 betterGoals
• Design a flexible brand and identity system that distinctively setsThoughtFarmer 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
• 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
• Address group needs: mgmt. wants productive people; staff don’t want sucky systems • 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
Useful planning tools
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.
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.
0-0Home
Primary links Secondary links Tertiary links
1-0Product
2-0Clients
1-1Overview
10884b - ThoughtFarmer, Website, Site Map Version 4-0June 2, 2011
1-3Collaborate
1-2Communicate
1-4Integrate
1-5Engage
1-6System Requirements
3-0Pricing
3-1Cloud Pricing
3-1-6Request Pricing
3-2Self-Hosted Pricing
3-3Maintenance & Support
3-4Professional Services
4-0Intranets 101
6-0Blog
6-1 - 6-xPosts
7-0About
7-1Overview
7-2Team
7-3Partners
7-4Careers
7-6Contact
8-1Thank you for contacting us
8-0Support
Standard page
External link
Future page
Multiple pages
Primary links
Tertiary links
Secondary linksSection (no page)
Page legend Section legend
5-0Demo
5-1Register for a Demo
5-1-1Thank you for registering
3-1-1 - 3-1-5Regional Pricing
3-1-6-1Thank you for price request
3-2-6Request Pricing
3-2-1 - 3-2-5Regional Pricing
3-2-6-1Thank you for price request
Hidden pages
14-1Design Landing Page
14-2Government Landing Page
14-3 Education Landing Page
7-5Media
9-0Newsletter Signup
9-1Thank you for signing up
10-0Search Results
11-0Error 404
14-0Squeeze Pages
12-0Master Software License
13-0Chris McGrath’sCalendar
1-4-1SharePoint Intranet Con.
2-1Continuum
2-2eHarmony
2-3Entropic
2-4Graymont
2-5Hicks Morley
2-6IDEO
2-7Intrawest
2-8MEC
2-9Penn State
2-10USGS
Content Strategy
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
Notice how interaction design shapes this?
Presenting your plan
What will amaze you
Creative (Working With Ideas)
Let’s abandon “The Reveal”
A different viewpoint
Establishing an appropriate direction
Determining tone
Good, Accessible, Wholesome
Good:
Accessible:
Wholesome:
ASSOCIATION
USE*
TERM Good
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:
Establishing a creative concept
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
Developing a design direction
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
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
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
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
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)
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
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
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
Presentation and correction
Application (Making Design Real)
Finishing where others begin
This is the easy part
Building prototypes
Iterating (continually)
Then you produce
Why This Method Works
Allocates time efficiently
Prizes suitability over “genius”
Built on collaboration
Adapts to varying jobs
Acknowledges the changing nature of design
Closing
This is one approach
Find that clarity
Make design that works
Time is limited
@karj