Wonderscope

The Core App Experience

Encourage kids to read out loud by making the story come to life around them

Inside of Wonderscope, kids are presented with lines that they have to read out loud in order to progress with the story. Reading the line out loud correctly gets the AR character to respond back to them and visuals effects to happen! There are occasionally other interactions, such as:

• finding objects in their environment
• walking through their actual space, and
• dragging things into designated spaces.

These interactions encourage children to look beyond the screen and into the space around them.

During user testing, parents often remarked on how positively their kid approached reading after using Wonderscope. One mom noted that her daughter who struggled with stuttering found more confidence and excitement around reading out loud because of the app 💖

“If you have a child at home that's struggling to read, this might be a good way to instill confidence while teaching them valuable lessons about science, space and standing up to bullies.”

-- CHERLYNN LOW, ENGADGET

AR Set Up

Kids needed to learn how to use the AR technology... but were often better than their parents at figuring interactions out

Getting kids (or their parents!) to understand how to start the AR story was hard. Because it's not an interaction they're used to, it required a lot of exploration into the interaction design to make sure they understood what was being asked of them--they had to find a relatively clear and flat spot where they could 'place' the story.

After many (failed) group ideation sessions and iterations, we eventually landed on the idea of a pizza box--a large, flat, and thin object that many kids are used to seeing and placing somewhere. This led to the creation of the ✨storycopter✨. It's the same size as a pizza box but is floating and looking for a place to land--something kids understood pretty well!

I expanded this system to handle errors with the sensors, which meant giving kids clear instructions on how to solve the errors without having to grab an adult for help.

AR UI

Anything that could be seen while a story was going on had to deal with mess

All the UI during a show needed to be able to be visible against all sorts of chaotic backgrounds, but also not take attention away from the core interaction--reading the story.

I used lots of transparency and neutral colors contrasting against each other to make sure every piece of UI was visible against a variety of backgrounds. The text to read out loud also had a subtle dark gradient behind it to make sure it had enough contrast to draw the eye and be legible for a child. I also drew every icon, including 5 chapter icons per story, to keep a similar fun aesthetic so the UI still felt child-friendly even while being very neutral in color and shape.

The Platform

Show people more possibilities

Wonderscope initially launched with a full screen carousel, depicting one story at a time. Unfortunately, that caused an over 90% attrition rate--people just weren’t seeing that there was more than one story.

So I was put in charge of redesigning the home screen to show off our content. I’ve worked on a couple of apps that need to display content libraries, so I had a good basis to work from. The more important part was making sure that the interface still felt fun and engaging--we wanted kids to be excited to see new stories!

This new scrolling layout allowed for more stories to show while the focus on characters helped kids pinpoint which stories they’d like to try out.

Diversity and Inclusion

We’re teaching kids lessons about the way they treat the world around them

Kids related to the characters and often saw them as friends. They wanted to reach out and touch them, and felt important when they helped progress the characters along their journeys. We were actively feeding them lines to say, teaching them how to react in different situations. Because of this, it was important to teach them good behaviors.

I actively read every Wonderscope story and provided feedback on the writing, interactions, and visuals to make sure we were teaching kids the right things. On multiple stories (Little Red, Lauren and the Three Bears, Willowcrest Manor), I served as a sensitivity reader and flagged concerns and/or gave script recommendations.

In particular, here are some of the things I flagged:

• Concerns around how kids were being told to converse with black characters, making sure that any lines the kids were being asked to say still allowed those black characters to have agency and power, instead of leaning on tropes such as the angry black girl
• Making sure that the kids weren't saying anything that could be seen as peer pressuring if our AR characters were real humans, especially around things that were illegal like breaking and entering

Educating Other Developers

Content creators also need guidelines to create stories

Because we were creating a platform, rather than just the stories, we had to communicate with content creators that were helping develop the stories. Since many of them were used to creating games or telling stories on flat screens, rather than creating spatial media, I helped onboard external partners to our platform. I created informational diagrams and simplified design information to help teach them good design practices .

Elen síla lúmenn’ omentielvo