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.
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.
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.
Checkout Wonderscope App @WonderscopeApp for AR design inspiration. It has the best AR onboarding process to-date. @nexusstories @milk #designinspiration
— Silka. Hello world. I miss you! (@silkamiesnieks) November 26, 2018
If you have an ARKit device, go play @WITHIN 's Wonderscope now. Amazing onboarding for AR! I think it's the best I've ever seen - very natural and understandable. The voice interaction works super well. Tell your team: very well done! @nimazeighami https://t.co/mMzU5CDVBu
— Todd Little (@tikilittle) November 14, 2018
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.
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.
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.
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.
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.
Designed by me. Made using Semplice and custom code by me. Font used is Aileron by dot colon. Elen síla lúmenn’ omentielvo.