Wonderscope

Overview

Wonderscope is an iOS app for kids that uses Augmented Reality to transform ordinary spaces into extraordinary stories. Kids watch stories come to life in their homes as they read out loud, find objects, and learn about history through the app.

I lead the design of the UX and UI of the story carousel, while also helping design parts of the core story experience including the onboarding and the core game mechanics.

Skills

• User Interface Design
  
• User Experience Design
  
• Iconography
• Graphic Design
  

Awards

• BAFTA Children's Award
  
• Kid Screen Award - Best Learning App
  
• App of the Day - App Store
  

Selected Press

• LA Community Reading Initiative
  
• Variety
  
• cnet
  
• Vogue
  
• Hollywood Reporter
  
• Wired
  
• Parentology
  

Core App Experience

Inside of Wonderscope, kids are presented with lines that they have to read out loud in order to progress in the story.

We made sure that it would progress the user even with different accents (we frequently tested with kids in New Zealand), but also allowed a forward button to appear after a few seconds if we realized that they were struggling or there were possible technical issues on our end. Because we weren't trying to understand what the kid was saying (we already knew what they were trying to say from the lines displayed on the screen), we didn't have to collect data about the kid speaking and the app could be used offline once the story was loaded onto the users' phone.

Onboarding

We were frequently mentioned on social media for a having a clear and intuitive way of onboarding users.

Below, I've outlined some  of the key things that enabled kids to understand how to experience AR through Wonderscope.

Privacy Permissions

Wonderscope requires 2 permissions in order to work—access to the camera and access to the microphone. However, we found that kids were trained by parents to either reject those permissions outright or to come and ask them for parental permission before accepting. To help kids and parents know why we needed those permissions, we created an onboarding sequence with a character named Blob who walked kids through the app functionality.

Placing a Story

One thing that really tripped kids up was placing the story in their space. AR is pretty new to many kids so we needed to explain to them how to even start the story.

Because our initial stories were designed to be on large flat surfaces, we thought of a pizza box being placed down as a good mental model for kids to understand how much empty space they'd need to be able to place a story. This led to us creating the storycopter—a large flat story start that required the user to land it before the story could properly start.

Error States

Because scanning the space can often fail for many reasons, we included error states that gave the kid instructions for most of the common error states. This includes the speed at which the camera is moving, the amount of patterns on the surface they are trying to scan, and the amount of light in the room.

Story Carousel

I led the design for the redesign of the story carousel.

We originally launched with two stories (A Brief History of Amazing Stunts by Astounding People and Little Red the Inventor), which was quickly followed by a fast follow of our third story, Wonder's Land. Because of the limited number of stories, we originally had a carousel that had full screen takeovers for each story, that the user had to swipe through to be able to find a particular story.

However, this was not sustainable as we added more stories. We noticed that there was significant drop off in people starting stories beyond the first one they were hit with when they opened their app. It was also hard for them to find stories that we advertised. All of this led to the redesign.

New Carousel

The new carousel allows users to see more than 3 stories at any given moment. They can quickly scan through the list to see if any stand out to them.

This layout also gives us the ability to scale in the future, if we continue to produce stories. It can be expanded to include things like categories, search functionality, and other things that help users sort through content to find the stories that they care about.

Other UI

I was in charge of the in-story UI, that allowed kids to leave the story, navigate around the story, relocate the story, and take a picture of the story. As part of that, I also designed all of the icons for each story's chapter.

Information Graphics

We often worked with outside contractors or vendors that needed to be onboarded onto the project. Because of that, I created some infographics to explain pipeline processes, interactions, and basic AR do's and don'ts.

Colophon

Designed by me. Made using Semplice and custom code by me. Font used is Aileron by dot colon. Elen síla lúmenn’ omentielvo.