Designing Social Experiences That Work

Designing Social Experiences That Work Jonathon Colman Content Strategy, Facebook

Stand up if you’re… a builder

Stand up if you’re… a builder a designer

Stand up if you’re… a builder a designer a writer

Hey © Thomas Hawk — flickr.com/photos/thomashawk/11100543796 Creative Commons license: https://creativecommons.org/licenses/by-nc/2.0/

We should all be standing © Thomas Hawk — flickr.com/photos/thomashawk/11100543796 Creative Commons license: https://creativecommons.org/licenses/by-nc/2.0/

How we identify ourselves © Brian Kingsley — flickr.com/photos/canihazit/7924965536 Creative Commons license: https://creativecommons.org/licenses/by-nc-nd/2.0/

How we identify ourselves matters © Brian Kingsley — flickr.com/photos/canihazit/7924965536 Creative Commons license: https://creativecommons.org/licenses/by-nc-nd/2.0/

We work best when we’re open and bold © Brian Kingsley — flickr.com/photos/canihazit/7924965536 Creative Commons license: https://creativecommons.org/licenses/by-nc-nd/2.0/

Let’s be open Source: © Billy Rowlinson — flickr.com/photos/billyrowlinson/3193773937 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Let’s be open I’m a content strategist Source: © Billy Rowlinson — flickr.com/photos/billyrowlinson/3193773937 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

We plan for the creation, publication, and governance of useful, usable content. — Kristina Halvorson CEO/Founder, Brain Traffic

Content Strategy is to copywriting as information architecture is to design. — Rachel Lovinger Experience Director, Razorfish

We don’t need more content… — Sara Wachter-Boettcher Editor-in-chief, A List Apart

We don’t need more content… We need content that does more. — Sara Wachter-Boettcher Editor-in-chief, A List Apart

But isn’t Facebook’s content all user-generated?

Source: © Facebook — http://newsroom.fb.com/news/2014/11/coming-together-to-fight-ebola/

Source: © Facebook — http://newsroom.fb.com/news/2014/11/updating-our-terms-and-policies-helping-youunderstand-how-facebook-works-and-how-to-control-your-information/

Source: © Facebook — http://newsroom.fb.com/news/2014/10/introducing-safety-check/

Source: © Facebook http://newsroom.fb.com/news/2014/01/introducing-paper-stories-from-facebook-2/ http://newsroom.fb.com/news/2014/06/introducing-slingshot-a-creative-labs-app/ http://newsroom.fb.com/news/2014/07/introducing-the-internet-org-app/

Language is an interface

Language is an infrastructure

Let’s be bold

Let’s be bold: design content as a system Source: © Bruce Irving — flickr.com/photos/flyingsinger/86898565 Concept: Erin Kissane Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Let’s be bold: design content as a product Source: © Bruce Irving — flickr.com/photos/flyingsinger/86898565 Concept: Ian Lurie Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Let’s be bold: design content as a experience Source: © Bruce Irving — flickr.com/photos/flyingsinger/86898565 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Page views aren’t your goal… — Michael Powers Source: http://www.slideshare.net/michaelpowers/better-content-with-analytics-and-user-testing/29

Your goal is your goal. — Michael Powers Source: http://www.slideshare.net/michaelpowers/better-content-with-analytics-and-user-testing/29 Source: © Bronski Beat — flickr.com/photos/runesteiness/3843101159 Creative Commons license: https://creativecommons.org/licenses/by-nc-nd/2.0/

Build Learn Source: “Build-Measure-Learn” © Eric Ries/The Lean Startup Content is an experience that improves with iteration Measure

You can’t be lean without learning Organizational Action Outcomes Single-Loop Learning Source: Choo, C.W. (1998). Information Management for the Intelligent Organization (2nd ed.). Information Today, Inc.: Medford, New Jersey

You can’t be lean without learning Norms Assumptions Strategies Organizational Action Outcomes Single-Loop Learning Double-Loop Learning Source: Choo, C.W. (1998). Information Management for the Intelligent Organization (2nd ed.). Information Today, Inc.: Medford, New Jersey

How we design content experiences at Facebook Source: © Thomas Hawk — flickr.com/photos/thomashawk/14875780140/ Creative Commons license: https://creativecommons.org/licenses/by-nc/2.0/

Start with Why Why Source: “Start with Why” © Simon Sinek, www.startwithwhy.com Make the world more open and connected

Continue with How How Why Source: “Start with Why” © Simon Sinek, www.startwithwhy.com Connect with friends, discover and share, build, grow, monetize

Then do the What What How Why Source: “Start with Why” © Simon Sinek, www.startwithwhy.com Design, engineering, content, research, marketing, product…

Focus on impact Be open Our core values Be bold Build social value Move fast Source: © Facebook — facebook.com/careers

What we Used to say

Source: © Facebook/Analog Research Lab

Source: © Facebook/Analog Research Lab

Source: © Facebook/Analog Research Lab © Thomas Hawk — flickr.com/photos/thomashawk/9735430146 Creative Commons license: https://creativecommons.org/licenses/by-nc/2.0/

What we’ve Learned

Source: © Facebook/Analog Research Lab

Source: © Facebook/Analog Research Lab

Source: © Facebook/Analog Research Lab

Source: © Facebook/Analog Research Lab

Source: © Facebook/Analog Research Lab

Norms Assumptions Strategies Organizational Action Outcomes Single-Loop Learning Double-Loop Learning Source: Choo, C.W. (1998). Information Management for the Intelligent Organization (2nd ed.). Information Today, Inc.: Medford, New Jersey

Minimum Viable Content

Quality framework Value Source: Russ Maschmeyer, Julie Zhuo, Adam Mosseri © Facebook/Analog Research Lab — Russ Maschmeyer, Julie Zhuo, and Adam Mosseri

Quality framework Value Ease of Use Source: Russ Maschmeyer, Julie Zhuo, Adam Mosseri © Facebook/Analog Research Lab — Russ Maschmeyer, Julie Zhuo, and Adam Mosseri

Quality framework Value Craft Ease of Use Source: Russ Maschmeyer, Julie Zhuo, Adam Mosseri © Facebook/Analog Research Lab — Russ Maschmeyer, Julie Zhuo, and Adam Mosseri

Surface Skeleton The five planes of user experience Structure Scope Strategy Source: © Jesse James Garrett, The Elements of User Experience — http://www.jjg.net/elements/ (used with permission)

Surface Skeleton Where content is seen and used Structure Scope Strategy Source: © Jesse James Garrett, The Elements of User Experience — http://www.jjg.net/elements/ (used with permission)

Surface Skeleton Where content is modeled and built Structure Scope Strategy Source: © Jesse James Garrett, The Elements of User Experience — http://www.jjg.net/elements/ (used with permission)

Surface Skeleton Where content is proposed and planned Structure Scope Strategy Source: © Jesse James Garrett, The Elements of User Experience — http://www.jjg.net/elements/ (used with permission)

Surface Skeleton Where content strategy happens Structure Scope Strategy Source: © Jesse James Garrett, The Elements of User Experience — http://www.jjg.net/elements/ (used with permission)

The path from strategy to surface is non-linear

The path from strategy to surface is non-linear Source: © Daniel Olnes — flickr.com/photos/dno1967b/14785722509 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Our Content Principles 1 Keep it simple Use plain language and be concise Source: © Facebook/Content Strategy

Our Content Principles 1 2 Keep it simple Get to the point Use plain language and be concise Explain how things work so people can make good decisions Source: © Facebook/Content Strategy

Our Content Principles 1 2 3 Keep it simple Get to the point Talk like a person Use plain language and be concise Explain how things work so people can make good decisions Be friendly and respectful, like you’re talking to a neighbor Source: © Facebook/Content Strategy

Does This Sound Like Us? Error 24601: Neg Fault Config ^n2.1x

Does This Sound Like Us? Error 24601: Neg Fault Config ^n2.1x LOLz, 404 #YOLO

Does This Sound Like Us? Error 24601: Neg Fault Config ^n2.1x LOLz, 404 #YOLO Sorry, there’s a temporary issue with your post. Please try again in a minute.

Sorry, there’s a temporary issue with your post. Please try again in a minute.

What happened? Sorry, there’s a temporary issue with your post. Please try again in a minute.

Where did it happen? Sorry, there’s a temporary issue with your post. Please try again in a minute.

Sorry, there’s a temporary issue with your post. Please try again in a minute. What should I do next?

Sorry, there’s a temporary issue with your post. Please try again in a minute. When?

Oh No! Did I do something wrong? Great! So it’s OK? Will I lose my work? Sorry, there’s a temporary issue with your post. Please try again in a minute. How long will all this take?

Fear Relief Anxiety Sorry, there’s a temporary issue with your post. Please try again in a minute. Impatience

1 2 3 Keep it simple Get to the point Talk like a person Use plain language and be concise Explain how things work so people can make good decisions Be friendly and respectful, like you’re talking to a neighbor Source: © Facebook/Content Strategy

What I’ve learned from three products Source: © Allyde Winters – flickr.com/photos/allywin13/13568230105 Creative Commons license: https://creativecommons.org/licenses/by-nc-nd/2.0/

Saved Less is more difficult Source: © Facebook — http://newsroom.fb.com/news/2014/07/introducing-save-on-facebook/

Saved Don’t get in the way Source: © Facebook — http://newsroom.fb.com/news/2014/07/introducing-save-on-facebook/

Saved Make the most of small spaces Source: © Facebook — http://newsroom.fb.com/news/2014/07/introducing-save-on-facebook/

Login The best content is invisible Source: © Facebook — http://newsroom.fb.com/news/2014/07/introducing-save-on-facebook/

Login Show examples, not concepts Source: © Facebook — http://newsroom.fb.com/news/2014/07/introducing-save-on-facebook/

Login Break apart big decisions Source: © Facebook — http://newsroom.fb.com/news/2014/07/introducing-save-on-facebook/

Nearby Friends Empathy is hard Source: © Facebook — http://newsroom.fb.com/news/2014/07/introducing-save-on-facebook/

Nearby Friends Let people opt-in Source: © Facebook — http://newsroom.fb.com/news/2014/07/introducing-save-on-facebook/

Nearby Friends Give them control Source: © Facebook — http://newsroom.fb.com/news/2014/07/introducing-save-on-facebook/

Optional and opt-in Outcomes Show you value upfront Offer you clear choices Easy to opt-in or opt-out

Surface Skeleton We planned for these experiences Structure Scope Strategy Source: © Jesse James Garrett, The Elements of User Experience — http://www.jjg.net/elements/ (used with permission)

Surface Skeleton So we could build them Structure Scope Strategy Source: © Jesse James Garrett, The Elements of User Experience — http://www.jjg.net/elements/ (used with permission)

Surface Skeleton For people to use Structure Scope Strategy Source: © Jesse James Garrett, The Elements of User Experience — http://www.jjg.net/elements/ (used with permission)

Surface Skeleton This is where content strategy happens Structure Scope Strategy Source: © Jesse James Garrett, The Elements of User Experience — http://www.jjg.net/elements/ (used with permission)

Let’s stand up for Value Source: Russ Maschmeyer, Julie Zhuo, Adam Mosseri © Facebook/Analog Research Lab — Russ Maschmeyer, Julie Zhuo, and Adam Mosseri

Let’s stand up for Value Ease of Use Source: Russ Maschmeyer, Julie Zhuo, Adam Mosseri © Facebook/Analog Research Lab — Russ Maschmeyer, Julie Zhuo, and Adam Mosseri

Let’s stand up for Value Craft Ease of Use Source: Russ Maschmeyer, Julie Zhuo, Adam Mosseri © Facebook/Analog Research Lab — Russ Maschmeyer, Julie Zhuo, and Adam Mosseri

Let’s stand up for Source: © Facebook/Analog Research Lab

Let’s stand up for What How Starting with Why Source: Chart: Simon Sinek “Start with Why” © Simon Sinek, www.startwithwhy.com Why

Let’s stand up for Better Content

Let’s stand up for Better Content

Let’s stand up for Better Content

Let’s stand up for Better Content

Let’s stand up for Better Content

Let’s stand up for Better Content

Let’s stand up for Better Content

Let’s stand up for Better Content

Hey © Thomas Hawk — flickr.com/photos/thomashawk/11100543796 Creative Commons license: https://creativecommons.org/licenses/by-nc/2.0/

We should all be standing. © Thomas Hawk — flickr.com/photos/thomashawk/11100543796 Creative Commons license: https://creativecommons.org/licenses/by-nc/2.0/

Build Better Content