CNN & Outbrain for Chat

Creating the solution for publishers to reach readers where they hang out: 📱 Facebook Apps

MY ROLE: Product Design and UX Research/Testing

PRODUCTS: B2B Web App, SaaS, Dashboard and End-User Experiences - (All 0-1)

ACCOLADES: Presented by Mark Zuckerberg at F8 Conference (2016) and Digiday Publishing Awards Finalist

THE PROBLEM TO SOLVE

How can publishers keep up with the ever-changing content distribution landscape and reach readers within apps they already use?

How can publishers stay informed and in control as their content is increasingly discovered and consumed outside their properties?

Messaging is a natural environment for people to not only connect with friends but also to consume the content they want.

THE CHALLENGE

At Outbrain, I was the Product Designer for "Outbrain for Chat", the driving technology enabling publishers to seamlessly launch conversational applications (or Content Bots) across the leading messaging platforms (ie. Facebook Messenger, Telegram, WhatsApp, KiK, etc.). and reach readers within those apps.

My challenge was to:

Define and design the platform for Publishers to be able to customize the reader experience through Editorial controls. A turnkey solution, meaning no development work required from our Publishing partners.
Design the end-user experience (powered by our Sphere API) to surface personalized content recommendations.
Create the Reporting Dashboard on Users and Content and make various permutations of the data accessible and intuitive.
Create the design language for all chatbot partnerships.

The Solution

The platform I created involved 4 components: Sphere, The ECMS, The Experience, The Dashboard

🧰 SPHERE SELF-SERVE & BACK OFFICE

Sphere Self-Serve was the platform I designed prior to our launch of Outbrain for Chat. It was created for third party developers to build apps using our Sphere API (our content recommendation engine). We built Outbrain for Chat as an integration into Self-Serve due to the platform's app/API token management, reporting capabilities, and the Back Office (app approval/management) tool.
‍
Here are the prototypes created for testing with users, and eventually hand off to our development team with the high-fidelity Sphere design system:

‍Sphere Back Office Tool (for App Management):

BO Low-Fi Prototype >

‍Sphere Self-Serve Tool (for 3rd party developers):

SS Low-Fi Prototype >

Back Office Database Updates »

🤖 THE ECMS (Scriptwriter)

With the new Outbrain for Chat, we introduced a new capability to the platform: The Editorial Chat Management System (ECMS, also called "The Scripwriter"). The ECMS allowed publishers and 3rd party developers to combine editorial programming and true content personalization and discovery, by customizing the reader experience through editorial controls in a "scriptwriting" format. I designed it to simulate a decision tree flow for the editor and a "choose your own adventure" experience for the reader, allowing a unique interactive content experience.

The Scriptwriter supports:

Creating, editing and managing scripts
Managing Keywords (these words or phrases entered by the end-user in the chat, trigger a fixed editorial response) - these keywords can be created, edited, enabled/disabled.
Curating story paths
Personalizing Content

INTRODUCING SCRIPT MANAGEMENT INTO SELF SERVE: For the Outbrain for Chat Platform, I needed to integrate a new option for users to create an app of type "Bot" into the Sphere Self Serve tool. These are iterations of that newly introduced user flow.

Once a user has setup a Bot app in the Self-Serve tool, the user can create and manage scripts. Here is my mapping of the Scriptwriter tool ecosystem and necessary features. This project was very wide in scope in order to fulfill the requirements for building a chatbot app on our platform:

THE SCRIPT MANAGEMENT SYSTEM: These are a few screens for managing scripts, pushing to chat platforms, tracking delivery and managing keywords.

THE SCRIPTWRITER (ECMS): Create and edit scripts, curate story paths, personlize content

💬 THE EXPERIENCE

When creating a chat bot in the scriptwriter, the user is building an experience that resembles a flow like below, where there is a call and response for every interaction by the end user. The Scriptwriter is designed to create these journeys and decision trees for input-output. Here is one example of dozens of flows I created for the CNN Chatbot I designed. I collaborated with my colleague, Mike Mathis, UX Researcher at Outbrain, to gain qualitative insights on the user experience. You can see some of that work here on his site.

REAL-TIME, SMART & NATURAL: The end-user experience is dynamic, presenting users with the latest news and most interesting stories, based on the individual's preferences and learned interests. Users can view, save for later or read the articles within the messaging app. The experience also gets more personalized with each interaction, and engages the users in a natural, conversational way.

📊 THE REPORTING DASHBOARD

Developers and publishers who build their apps in our Self-Serve system have access to detailed data & analytics on users and content. Metrics include New vs. Return Users, Participation Rate, Week-over-Week (WoW) Trends, Content Performance, Total User Interactions, Content Consumed/Clicked, and Trends in usage.

OUR SUCCESS CRITERIA

✅ Compete with other platforms for the Partnership with CNN for their launch at F8.

✅ Reach 20 third-party apps developed using our Sphere API and Scriptwriter within 4 months. (24 were developed! woohoo!)

Our team partnered with CNN and Facebook to deliver users of Messenger a personal news experience, built on Outbrain for Chat.

🚀 Primetime at the F8 Conference

At Facebook’s F8 developer conference, Mark Zuckerberg presented Bots for Messenger, a tool that allows users to do close to everything such as order from 1-800 Flowers, shop for sneakers, as well as chat directly with major publishers like CNN to get breaking news and personalized stories.

‍THE CHALLENGE:
‍Design a bot on the Messenger Platform for CNN’s editorial team for release at the Facebook F8 Conference in 2016.

MY ROLE:
As the product designer for the CNN chatbot, I was responsible for:

Defining and designing all the user flows (registered, non-registered, cold start, null, subscribed return, unsubscribed return, entered through CNN, etc.)
Defining the decision trees for all conversational inputs.
Copywriting on structured messages and buttons (w/ editorial guidance from CNN)

THE SOLUTION:
The bot was built on Outbrain for Chat, using our robust editorial programming tools, such as polls, quizzes, sentiment “analysis”, custom messages, stories and snippets. In collaboration with our PM, Developer and 2 Editors from CNN, we created a high-signal, personalized chatbot for CNN's launch at F8.

✨ The Results

since launch until September (6 months later):

2MM

Clicks per day

10-15%

Week-over-week growth in total users

≥90%

User retention within 30 days

Digiday

Finalist in the 2016 Digiday Publishing Awards

IN THE PRESS

A CAREER HIGHLIGHT for everyone (yes, I'm speaking for them) on our innovation team at Outbrain! April 2016 was an exciting time for us all, and months following the launch.