Nat, Conversational Projector Robot

Nat is a conversational learning robot and projector that comes loaded with content for National Geographic Kids. Its multimodal interface allows children to lead with their curiosity and intuitively explore their world.

I worked on both product design and UX. As a team, we created a complex conversational flow that demonstrates how Nat would handle communication with kids, from the happy path to error states.

Roles: research; user personas and interviews; customer journey map; conversational flow; illustration system; motion; landing page; packaging; and manual.
Skills: Adobe Illustrator, InDesign, After Effects, JS, CSS
Timeframe: 8 weeks
Collaborator: Amanda Welch

01. Description

Nat smoothly and safely navigates Nat Geo Kids content ranging from wild animals to the latest scientific discoveries. Its multimodal interface allows children to lead with their curiosity and intuitively explore their world.

Gif image of Nat's Landing Page

02. Challenge and objectives

Challenge/Problem: Design a toy robot which speaks to children and teaches them a certain subject. Do some research. Make it age appropriate. Create a design system of components and illustrations. Make a 60+/- second video of how it works + landing page.

Project Goals and Objectives: In just 6 weeks we had a lot of tasks for our team of two. We were to create Nat’s model including all robots features, conversational flow and packaging, and test the concept with real families. Also our assignment included creating a design system, branding, landing page and animated promo video for Nat. We also decided to create a prototype of a desktop application that would be used by the parents. After the school project was over, we spent three more weeks on the additional elements that felt necessary for the product design, including packaging design, quick user manual, more detailed and specific conversational flow and even a display for the final portfolio show. We have met with industry experts twice to get a feedback on the conversational flow, and modified it based on their suggestions.

Deliverables: concept; research; Nat’s model; design system; logo and branding; illustration system; packaging; user manual/quick start guide; landing page; conversational flow; user testing; motion video – promotional piece; onboarding screens prototype for a desktop app.

Project Background and Description: Nat is a conversational learning robot and projector that comes loaded with content for National Geographic Kids. It is targeted towards  7-13 year olds but could be interesting for anyone who wants to learn more fun facts about nature, so it is 7+. Nat both talks and projects images and videos on the wall by request. It can be used both at home or at school but in our project we decided to focus on use at home.

Illustration of children using Nat

03. Process

Step 1. Concept and research.

We were tasked with creating a conversational robot for children but the scope was broad and allowed a lot of room for our imagination. Amanda and I came to the idea together while drinking coffee at Ada’s coffee shop on Capitol Hill. At first, we wanted to create a robot that teaches children how to code, but after a brief research online and in some stores around Seattle we were impressed by how many robots like that already exist. We were still happy to conduct the market research because we learned a lot about marketing toy robots but we decided to create something different. We started to talk about ourselves as children and realized that we both were really excited about nature, animals and National Geographic, and that’s how the idea of Nat came to life. Also it was an interesting challenge to build a new concept under the umbrella of the existing brand, especially such a strong brand as National Geographic.

Another part of the research was the look of the robot. Amanda and I had a lengthy discussion about toys. We found a few articles from psychologists, and most of them weren’t happy about children who consider their toy robots as living creatures. It’s a territory that is not researched well enough, and we decided that we don’t want to make Nat look too much like something real and living. We wanted Nat to look more like the robot, that he actually is.

Nat’s look was inspired by the design of the Thirty-Meter Telescope, which will be the world’s largest telescope in 2022. I modified the look of the telescope to our needs considering the functionality that Nat is supposed to have. During the next stage of the process, I made some edits to Nat’s appearance based on the additional details that we needed such as specific light indicators, usb-c slot etc. Some of the iterations:

We have also created user personas based on our initial research. Later we interviews two families that were a great fit to our user personas as well. Customer journey for one of the user personas is based on Internet research and  assumptions, but was a helpful Northern star for us when we were working on the product design.

Step 2. Branding and design system.

The design system was based on redesign plans that we found for the National Geographic Kids brand (currently they are still undergoing rebranding process). Nat was designed to fit in the Nat Geo Kids brand. Also, an illustration system was created for making all the assets we needed for the landing page and promo video.

We divided our responsibilities: Amanda was working on the logo and type, while I was working on building an illustration style that could be quickly used for all our purposes including After Effects animation. I challenged myself to use Bodymovin plugin for After Effects for the first time, and that meant that the shapes had to be all vector-based without using a puppet tool or 3d-camera. So, I kept the illustrations simple, and the color palette clearly geared towards children as I used mostly primary colors and high contrasts.

Step 3. User interviews.

Neither of us have children, so we decided to talk to someone who does before we went too far in our process. The first interview was arranged for week two, when we only had the detailed concept of how the interaction with Nat would go as well as the illustration of his appearance. Our first interview was conducted with a mother and two daughters (9 and 13 years old). We visited them at their house, showed them Nat’s picture and asked about their interests, relations with new technology etc. We conducted the interview together, helping each other with questions and keeping the conversation casual and lively.

Both girls said that Nat looked cute. They loved animals and National Geographic Kids, and we learned a lot about their interaction with knowledge and technology such as phones, YouTube and encyclopedias. Their mother told us that she would definitely be interested in controlling what kinds of information girls access via Nat. She loved the idea of Nat but was concerned about some specific fields, such as the climate change issue. In the conversation with her she helped us to come to the conclusion that we need to give parents access to logs of all the questions that kids asked and references to the answers that Nat gave them. It could be also a source of interesting statistics about child’s development and current interests as well!

A fun fact: the girls asked if Nat could have ears. I’ve tried to add ears to this funny little guy but after a discussion with Amanda, we decided to leave the ears out as it distracts Nat from his original scientific purpose and also could make it difficult to project images on the ceiling or in other situations.

Step 4. Storyboarding for video and gifs.

Before starting to work on the video, we spent some time discussing a story that we wanted to show to our viewers. We wanted to make a dynamic short animated video that would convey how fun and cool Nat is! We did the first draft drawings together using pen and paper, and then I started animating it in After Effects. To test the process and the illustration style, I first animated the hero image for our landing page. We presented the gif in class and got positive feedback about it, so we knew that we were going in the right direction.

Step 5. Second user interview.

On week four we had a second user interview, this time with a mother and two younger children, 7 and 4 years old. The 4 year old child was younger than we expected our audience to be but it was still interesting to see how both kids interacted with technology and their toys. We were able to show the mother some initial drawings and animation, and also two of our app prototype screens. Also, we observed how kids were interacting with their dancing robot toy that was teaching them different music genres. That toy wasn’t really talking with them, it was only talking about music and playing it for them (one way interaction) but we could clearly see how much kids enjoyed all the lights, buttons and indicators that the robot had. By that time we already had an idea to use our colored stripe that Nat had as a light indicator, and we got a confirmation that it’s a valid idea. We also observed how interested the kids were in watching unboxing videos. That’s when I realized that I wanted to make something cute and exciting for Nat’s packaging, to make it worth being in an unboxing video.

Step 6. Desktop application.

We have sketched onboarding screens and dashboard page first with pen and paper. Then Amanda started a prototype in Sketch. We wanted the app itself look minimal and simple as it was geared towards parents. One of the mothers told us during the user interview that as she is always very busy and has no time to learn a new interface, it was very important for it to be very clear and intuitive. After taking a break for a few weeks we went back to our sketches and did some more whiteboarding. We changed a lot of details in the flow we imagined although we kept the order generally the same. Finalizing the screens in Sketch and turning it into a clickable prototype is currently in process.  The plan is to show it to a real parent and actually test it with them.

Invision prototype.

Step 7. Animation.

A big part of the project was creating an animated promotional video. We wanted to make it dynamic and short, like a first introduction of Nat to its potential users. Because I was working on the illustrations, and Amanda was responsible for logo and high-fidelity screen prototyping, we decided that Amanda would animate the final logo composition, and was also responsible for sound. It is actually her voice you can hear in the video as Nat (also we asked two other classmates to help us with the voice recording). I animated my illustrations combining stop motion, puppet tool and traditional graph editor based animation. It is the longest After Effects animation that I have ever made.  We used stop motion, so the whole animation naturally looks simple and childlike but it felt right.

Step 8. Landing page.

I created some gif animations using the Bodymovin plugin for After Effects (more about it in the WanderWomen project) and coded the page using html, css and javascript. It was made with Flexbox and follows the rules we established for Nat’s visual design.

Click here for the landing page.

Step 9. Packaging and quick start manual.

I worked on the packaging and user manual, and I approached it as a UX problem as well. I want both to be simple and cute because it is more a children’s toy than technological piece, even though the technology used for Nat is very advanced. While we have the motion piece and the landing page, the packaging is still targeted to people who might encounter Nat at the toy store for the first time. 

There would be two manuals in the box: a quick start and a more detailed manual. A quick start manual is targeted mainly towards parents as it has some instructions on Nat’s charging and connecting to the computer, but it will be also useful for kids because it has some information on how to talk to Nat on the other side of the sheet. I was inspired by IKEA manuals for the first page of the manual but I had to go into more details when explaining the modes that Nat has. I think that the manual is still very brief and has everything user would need to start using Nat even though Nat is so complex.

Image of Front Page of Nat's Manual

Step 10. Conversational flow.

One of the essential parts of Nat’s concept is the conversation that he has with children (or their parents). We were working on it from week 2 till the end of the project, constantly improving it. From our interviews with families we could see that children start interacting with technology very easily, all of them had some experience with Siri although neither family had an Alexa or Google Home.

So, for the conversational flow we decided to add some color coding:

Yellow when Nat talks
Orange when Nat projects
White when Nat is in the game mode
Blue when Nat’s battery is low
Green when Nat is connected to a computer and is charging

Image of Nat' color codes

We worked on the conversational flow as a team, but Amanda had a lead on the process because she has more experience with language as her background is journalism. So, we would whiteboard the conversational flow together, then Amanda would refine it for the next meeting and then we would test it together again. I’m a big fan of error handling and different ways where a conversation could go, and I did it a lot in my mobile app/web projects, so I tried to bring this skill to our work with the conversational flow.

For one of our classes Amanda wrote a small skit and we played it in front of the group to get their feedback to see if the conversation made sense at all. The feedback was positive, and we kept working in the same direction. Later we met with Galyn Bunnell who works on real conversational interfaces at Amazon, and we got plenty of very valuable feedback from her. We realized that our initial conversational flow was mostly based on the way we see the conversation, but in real life you have to imagine how this dialog works for the machine. So we had to go back and revise the conversational flow to the one it looks now.

Example of a sample conversational flow that includes quizzes, low battery and some other use cases.

Step 11. Portfolio show display.

I was very excited about the project and I initiated making the display for our graduation portfolio show. My initial idea was to find a real projector and create a prototype for Nat that would actually demonstrate its scale and how it works. Unfortunately I didn’t have time to learn how to build Nat’s model and 3D ptint it (as I initially ambitiously planned) but I did find and bought the small projector that I later hid in the box. I also physically built around 10 boxes for Nat and made a hole for a projector in one of the boxes. I also printed the user manuals and we both printed almost 7 feet tall conversational flow! Amanda worked on the video example of onboarding process that was demonstrated on the desktop screen the whole time. 


04. Solution

We intend to develop Nat’s universe and the package of services that surrounds it. This is a continuous process that is not stopping anywhere soon. For our portfolio show we will build a display to showcase Nat and the whole set of deliverables that goes with it.