large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="https://blog.prototypr.io/msd-univadis-chatbot-how-to-create-a-bot-in-wechat-b32b5385aa65?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Estelle JIN 
UX Case Study, UX Content Strategy, Conversational UI Script Writing.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2aZfoRgTxnfGs0glyFcjfQ.png">
<h4>CONTEXT</h4>
Univadis is a free online medical content platform providing news, tools and education for Chinese HCPs (healthcare professionals).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ADWAvAUuW4v9zVUyNJXStA.png">
In October 2016, our agency won the pitch and were tasked to improve Univadis image and communication strategy in China.
We implemented <a href="https://www.estellejin.com/univadis-chatbot">3 digital solutions</a> within 5 months: a new Registration Page, a Smart Search and a Chatbot. This case study is only about the Chatbot Design.
Date: Launched on March 2017 in China.
Agency: Fred &amp; Farid
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YTrstU4gFcIEr0112wuhOQ.png">
<h4>MY ROLE</h4>
On this project I had to wear many hats as I worked as an Account Manager, Product Manager and UX designer.
We were essentially a 3 people team. I worked closely with two Digital Producers to ensure a smooth collaboration between 2 development teams.
I designed the chatbot architecture, wrote the script in English and corrected the final Chinese version with a copywriter.
(I intentionally omitted some details or strategy content to comply with my NDA.)
<h3>THE CHALLENGE</h3>
(Higher level goal: How to rebrand Univadis as a modern, interactive and relevant platform for busy Chinese HCPs?)
<h3>How to be a Trusted Medical Info Partner for Busy Chinese HCPs?</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/500/1*eS2XSzOyxxlcDhfYs06RFg.gif">
<h3>SOLUTION</h3>
We launched a scripted Chatbot that could:
<ul>
<li>Guide new users to discover Univadis content &amp; tools.</li>
<li>Engage existing users by playing with interactive Medical Quizz.</li>
<li>Help answering FAQ by pushing visual tutorials.</li>
</ul>
Constraints: We worked around strict user privacy policy, limited budget and time (4 months).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*m1D31I2juc8MuFT8bHetSA.gif">
How did we get there?
<h3>RESEARCH…</h3>
…with no budget or how to work around money issues to get the right insights?
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Vul_ai9RAG5GNrM2Bv2PzQ.png">
Who are our users?
2 types of user, 2 worlds.
<img alt="" src="https://cdn-images-1.medium.com/max/926/1*XjJ3A2vlO8suPOsA3AEPqQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/928/1*PJIKTHxp7GexFtNvY7UraQ.png">
“In which context do HCPs use our service?” “What kind of content are they looking for and why?”
<img alt="" src="https://cdn-images-1.medium.com/max/691/1*QHzHsvJVKWU1ulQmadUbdA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pafsBaS5vQ5YJWLbQ9oBjw.png">
<h3>IDEATE</h3>
What to write? How to write it?
With our Art Director <a href="http://www.sonaliranjit.com/">Sonali</a>, we started by testing some successful Chatbots (Poncho, Pepper, Sephora, H&amp;M), WeChat AI bot Xiaobing (developed by Microsoft), WeChat English teacher bot and 2 interactive News app (Quartz, CNN). Here is what we learned:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vNx6bSESPoiiHNQ_aW8XZA.png">Chatbot best practises?
<h4>What’s the purpose of our chatbot?</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*J7wh81FJlAde-zb2MO_I7g.png">
We checked the possibility of implementing a chatbot using NLP (Natural Language Processing) or Artificial Intelligence but decided to start with a scripted bot to test user reactions.
<h3>DEFINE</h3>
<h4>1- Personality, Tone &amp; Manner</h4>
If Univadis was a person, how would he/she be described?
<ul>
<li>Professional but not formal</li>
<li>Like a partner” (not an assistant)</li>
<li>Positive, straight-forward and concise.</li>
</ul>
To keep consistency, we suggested to leverage an existing character named Yibao (=Little Doc’) that brand used few weeks ago on a mobile campaign.
<img alt="" src="https://cdn-images-1.medium.com/max/240/1*yKFhXLPqucXT21qi5s8Gzg.gif">Meet YIBAO (= “Little Doc”).
<h4>2- Bot objectives</h4>
What should he say?
<ul>
<li>Yibao will guide new users. Research showed that new user felt overwhelmed. After doing a card sorting exercise with brand, we realised most content could be regrouped in 2 categories: medical NEWS and educational TOOLS.</li>
<li>To build an interactive and entertaining experience within the limitations of brand guidelines. We decided to create an interactive Quizz with a reward system.</li>
<li>Yibao should help reply to FAQ. We asked the CRM manager and Call Center manager to find the top 3 most asked questions:</li>
</ul>
<blockquote>“I forgot my password, what should I do?”</blockquote>
<blockquote>“How does the basic drugs E-learning program work?”</blockquote>
<blockquote>“How can I bind my accounts? What are the benefits?”</blockquote>
<h4>3- Bot content format</h4>
How should he communicate ? How should the bot behave?
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*X7YzAtR_oh6FSqEI3_d6KQ.png">Content format we would like to create
The first thing that crossed our team’s mind (and they are decent beings) was to insult the bot to test its reaction. That’s why we needed to prepare Yibao to fend for himself.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rsNzj_L27qCWfLb3QyDbHg.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*E6tojhG9YtBmSD8hwRiBaQ.png">We prepared a list of fallback messages for different use cases and run testings to adjust the push timing.
<h3>DEVELOP — Prototyping and usability testings</h3>
<h4>1- Creating the Script Architecture &amp; Content</h4>
Hardest thing I’ve ever done…so if you are currently building a bot and reading this, well maybe I can send you my playlist “let-it-go-no-just-do-it”. Anyway it’s tough, but fun.
We worked in an Agile environment where we prototyped, tested and changed things almost everyday. To keep track of all the comments and prioritise actions, we kept on Google Drive a user acceptance testing (UAT) Xcel sheet shared between our team and brand development teams. Every week we will review the top problems to solve for the coming week and adjust the retroplanning accordingly to keep everyone updated.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*N_vmPgvNQCItptF7exYcuQ.png">
<ul>
<li>Welcoming messages purpose: Self-introduction of Yibao, Set up the tone, expectations management and engage user to discover more.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CzZvamOXKNif2-jvyf5o6w.png">
<ul>
<li>1st Script: Getting to know the user</li>
</ul>
The idea was to know where our user came from to push more relevant content in the future.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FsBECVxbbL52Arv7AiX56Q.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*5BtrsAdfUZIus7WIkO9qSA.png">
<ul>
<li>2nd Script: Main Content = loop zone. Below just an overview of the script architecture in Chinese.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0lzKvth1_Wqc0KNHfmIpvA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tUCp0MslZfvr56gjq7h4tQ.png">
<h4>2- Creating the visual elements</h4>
<ul>
<li>Viral pics: I’m one of the few people who doesn’t love cats…so cat it is. We created 5 options and asked 7 users to choose 3 pictures they most preferred.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*D5w9h4dn_UzUs_gxM9lexw.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*JiksHi_PTvtxhivB9l6mpw.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*y3EWraZXuvyb2WCQQyIGBQ.jpeg">Cat pics: “my pay raise look…” “feeling tired…nap time!”. Quote in Chinese… I’m too lazy to translate in English.
<ul>
<li>E-learning Tutorial: we decided to push a visual step-by-step image tutorial for the 3rd/4th tier cities HCPs (not digital-savvy users).</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0c282Hian7kz9dVEAYDyjg.png">We created a 5 steps tutorial to help E-learning users who are not digital-savvy.
<ul>
<li>Smart Search video tutorial: we also created a 30 sec video to introduce our new WeChat search feature. It will be pushed in the FAQ and serve as a promotional material.</li>
</ul>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FD2tEgQa1N5w%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DD2tEgQa1N5w&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FD2tEgQa1N5w%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="https://medium.com/media/151b68b930337b0fc50cc08f2f58eec9/href">https://medium.com/media/151b68b930337b0fc50cc08f2f58eec9/href</a></iframe>
<h3>RESULTS</h3>
KPIs (coming soon)
A chatbot is never finished, so hope to see lots of iterations.
Special thanks to Loulou, Benoit, Fanny, Sonali, Marie, Nicole, Ismael for their support.
<img alt="" src="https://cdn-images-1.medium.com/max/240/1*6K4UAmYN510_iCIoM17Y1Q.gif">
Thanks a lot for reading, feel free to comment or get in touch!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=b32b5385aa65" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/msd-univadis-chatbot-how-to-create-a-bot-in-wechat-b32b5385aa65">MSD Univadis Chatbot — How to Create a bot in WeChat?</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

MSD Univadis Chatbot — How to Create a bot in WeChat?

MSD Univadis Chatbot — How to Create a bot in WeChat?

CON…

Top Stories