Designing a Tool that helps children understand how Chatbots work. The tool would also assist Teachers, helping them to teach subjects that involves fictional or non-fictional characters(Such as History classes) to young children.

Overview

Part of my Project Assistantship with Professor Mark of the Department of Computer Science and Engineering, University of Michigan. Back in Winters 2020, my task was to design a tool that will be used to teach Children how chatbots or Voice Ai like Alexa Work. I was provided with the details on what learnings are to be provided to children and a possible direction.

The Task

1 Virtual Assistants are the future and there is no denying in that, Mass rollout of Alexa and Bixby are just the start of how this technology will be affecting our lives making it simpler and more efficient, Specifically Virtual Assistants in the form of Chatbots. Every business is opting for chatbots for their business operation as it reaps multiple benefits, from ordering food to filing an online complaint to asking for news and suggestions.

Realising it’s potential, it’s important we teach children from a very young age about their(Chatbots) working. Hence, the goal outlined to me was to design a possible web-based tool that will empower children to create multiple chatbots or Virtual Characters, understand their basic working and share it with their friends.

2Second indirect goal is to assist teachers and professors. When it comes to subjects like History or Language for children, the course generally involves learning in and around different Characters(fictional or non-fictional), and to better understand these subjects, having virtual conversations with the characters is one good way. Children either talking to premade characters on the tool or they themselves creating these characters from their subjects(for example, creating a character bot for Napoleon from their History classes) and then thinking all possible answers such character could give to them. All in all, helping both faculty and students for better learning and teaching experience.

Outlines

Chatbots are really just programs that take in words from a user and match those words to a pattern. By changing the patterns and what the responses are, you can change the personality of the chatbot or the character you imagined.

With some possible directions of how the tool could be shaped was provided to me I started my Quest, below are some of the project outlines provided to me.

1) Designing for Children

2) Designing only for the specific Trigger word type of learning

3) Tool needs to web-based, to be used on your Laptop/Desktop screens

Tackling the Problem

Creativity

Designing a tool that Motivates kids to be more creative was not an easy task, paths opted to achieve the same for added Incentives through proposed Leadership board or connecting them globally with the community so that they get more inspiration. Allowing cross-communication between different Bots/Characters for collective creativity.

Community

For better learning it was important that users are provided with a maximum number of Possibilities or Chatbots that could be created using the Tool, enhancing the sense of Community or learning together.

With exposure to different ideas and different perspectives, students would try to learn more have a sense of Competition and would broaden up their outlook, they will build more friends.

Visual Identity

Keeping the target audience in mind, it was important that the visuals of the tool directly cater to them, due to lack of resources and outlines given to me, I had to resort to only Desk research on what design amuses the most to my target audience. It was important to take precise care of colours and contracts along with how we are applying UX writing.

Initial Concept

At first, the concept that I presented was a lot different with finalised one, Less focus was emphasised on Community and colours and More focus was put on the process of creating the bot. Presented initial designs and Ideations to 5 respondents (Including Target Audience and the professor I was working under) and was amazed to see the inputs provided by them, finally made multiple modifications that lead to final Design Version 1.

Final Ideation

Below is the representation of Tool IA and Main User flow along with Visual mockups of some important sections of the Tool to help understand it better.

Visual Iterations (V1)

Below is Visual mockup for Main Navigation tab, constant on all screens.

Explore, the first screen you encounter

Explore Section or the first screen you’ll as a user sees on your first visit to the Web tool, curated keeping the possible situation and user goals (at that moment) in mind.

Register to view Homescreen made for you

At all steps, it is encouraged that as a User you register or Provide Classroom PIN if you have one. This helps us to store data allow them to make friends and participate in active communications.

Your profile and your classroom

The register button is replaced with My Profile, allowing users to view their progress(Drafts) and the characters along with the Conversations they made.

Classroom Page is administered by the school itself, it empowers teachers to give assignments to students. Students can see Characters/Bots created by other classmates.

Let's Create a Virtual Character

Characters or Bots could be created from Scratch through create Tab. At multiple steps tutorial links and Guides are present. For the creation process, a straightforward process was followed:

Choosing Character Language(Beta)

Naming the Character

Duplicating Code, Selection of Character type

Drawing or Uploading the Character Picture

Choosing a Theme

Input of Commands

Input of Commands

A process where tool takes in words from a user and match those words to a pattern. Much emphasise was put on Trigger and Response keywords which can also be classified as rules for the Bot, adding more rules to the bots’ programs give them more kinds of responses, more personality.

Note: Special programming Language only for this tool was Ideated and was provided to me by my mentor.

Example, When an example Character is told that it is fictional (e.g., “You are a fictional character” or “You are not real” — maybe matching on any of the words “fictional” or “real”) being the trigger words, perhaps it may say something witty like, “And you are?” or “What is reality, anyway?” or even “Reality is over-rated”, these being the response words.

When Alexa is asked “tell me a joke”, she might use a long response to tell a multi-line joke.

Example Commands

if match any of hello, hi
brief response Hello. I'm waiting.
end match

If a user types “Hello” into the input, then presses Send, the word hello will match one of the two words (“hello" or "hi"). The character will then respond Hello. I'm waiting. The command end match signals the end of that check.

Multiple line responses are long response and brief response are of one line. End response indicates the end of what the chatbot should say and End match indicates the end of a check.

If none of the matches work (the user said something unexpected, the respond randomly command will match and the chatbot will say one of the single-line responses fed to it.

Tool Window

finally, you encounter with the character you just ideated through the Tool window. All necessary functions to save or publish it are provided. Much space was allocated to induce clarity in minds of children regarding how the Bots are responding, simultaneously telling them which specific word acted as a trigger word in their conversations.

Takeaways

The project allowed me to work on a topic that I’ve never worked before and for the audience that too was very new to me. These four weeks of designing not only helped me understand many new concepts of Chatbots and their workings but more importantly a lot about how to design Teaching Content and Conversations.

if you enjoyed my work so far, shoot me some feedback!

Aditya Bansal

Interaction Design student at Delhi Technological University

Reach out to me at [email protected] or at adityaban.com