Chatbot

Meet Helix, the math bot, who teaches, challenges and guides 5 to 6 year old playing math app. His fun, relatable personality finds ways to reel in those preschoolers’ emotions that can change on a whim.

“I am a 5 year-old preschooler and a visual learner. I need a learning tool for math that is easy to understand and makes learning fun.”

— Dylan, A Kindergarten Student

Initial Discovery Phase

THE FRAMEWORK

How might we make learning new math concepts fun for a preschooler? The math bot, a.k.a. the math app personal assistant, seemed like an obvious use. Yet, Helix did not come to life until later in this project.

Looking into the competitive landscape for preschool math games. Here is a sampling of in-game cues found: 1) Audio instruction to understand directions and how game works, 2) cartoon hand illustrating game play, 3) pulsating and swishing to indicate actionable item, 4) objects automatically moving to indicate motion.

What is our game development opportunity for the real differentiator? Enter the chat bot, our app's role model and personal assistant.  He is a parent’s companion for teaching their preschooler math concepts. Sometimes kids may tune out those closest to them. A new teacher is much welcomed.

Building A Chatbot

 
gesture control@3x.png

Developing Motor Skills

80% of children between ages 2 to 4 are mobile device users and proficient in all 7 gestures—pinch, tap, flick, scroll, slide, drag & drop  and spread.

confused emoji@3x.png

Content is Not King

Keep text instructions to a minimum to avoid cognitive overload. Language should be simple and geared to users reading mastery at this age level.

sentiment range@3x.png

Tuning Into Emotions

Learning to regulate emotions is more difficult for some children than others. They are more emotionally reactive and sometimes harder to calm down. Emotions can quickly swing from one spectrum to the other.

 

Workflow Sequences

The Gameplan

 

Interesting Fact: In the ancient mathematics, space was a geometric abstraction of the three-dimensional space observed in the everyday life.

 

Dream it.

How can we build an experience for a child with varying development milestones? I start to map gameplay sequences before developing any low-fidelity mockups and to really understand flow of the game. At this stage of UX process, a chatbot solution is not even on the radar. Functional areas like pulsating for game cues and shaking motions to clear (or start a problem) are explored. Also, the preliminary brainstorming had VR in the equation for a 360 degree virtual classroom.

Build it.

The name of the math app is SPACE. The 360 canvas would be the space where preschooler could slide numbered circular shapes on top of each other to form a planet and to solve the math equation. The more problems they complete the bigger their universe becomes.

Math problem workflow@3x.png

Aha Moment

What’s the one thing that is predictable with preschoolers? It’s how their emotions can go from one extreme to another instantaneously. Here’s where Helix originates and the emotional journey map begins to evolve. The horizontal axis represents the steps through time and the vertical axis shows themes for analysis. Virtual post it notes start filling in everything from pain points to happy moments. It’s all about understanding our user to create that meaningful experience. This will be the ultimate learning tool built on player empathy.

Emotion game map@3x.png

One, Two, Map My Chat

NATURAL LANGUAGE CONVERSATION FLOW

Diving into the emotional journey map led to the next phase of conversation and gameplay workflows. It is important here to understand what type of system or user actions would elicit certain conversation workflows. At what point in game will our preschooler get stuck? How can we redirect with math bot? Where do we need to insert in the game guidance and help? Inline prompts and auto-complete can help aid and keep the experience seamless with preschooler and mathbot. It is important to take into consideration different reading and comprehension levels at this age.

Chat conversation flow@3x.png

Helix, Got Game

SPEAKING IN EMOJI

The one thing we need to give our mathbot is a personality. He can’t be overly ntrusive and totally robotic. It makes sense for him to be a robot character in our SPACE math app. His personality is fun and on the level of a 5 to 6 year old. Use of emojis make it easy to communicate and grab preschooler's short attention span. Here is where we start to develop that preliminary language before building conversations in Dialogflow. Now is the time to start thinking about copy, style, voice and language.

Helix's personality type is agreeableness on the Big Five personality traits. This personality works best with preschooler whose emotions change from happy to frustration to temper tantrum on a whim. Able to talk on preschooler’s level and redirect. Has a soft heart, playful and entertaining to keep 4-5 year old entertained. 

Emoji language for chatbot@3x.png

Helix, to Ground Control

CONVERSATIONAL USER INTERFACE (CUI)

The intent or use of a chatbot is not just to strike up a friendly conversation. In human conversations there is an informal flow and may not always have a purpose, i.e. small talk. Chatbots have function and are task oriented. Their use is to be user’s personal assistant or guide in tasks/events and to make everything easy. Wait, this doesn’t mean our chatbot can’t have a personality. This is where the magic starts and considerations for preschoolers emotions come into play to build conversation samples.

There is a syntax in UI conversation scripts. I started building the simple responses for each utterance for the user and the bot’s responses. Here are where the variances in conversation and different scenarios are created and AI training starts.

The piloting phase of building the Natural Processing Language (NPL) is shown in examples below.

 

Let’s Go

Here's where I start creating game actions to start filling in conversations for each trigger API.AI.  The onboarding is where we would educate and introduce how messaging with Helix in gameplay works. The anticipated emotional state of user would be indifferent at game start. The more our user plays game and interacts with bot, the better Helix can learn his preferences and tweak the experience over time.

Helix can be voice activated or summoned with in app messaging. System triggers can also start the conversation with user.

I wanted to focus on the microcopy to have Helix possess his own unique personality. When a preschooler is upset they throw tantrums and can hurl stuff too. If device is shaken or some abrupt movement happens, this could be system trigger for Helix to message something funny or silly emoji or simply ask "are you ok?"

Bot Learning + Intent Mapping@3x.png

Good Intent-ions

The gameplay conversation scenarios are built into the API and different conversation variables developed. 

Start Game@2x.png

😐

EMOTION: NEUTRAL

Personalized greeting.

During onboarding parent answers quiz to inform algorithm about math aptitude, plus insight into temperament and personality.

Help@2x.png

🤔 😕❓EMOTION: CONFUSED

Text or voice cue of help (similar NLP) or emoji symbols to start conversation.

System actions or events, plus user actions trigger tutorial video screen load for show and tell.

Mathbot shows tutorials with micro interactions for ways to merge shapes and solve part/part/whole concept.

Wrong Answer@2x.png

💢😬😡EMOTION: FRUSTRUSTION

Mathbot pops up to give positive reinforcement and redirect.

Shaking mobile device or a long pause signals user may be frustrated or stuck in gameplay.

Right Answer@2x.png

🙌🏽 😃 ❤️ EMOTION: HAPPY

Scoring and leader board is private and only parent and player can see.

Player can type message or enable dictation to start conversation.

 

Design Thinking
Conversational Design
Product Design

Previous
Previous

Wearables

Next
Next

Services Microsite