Anna Atiagina, UX/UI Designer in Seattle, WA
Nat, Conversational Robot
School project in Voice and Multi-Modal Design at SCCA. As a group of two (with another designer Amanda Welch) we created the concept of the product, conducted user interviews and designed the toy itself, VUI flows, promo animation and parents onboarding dashboard. I did all the illustrations, and additionally worked on the landing page, packaging design and user manual.
Timeframe: 8 Weeks
Roles: Research; User Personas And Interviews, Customer Journey Map, Conversational Flow, Illustration System, Motion, Landing Page, Packaging, And Manual.
Skills: User Research, Product Design, VUI, Adobe Illustrator, InDesign, After Effects, JS, CSS
Collaborator: Amanda Welch
Challenge/Problem: Design a toy robot (dinosaur, bear, rabbit, whatever) 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: Just in 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 spend 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 the feedback.
Concept
Toy robot is a risky territory with a lot of privacy and other concerns. We read a few articles published by experts in children psychology, and decided that we didn’t want Nat too look too much like a living creature. 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 were testing these images with actual kids. AT some point we got requests to add the ears. I did that but soon decided to take them off since it was against our idea of making Nat look more like a robot than a living creature.
Some of technical details of the design.
Personas and Customer Journey
As mentioned, we visited a couple of Seattle-based families with kids, and interviews both parents and kids as well as observed kids playing with similar toys. While kids had their in input on Nat’s look and features, our customer journey was mostly focused on parents since Nat is an expensive product and they would be decision-makers.
Whiteboarding the journey of one of the Mom’s that we interviewed.
All our personas. Click to enlarge.
Sharon’s customer journey as we imagined it.
Voice User Interface
As a part of our conversational design for Nat, Created and acted use case dialogs in front of the class. The multi-modal component in Nat’s case is projections on the wall as well as audio and video recordings.
Created a conversational flow and iterated on it based on the feedback from Galyn Bunell, Alexa Music UX Designer at the time and alumni of SCCA. Below is the fragment of the flow, and to the right is the full VUI flow that was designed for Nat.
Fragment of the VUI / multi-modal flow.
Full VUI flow.
Marketing materials
While I was working on the illustration system, my teammate Amanda worked on the logo and brand guidelines that I applied to our work. I have coded the landing page, including using some advanced Javascript techniques to animate on scroll and create lightweight gifs.
Overall set of marketing materials that we were required do deliver included:
landing page: meetnat.atiagina.com;
promotional video animated in After Effects
Here’s a storyboard that we brainstormed for the video:
Promotional animation
In addition to our school assignment I volunteered to work on more deliverables:
user manual;
packaging;
physical “booth” for Nat.
I was very excited to develop more of Nat’s universe. My enthusiasm around conversational design (that led me to work at Alexa later) grew so much that I actually printed and recreated packaging and manual that I designed, and we presented it at the physical boot at SCCA 2018 Portfolio Show (images below).
Nat’s Landing Page.
Front of the box.
Packaging and user manual in real life.
Out-of-the-Box Experience Inspired by IKEA
Front page, setting up Nat. Click to enlarge.
Some out-of-the-box help for customers new to VUI. Click to enlarge.
Everything above was presented at the SCCA Portfolio Show in June 2018. I even attempted to recreate the projection experience, by simply ordering a cheap projector from Amazon and creating a cardboard prototype. The response was very warm, and it proved that my weekend spent printing and assembling all these Nat’s boxes was the right idea!