{"id":14944,"date":"2018-05-31T10:38:02","date_gmt":"2018-05-31T09:38:02","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=14944"},"modified":"2020-09-22T09:57:32","modified_gmt":"2020-09-22T08:57:32","slug":"interactive-chat-new-content-type","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/interactive-chat-new-content-type\/","title":{"rendered":"Interactive Chat as a New Content\u00a0Type"},"content":{"rendered":"

After well over six months of an incredible effort, Al Jazeera rolled out public beta version of a set of sophisticated tools that allow to compose and publish an entirely new type of content \u2014\u00a0a scripted interactive chat<\/strong>.<\/p>\n

The goal of the entire endeavour was to create a more engaging and inclusive storytelling experience<\/strong> around the interview format. We worked under the premise that we can achieve that by letting the readers seemingly directly interact with the characters at the heart of a story<\/strong>. All through one-on-one message exchanges.<\/p>\n

As the user experience designer and front-end developer on the project I had the pleasure to help design and build the ground-breaking product. Here\u2019s my take on it.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

Welcome InterviewJS<\/h2>\n

InterviewJS<\/a> puts readers at the heart of a story allowing them to seemingly directly engage with the characters involved via a chat-like app. Of course, chats have been around for a while but the possibility to script a conversation, then edit, publish and share it \u2014 like you\u2019d normally do with a blog post \u2014 is completely new.<\/p>\n

Al Jazeera\u2019s product is a workflow tool that allows to create and distribute scripted interactive chats the same way that WordPress does with plain articles. It\u2019s both an editor and a publishing platform<\/strong>. You can sign in, compose your piece and publish it as you\u2019d do with a blog post.<\/p>\n

Access to the platform is entirely free<\/strong> which enables anyone to start composing scripted chats. Best of all: Al Jazeera is completely opening the source code<\/strong> which means that you can easily fork the code repository<\/a> and contribute back with pull requests or simply set up your own instance of InterviewJS.<\/p>\n

The scripted\u00a0chat<\/h2>\n
\"\"<\/a>

InterviewJS scripted chat\u00a0sample<\/p><\/div>\n

A scripted chat is an interactive chat based on a real interview transcript or a script designed by the storyteller. End-readers interact with the interviewees directly by making comments and asking questions as if they would be leading the conversation<\/strong> when, in fact, they\u2019re following a path set out for them by the creator of the story. Readers\u2019 choices have effect only on the order in which the content is being served<\/strong>.<\/p>\n

Such chats allow any kind of content \u2014the reader can request and receive not only texts, but also links, images, videos, maps and other embeds<\/strong>. And although it enables scripting questionable story scenarios \u2014 where, for example, Barack Obama sends you an animated GIF\u2014 it does empower storytellers to craft their stories as they see fit.<\/p>\n

What it\u2019s best\u00a0for<\/h2>\n

InterviewJS works best on stories with a few characters, preferably with contrasting views<\/strong> but not exclusively. In fact, one of InterviewJS pilot stories is a one-on-one interview with Snowden<\/a>. Stories where multimedia, maps, videos and links are being shared by interviewees are likely to be more engaging for the end-reader.<\/p>\n

And although InterviewJS is a tool created by journalists for journalists, it doesn\u2019t mean that it doesn\u2019t work for anyone else. Quite the opposite. And so I\u2019m interested in seeing the non-journalistic stories people may be creating with it. I see it being useful in education, as an innovative take on FAQs, an element of an escape room experience or\u2026 you name it!<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

InterviewJS ecosystem<\/h2>\n

Our work on InterviewJS involved creation of four different packages, each living its own life in a dedicated environment:<\/p>\n

    \n
  1. The Story Composer\u00a0<\/a>\u2014 the only area protected by an authentication provider where story creators can sign in to manage, compose, edit and publish their stories.<\/li>\n
  2. The Story Viewer \u2014 used to render published stories. It takes dataset of a story created by the journalist and renders it as a navigable, interactive chat application. Each story has a unique URL where it can be accessed. And \u2014 as stories are not publicly listed anywhere \u2014 your piece remains secret unless you share it.<\/li>\n
  3. The Style-guide<\/a> running on Catalog\u00a0<\/a>\u2014 a \u201cliving\u201d design documentation and front-end architecture reference. It lists the library of custom-made reusable React components we developed and used to assemble InterviewJS\u2019 UIs.<\/li>\n
  4. The public-facing website: https:\/\/interviewjs.io<\/a><\/li>\n<\/ol>\n

    The process<\/h2>\n
    \"\"<\/a>

    At one of our team\u00a0meetings<\/p><\/div>\n

    InterviewJS is a fruit of work of an incredible team<\/a> of journalists, producers, designers and developers spread across 5 countries and just as many time zones. We did occasionally meet in person \u2014 thought not altogether at once \u2014 but most of our collaboration was remote<\/strong>. Aside from the occasional team gatherings in London and Doha, we mainly used Slack<\/a> and email to communicate and appear.in<\/a> for our meetings and remote usability testing<\/a> sessions. It all worked wonders with only a few occasional glitches.<\/p>\n

    Design<\/h2>\n

    Our design phase went on for a little over two months. We worked off of early sketches created internally at Al Jazeera that I took as a base for subsequent design iterations. They were not \u201cprescriptive\u201d \u2014 as Juliana Ruhfus, the coordinator on the project, continuously stressed out from the early days \u2014 but I found them to be visionary and they shaped greatly the direction in which we went with the polished designs.<\/p>\n

    \"\"<\/a>

    Early sketches by Juliana\u00a0Ruhfus<\/p><\/div>\n

    From then onwards, I\u2019d use Paper<\/a> to draw rough sketches and early wireframes and Sketch<\/a> to design the user interface. While we\u2019re at it, it\u2019s worth mentioning how I found prototyping message exchanges incredibly frustrating and counter-productive. After a few trials I quickly began avoiding to prototype the editorial elements of the product and focused on the core UI<\/strong>.<\/p>\n

    \n

    Wondering what\u2019s the best approach\/process people follow to prototype chatbots. Because it can\u2019t be this: pic.twitter.com\/A9uMceGyob<\/a><\/p>\n

    \u2014 piotr f. (@presentday) October 26, 2017<\/a><\/p><\/span><\/blockquote>\n