Wonderscope
An iOS AR app for kids that allows stories to come to life as they read out loud
MY ROLE: platform UI/UX designer, sensitivity reading, interaction designer
OFFICIAL LINKS: Website, App Store
SELECT PRESS: LA Community Initiative, Variety, Wired, Vogue
AWARDS: BAFTA's Children's Award - Digital, Kidscreen Award - Best Learning App, App Store App of the Day
CORE APP EXPERIENCE
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!
This encourages kids to read out loud, improving their reading skills! In user testing, one mom noted that her daughter who struggled with stuttering found more confidence and excitement around reading because of the app 💖
PLACING A STORY: LANDING THE STORYCOPTER
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.
Along with the design team, 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!
PLACING A STORY: ERROR STATES
Error states also needed to be outlined and designed to make sure it was easy to troubleshoot for a child. I designed it to proceed through this flow:
- If there are no feature points and we sense it’s too uniform in light, we ask the kids to turn on a light to make sure it’s not too dark
- If not enough feature points appear to anchor the story in the scene, we ask kids to find a flat spot with patterns, like a blanket
- If we sense the phone is moving too quickly to lock in feature points, we ask them to move it at a specific speed that we visually display
CAROUSEL
On launch, each story had a full screen takeover but we realized that the vast majority of users never even swiped to see the second story--many didn’t even realize there was more than one story.
I led the redesign of the carousel to make it clear that there was content to be browsed while making sure it was futureproof so future features had room to be inserted.
DESIGN FOR INCLUSION
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.
This was especially important because we were essentially feeding lines to kids and teaching them how to talk to other people through their interactions with our characters.
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
