Introduction

Hi everyone, Mark here from Voiceflow with a really great template that will surely be popular among kids and families alike.

As smart speakers continue to skyrocket in popularity, a growing number of parents and teachers are leveraging voice assistants as powerful learning tools both inside and outside the classroom.

In a world full of distractions, voice technology introduces a fun, engaging, and educational experience that allows kids to take control of the conversation.

In this template, we dive into a few ways you can leverage voice, visuals, and audio to build your own engaging children's experience. Let's dive in.

What are we covering in this video?

At the core of the experience, the Animal Wiki template is a quiz game where you're asked to listen to the sound of a random animal, and then guess what it is. A great exercise for kids — who can enjoy listening to the delightful noises found within the animal kingdom and the adorable images that accompany them.

In this video, we'll show you how to use the Animal Wiki template by walking through a few simple steps including:

1. Creating flows and updating slots (to add new animals)
2. Using the audio and visuals steps to customize the experience
3. Training your assista
4. And testing and sharing your experience

Design Walkthrough of Template

At the start of the experience, we have a welcome message – introducing the user to the experience. It is then followed by a choice step. After the choice step is activated, it triggers the random step, which randomly triggers a sound associated with one of the animal flows. All of the potential answers (animals) are then stored to the right of these steps. This makes it easy for you the designer to see which animals are potential swers, It also keeps your canvas organized for when you might want to add more animals into your gaming experience.

Let's take a closer look at what's happening. After the welcome message we have a choice step — which asks the user if they are ready to play. We have also included an error or repair path using the red Speak Step. The repair path handles unexpected user responses and works to get the user back on track.

Our happy path starts from the yes port in our choice step. In this experience, the happy path allows a user to play the game for as long or as little as they like. Each time a user goes through the flow, they're asked to guess a sound. When that's correct, the flow then retriggers at the end of the experience. It is here that you're able to ask: "do you want to try with another animal". This loop mechanism makes it really easy to design a single experience that plays back several times.

But what about all these steps in the middle? That's the game logic which includes a random step that randomly selects a path to an animal flow. Once the user completes that animal flow, the assistant will jump back into the home flow where they will ask the user: "do you want to try again."

When it comes to the animal flows, they each follow the same structure in terms of how they're designed. The difference here is in how each flow is customized to the animal it is assigned to. This includes setting the right animal and sound variables as well as changing uploaded audio and display visuals.

Finally, we've also added a condition step to check if the user's answer is correct or not.

Let's now walk you through how you can add a new animal of your own!

1. First, we need to add a path to the Random Step.
2. Then, head toggle to flow view in the steps menu and duplicate one of the animal's flows. You can do this by right-clicking a flow and clicking duplicate. You're going to want to rename this. Let's type Whale.

1. Next, we need to change the animal sound variable values along with the audio URL and display visual. I can change the variable value by replacing sheep with whale in the set step editor. We also need to change the sound to sing.

‍

1. For the audio step, we'll be using the audio link from the corresponding Wikipedia page relating to Whale Sounds found here.

1. For the last step, we need to open up the visual editor and click the X to remove the previous image. We can then drag in our custom whale graphic.

Now we need to head back to the home flow, which you can access by clicking the arrow in the top left of your screen. Once there, we want to drag a new flow step onto the canvas. Let's rename this Whale.

For this to work properly, we need to link the new path from the random step to our new flow step. We also need to link our whale flow to the speak step labelled 'Again' — which allows the user to restart the loop and play again.

Next, we need to select the flow and link it to the Whale flow we just created. Great! We're almost there.

Last, we need to update our interaction model. For this, we'll need to add the new animal name — so "Whale" — to a custom slot. We can open the interaction model by clicking "M' on our Keyboard. Then, select the "Slots" tab. The only slot we have in the project is the animal slot. This is the one we want to update. As you can see, we have all the animal names available in the game along with a few slot synonyms for animals that require them.

Scroll to the end of the list and click on "add custom value". Here we will add the Whale. This will also allow the assistant to recognize Whale as an animal when the user answers. Perfect — we're all set. Now let's test this experience in Voiceflow's test tool.

Prototyping the Experience

Before we dive into the test, let's first train our Assistant to account for the new Whale flow we just created.

We're going to test this experience using Voiceflow's one-click sharing — which makes it super easy to share your project with anyone. To test this experience using Voiceflow's share view, we can simply click the share button at the top right of the screen and then set the test type to Voice and Visuals. Next, we'll open this up in a new tab. Now we can put ourselves in the shoes of our users while testing the experience.

Assistant: Welcome to Animal Wiki. Get ready to listen to the next sound and try to guess which animal it is.
‍Assistant: Are you ready?
‍User: Yes.
‍Assistant: Great. What animal makes this sound.
‍Assistant: [Plays audio clip: barking]
‍Assistant: What animal makes this sound?
‍User: A dog
‍Assistant: Correct. That's the dog.
‍Assistant: A dog makes a bark, howl, growl sound.
‍Assistant: Ok - do you want to try with another animal?

Wrapping up

That's an overview of our Animal Wiki template. Educational voice experiences like this can play a significant role in increasing engagement and success across any age group, and so we hope this motivates you to design a quiz game of your own!

If you want to learn about more ways you can build with Voiceflow, check out our templates library! It's entirely free and serves as a great resource to help build out the vision of your next project.