Designing Content for Product Experiences

A presentation at User Interface Engineering (UIE) Virtual Seminar by Jonathon Colman

Build BETTER Content © Billy Rowlinson – flickr.com/photos/billyrowlinson/3193773937 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Jonathon Colman Content Strategy, Facebook @jcolman © Billy Rowlinson – flickr.com/photos/billyrowlinson/3193773937 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Get the full story bit.ly/fixourshit © Billy Rowlinson – flickr.com/photos/billyrowlinson/3193773937 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Stand up if You’re a writer You’re a builder

Stand up if You’re a writer You’re a builder You’re a researcher

Stand up if You’re a writer You’re a builder You’re a researcher You’re a designer

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 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 I’m a content strategist © 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 Co-author, Content Strategy for the Web Quote by Kristina Halvorson (@halvorson) - http://alistapart.com/article/thedisciplineofcontentstrategy © Billy Rowlinson – flickr.com/photos/billyrowlinson/3193773937 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

“ We use words and data to create unambiguous content that supports meaningful, interactive experiences. Rachel Lovinger Experience Director, Razorfish Quote by Rachel Lovinger (@rlovinger) - http://boxesandarrows.com/content-strategy-the-philosophy-of-data/ © Billy Rowlinson – flickr.com/photos/billyrowlinson/3193773937 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

“ Content Strategy is to copywriting as Information architecture is to design. Rachel Lovinger Experience Director, Razorfish Quote by Rachel Lovinger (@rlovinger) - http://boxesandarrows.com/content-strategy-the-philosophy-of-data/ © Billy Rowlinson – flickr.com/photos/billyrowlinson/3193773937 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

“ We don’t need more content. Sara Wachter-Boettcher Content Strategist Author, Content Everywhere Quote by Sara Wachter-Boettcher (@sarawb) - http://www.slideshare.net/Saraboettcher/changing-content-changing-culture © Billy Rowlinson – flickr.com/photos/billyrowlinson/3193773937 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

“ Does more. We don’t need more content. We need content that Sara Wachter-Boettcher Content Strategist Author, Content Everywhere Quote by Sara Wachter-Boettcher (@sarawb) - http://www.slideshare.net/Saraboettcher/changing-content-changing-culture © Billy Rowlinson – flickr.com/photos/billyrowlinson/3193773937 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

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

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

© Facebook - http://newsroom.fb.com/news/2014/11/updating-our-terms-and-policies-helpi ng-you-understand-ho w-facebook-works-and-how-to-control-your-informati on/

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

http://newsroom.fb.com/news/2014/01/introducing-paper-stories-from-facebook-2/ © Facebook 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 http://newsroom.fb.com/news/2014/01/introducing-paper-stories-from-facebook-2/ © Facebook 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 Infrastructure concept: Andrew Hinton http://newsroom.fb.com/news/2014/01/introducing-paper-stories-from-facebook-2/ © Facebook 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/

Let’s be bold content strategy ≠ copywriting © Simon Greig flickr.com/photos/xrrr/2349212841 Creative Commons license: https://creativecommons.org/licenses/by-nc-sa/2.0/

Let’s be bold content strategy ≠ managing writers © Simon Greig flickr.com/photos/xrrr/2349212841 Creative Commons license: https://creativecommons.org/licenses/by-nc-sa/2.0/

Let’s be bold content strategy ≠ content marketing © Simon Greig flickr.com/photos/xrrr/2349212841 Creative Commons license: https://creativecommons.org/licenses/by-nc-sa/2.0/

Let’s be bold content strategy = interaction design © K@_UX – flickr.com/photos/k2_ux/8447614776 Creative Commons license: https://creativecommons.org/licenses/by-nc-nd/2.0/

Let’s be bold content strategy = user experience © K@_UX – flickr.com/photos/k2_ux/8447614776 Creative Commons license: https://creativecommons.org/licenses/by-nc-nd/2.0/

Let’s be bold content strategy = Design thinking © K@_UX – flickr.com/photos/k2_ux/8447614776 Creative Commons license: https://creativecommons.org/licenses/by-nc-nd/2.0/

intertwingled © K@_UX – flickr.com/photos/k2_ux/8447614776 Creative Commons license: https://creativecommons.org/licenses/by-nc-nd/2.0/

Source: Dan Saffer/Kicker Studio © Dan Saffer/Kicker Studio - kickerstudio.com/2008/12/the-disciplines-of-user-experience/ (used with permission)

This is content Source: Dan Saffer/Kicker Studio © Dan Saffer/Kicker Studio - kickerstudio.com/2008/12/the-disciplines-of-user-experience/ (used with permission)

This is design and engineering without Content Source: Dan Saffer/Kicker Studio © Dan Saffer/Kicker Studio - kickerstudio.com/2008/12/the-disciplines-of-user-experience/ (used with permission)

This is content Strategy Source: Dan Saffer/Kicker Studio © Dan Saffer/Kicker Studio - kickerstudio.com/2008/12/the-disciplines-of-user-experience/ (used with permission)

Let’s be bold Design content as a System concept: Erin Kissane © Bruce Irving - flickr.com/photos/flyingsinger/86898565 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Let’s be bold Design content as a Product concept: Ian Lurie © Bruce Irving - flickr.com/photos/flyingsinger/86898565 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Let’s be bold Design content as an Experience © Bruce Irving - flickr.com/photos/flyingsinger/86898565 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Listen: “Page views aren’t your goal.” Source: Michael Powers Quote by Michael Powers - http://www.slideshare.net/michaelpowers/better-content-with-analytics-and-use r-testing /29

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

Selfactualization Esteem Good content experiences meet our needs Love & Belonging Safety Physiological Source: A.H. Maslow A.H. Maslow (1943). “A Theory of Human Motivation”. Psychological Review (50, 370-396). Retrieved in August, 2014 from psychclassics.yorku.ca/Maslow/motivation.htm

Joy Usability Great content experiences exceed them Accessibility Core Functionality Purpose Inspired by: A.H. Maslow, Sarah O’Keefe, Hilary Marsh, Wouter de Bres, Matt Toback A.H. Maslow (1943). “A Theory of Human Motivation”. Psychological Review (50, 370-396). Retrieved in August, 2014 from psychclassics.yorku.ca/Maslow/motivation.htm

Content needs collaboration across teams Source: Skillset.org/Brain Traffic © Skillset.org/Brain Traffic - blog.braintraffic.com/2010/01/behold-the-mighty-hive/ (used with permission)

Content needs a lifecycle Source: erin Scime/Dopedata.com © Erin Scime/DopeData.com - dopedata.com/2009/07/23/panel-on-the-content-life-cycle-at-razorfish/ (used with permission)

Content is an Experience Build Learn measure Source: Eric Ries, The Lean Startup “Build-Measure-Learn” © Eric Ries/The Lean Startup

Build Ideas Products Learn that improves with iteration measure Source: Eric Ries, The Lean Startup Data “Build-Measure-Learn” © Eric Ries/The Lean Startup

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

But you can’t be lean without learning Norms Assumptions Strategies Organizational action Outcomes Single-Loop Learning Double-Loop Learning Concept: Chris Argyris 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 © Thomas Hawk - flickr.com/photos/thomashawk/14875780140/ Creative Commons license: https://creativecommons.org/licenses/by-nc/2.0/

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

Continue with the How how why connect with friends, discover the world, share how you want Chart: Simon Sinek “Start with Why” © Simon Sinek, www.startwithwhy.com

Then do the What what how why Design, Engineering, Content, Research, marketing, product… Chart: Simon Sinek “Start with Why” © Simon Sinek, www.startwithwhy.com

Our core values Focus on Impact Build Social value Be open Move fast Be Bold See why core values matter for your content strategy © Facebook – facebook.com/careers

What we Used to say © Facebook – facebook.com/careers

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

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

What is Minimum Viable Content? Source: Libby Brittain/Sarah O’Keefe

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

The five planes of user experience Chart: Jesse James Garrett © Jesse James Garrett, The Elements of User Experience - http://www.jjg.net/elements/ (used with permission)

where content is seen and used Chart: Jesse James Garrett © Jesse James Garrett, The Elements of User Experience - http://www.jjg.net/elements/ (used with permission)

Where content is modeled and built Chart: Jesse James Garrett © Jesse James Garrett, The Elements of User Experience - http://www.jjg.net/elements/ (used with permission)

Where content is proposed and planned Chart: Jesse James Garrett © Jesse James Garrett, The Elements of User Experience - http://www.jjg.net/elements/ (used with permission)

Where Content Strategy Happens Chart: Jesse James Garrett © 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 © Daniel Olnes - flickr.com/photos/dno1967b/14785722509 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Our Content Principles Use plain language and be concise. © Facebook/Content Strategy

Our Content Principles Use plain language and be concise. Clearly explain how things work and give people enough info to make good decisions. © 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? will I lose my work? Sorry, there’s a temporary issue with your post. Please try again in a minute. Great! So it’s OKAY? How long will all this take?

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

Use plain language and be concise. Clearly explain how things work and give people enough info to make good decisions. © Facebook/Content Strategy Be friendly, conversational and respectful—like you’re talking to a neighbor.

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

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

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

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

Login The best content is invisible © Facebook - http://newsroom.fb.com/news/2014/04/f8-introducing-anonymous-login-and-an-updated-facebook-login/

Login show examples, not concepts © Facebook - http://newsroom.fb.com/news/2014/04/f8-introducing-anonymous-login-and-an-updated-facebook-login/

Login Break Apart big decisions © Facebook - http://newsroom.fb.com/news/2014/04/f8-introducing-anonymous-login-and-an-updated-facebook-login/

Nearby Friends Empathy is hard © Facebook

Nearby Friends Let people opt-in © Facebook

Nearby Friends give them control © Facebook

Content Strategy outcomes Optional and opt-in Shows you value upfront Offers you clear choices Easy to opt-out

We planned for these experiences Chart: Jesse James Garrett © Jesse James Garrett, The Elements of User Experience - http://www.jjg.net/elements/ (used with permission)

So we could build them Chart: Jesse James Garrett © Jesse James Garrett, The Elements of User Experience - http://www.jjg.net/elements/ (used with permission)

For people to use Chart: Jesse James Garrett © Jesse James Garrett, The Elements of User Experience - http://www.jjg.net/elements/ (used with permission)

This is where Content Strategy Happens Chart: Jesse James Garrett © 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 Ease of Use Craft Source: Russ Maschmeyer, Julie Zhuo, Adam Mosseri © Facebook/Analog Research Lab — Russ Maschmeyer, Julie Zhuo, and Adam Mosseri

Let’s Stand up for © Facebook/Analog Research Lab

Let’s Stand up for Starting with Why what how why Chart: Simon Sinek “Start with Why” © Simon Sinek, www.startwithwhy.com

Let’s Stand up for Interaction design User experience Design thinking © K@_UX – flickr.com/photos/k2_ux/8447614776 Creative Commons license: https://creativecommons.org/licenses/by-nc-nd/2.0/

Let’s Stand up for Intertwingling © K@_UX – flickr.com/photos/k2_ux/8447614776 Creative Commons license: https://creativecommons.org/licenses/by-nc-nd/2.0/

200+ free Content strategy resources bit.ly/epic-cs © Billy Rowlinson – flickr.com/photos/billyrowlinson/3193773937 Creative Commons license: https://creativecommons.org/licenses/by/2.0/

Jonathon Colman
@jcolman

1 / 132

Content strategists at Facebook plan, structure, and create content for more than a billion people. But they’re not writers or content marketers—they’re interaction designers, information architects, and UX practitioners. They design and build product experiences that are simple, straightforward and human.

And so can you. Content strategy isn’t just for big organizations. It’s for anyone who’s building an experience. And by using our approach, you can start building better content.

In this presentation, you’ll learn:

How content strategy works in a context of product design and development
A framework for minimum viable content that provides quality and consistency
How to build and iterate on product content experiences to meet people’s needs
How to stand up and become a better advocate for the people using your products

Inspired by Maria Giudice of Facebook, Ian Lurie of Portent, and Jason Mesut of Plan. Based on the works of Jesse James Garrett, Simon Sinek, A.H. Maslow, Kristina Halvorson, Rachel Lovinger, Dan Saffer/Kicker Studio, Erin Kissane, Michael Powers, Sarah O’Keefe, Hilary Marsh, Wouter De Bres, Matt Toback, Eric Ries/The Lean Startup, Dr. Chun Wei Choo, Libby Brittain, and more. Featuring the design work of the Facebook Analog Research Lab, including concepts by Julie Zhuo, Russ Maschmeyer, and Adam Mosseri of Facebook along with content standards from Facebook’s Content Strategy team.

Resources

The following resources were mentioned during the presentation or are useful additional information.

200+ free Content Strategy resources

I’ve collected over two hundred of the best content strategy resources. My goal is to make it easy for you to learn about the field of content strategy, find content strategists and blogs to follow, and, hopefully, start contributing to our community.
Designing Content for Product Experiences

Designing content for interfaces poses challenges that we don’t often see with static content for web sites or marketing collateral. When we work with interfaces, content strategy doesn’t just mean “writing the words” any more than design just means “making it pretty.” Rather, content is inseparable from user experience because language itself is the interface. That’s why we must design content as an experience—not just as a marketing campaign.

In this seminar, Jonathon Colman shares a framework that anyone can use to build useful, usable content experiences for products. You’ll learn the principles of content strategy for interfaces by looking at several real-world examples. And you’ll gain the confidence you need to self-identify as a content designer, so you can act as a user advocate and have an impact with your organization or clients.

Designing Content for Product Experiences

Link for this presentation:

HTML code for embedding:

Share on social media:

Resources

200+ free Content Strategy resources

Designing Content for Product Experiences