Designing Content for Product Experiences

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

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

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

Slide 4

Slide 4

Stand up if You’re a writer

Slide 5

Slide 5

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

Slide 6

Slide 6

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

Slide 7

Slide 7

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

Slide 8

Slide 8

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

Slide 9

Slide 9

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

Slide 10

Slide 10

How we identify ourselves

Slide 11

Slide 11

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

Slide 12

Slide 12

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/

Slide 13

Slide 13

Let’s be open

Slide 14

Slide 14

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/

Slide 15

Slide 15

“ 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/

Slide 16

Slide 16

“ 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/

Slide 17

Slide 17

“ 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/

Slide 18

Slide 18

“ 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/

Slide 19

Slide 19

“ 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/

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

© 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/

Slide 23

Slide 23

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

Slide 24

Slide 24

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/

Slide 25

Slide 25

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/

Slide 26

Slide 26

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/

Slide 27

Slide 27

Let’s be bold

Slide 28

Slide 28

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/

Slide 29

Slide 29

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/

Slide 30

Slide 30

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/

Slide 31

Slide 31

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/

Slide 32

Slide 32

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/

Slide 33

Slide 33

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/

Slide 34

Slide 34

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

Slide 35

Slide 35

intertwingled

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

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)

Slide 40

Slide 40

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

Slide 41

Slide 41

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)

Slide 42

Slide 42

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/

Slide 43

Slide 43

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/

Slide 44

Slide 44

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/

Slide 45

Slide 45

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

Slide 46

Slide 46

“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/

Slide 47

Slide 47

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

Slide 48

Slide 48

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

Slide 49

Slide 49

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)

Slide 50

Slide 50

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)

Slide 51

Slide 51

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

Slide 52

Slide 52

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

Slide 53

Slide 53

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

Slide 54

Slide 54

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

Slide 55

Slide 55

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/

Slide 56

Slide 56

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

Slide 57

Slide 57

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

Slide 58

Slide 58

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

Slide 59

Slide 59

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

Slide 60

Slide 60

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

Slide 61

Slide 61

© Facebook/Analog Research Lab

Slide 62

Slide 62

© Facebook/Analog Research Lab

Slide 63

Slide 63

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

Slide 64

Slide 64

What we’ve learned

Slide 65

Slide 65

© Facebook/Analog Research Lab

Slide 66

Slide 66

© Facebook/Analog Research Lab

Slide 67

Slide 67

© Facebook/Analog Research Lab

Slide 68

Slide 68

© Facebook/Analog Research Lab

Slide 69

Slide 69

© Facebook/Analog Research Lab

Slide 70

Slide 70

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

Slide 71

Slide 71

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

Slide 72

Slide 72

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

Slide 73

Slide 73

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

Slide 74

Slide 74

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

Slide 75

Slide 75

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

Slide 76

Slide 76

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)

Slide 77

Slide 77

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)

Slide 78

Slide 78

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)

Slide 79

Slide 79

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)

Slide 80

Slide 80

Where Content Strategy Happens Chart: Jesse James Garrett © Jesse James Garrett, The Elements of User Experience - http://www.jjg.net/elements/ (used with permission)

Slide 81

Slide 81

The path from strategy to surface is

Slide 82

Slide 82

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/

Slide 83

Slide 83

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

Slide 84

Slide 84

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

Slide 85

Slide 85

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 Be friendly, conversational and respectful—like you’re talking to a neighbor.

Slide 86

Slide 86

Does this sound like us? Error 24601: Neg Fault Config ^n2.1x

Slide 87

Slide 87

Does this sound like us? Error 24601: Neg Fault Config ^n2.1x LOLz, 404 #YOLO

Slide 88

Slide 88

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.

Slide 89

Slide 89

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

Slide 90

Slide 90

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

Slide 91

Slide 91

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

Slide 92

Slide 92

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

Slide 93

Slide 93

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

Slide 94

Slide 94

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?

Slide 95

Slide 95

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

Slide 96

Slide 96

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.

Slide 97

Slide 97

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/

Slide 98

Slide 98

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

Slide 99

Slide 99

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

Slide 100

Slide 100

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

Slide 101

Slide 101

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

Slide 102

Slide 102

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

Slide 103

Slide 103

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

Slide 104

Slide 104

Nearby Friends Empathy is hard © Facebook

Slide 105

Slide 105

Nearby Friends Let people opt-in © Facebook

Slide 106

Slide 106

Nearby Friends give them control © Facebook

Slide 107

Slide 107

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

Slide 108

Slide 108

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)

Slide 109

Slide 109

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)

Slide 110

Slide 110

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

Slide 111

Slide 111

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)

Slide 112

Slide 112

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

Slide 113

Slide 113

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

Slide 114

Slide 114

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

Slide 115

Slide 115

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

Slide 116

Slide 116

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

Slide 117

Slide 117

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/

Slide 118

Slide 118

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/

Slide 119

Slide 119

Let’s Stand up for Better content

Slide 120

Slide 120

Let’s Stand up for Better content

Slide 121

Slide 121

Let’s Stand up for Better content

Slide 122

Slide 122

Let’s Stand up for Better content

Slide 123

Slide 123

Let’s Stand up for Better content

Slide 124

Slide 124

Let’s Stand up for Better content

Slide 125

Slide 125

Let’s Stand up for Better content

Slide 126

Slide 126

Let’s Stand up for Better content

Slide 127

Slide 127

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

Slide 128

Slide 128

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

Slide 129

Slide 129

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

Slide 130

Slide 130

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

Slide 131

Slide 131

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

Slide 132

Slide 132

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/