Back

Wonderscope

Wonderscope is an iOS app for kids that uses Augmented Reality to transform ordinary spaces into extraordinary stories.

I heavily participated in work surrounding experience design and visual design, taking charge of the 2D menu systems and participating in design workshops to determine the best onboarding experiences for our AR components. I am currently in charge of all UX and visual design for new features that will be launched on Wonderscope in the future.


Key Interactions

Wonderscope is a storytelling app. It makes kids read out loud and explore their environment through interacting with characters in augmented reality stories.

Reading Out Loud

The main interaction is that kids need to read lines out loud in order to continue the story they are experiencing. These lines are written in order to place the kid within the story as a character.

Exploring the Environment

Some interactions in the stories require the kids to look around their environment in order to continue the story. This interactions are often find-the-object interactions, where objects to find are scattered around their environment and they have to find them and tap on them in order to proceed.

Onboarding Experience

Wonderscope is a storytelling app. It makes kids read out loud and explore their environment through interacting with characters in augmented reality stories.

Story as Driver

Contrary to many onboarding flows, we expanded rather than limited the number of steps in the onboarding flow, turning it into a narrative sequence.

This was due to a few reasons:

  • Our users are young kids who often have to ask permission from their parents before accepting any permissions requests. Since permissions are essential to using the app, we needed to empower them with the knowledge they needed to explain to their parents the importance of giving us permissions.
  • A narrative experience makes the process enjoyable for kids, as opposed to another tedious step they need to do in order to access the content.
  • A narrative experience allowed us to provide a character that could be a guiding figure to the kid. This guiding figure is important because it allowed our instructions, both in onboarding and in later AR set up, to feel more friendly rather than authoritative. We named him Blob.

Response and Results

The main interaction is that kids need to read lines out loud in order to continue the story they are experiencing. These lines are written in order to place the kid within the story as a character.

AR Set Up

This is the process of getting AR set up within the space. It involves getting the users to scan their environment so we can detect feature points around them in order to place content within their space.

Follow the Storycopter

The first time they ever try to set up AR, they will be prompted to follow a hovercraft that makes them wave their phone in a specific motion at a specific speed to map their environment. It also serves to show that they can explore the space around them, as opposed to just staying still while viewing the stories.
The user follows a Storycopter that flies around their room, making them point the device up, down, to their left, and to their right.

Finding a Plane and Placing the Content

At this point, the user is told to find a flat surface to put their story on. This is very forgiving—users can easily find planes that may not be the ideal size or shape—but we found that users did not mind visual bugs (e.g. weird clipping issues) as much as they minded not being able to find the surface to get the story started.

Once a plane is found, usually by the user moving the device around in a similar manner to following the storycopter, the user taps on the surface. A portal opens on the plane as the Storycopter comes in to land. The Storycopter flies into the portal, the portal closes behind it, and the story starts.
The Storycopter comes in to land and a portal opens up beneath it. The Storycopter flies into the portal and the portal closes behind it.

Error States

lorem ipsum
When a plane cannot be found, the app throws out error states for the user to troubleshoot with: lack of lighting, motion is too quick for tracking, surface doesn't give enough feature points, etc.

Possible Improvements

lorem ipsum

Colophon

Typefaces used are Caudex and Anaheim
Designed and coded by me, with extensive help from Stack Overflow


elen sila lumenn' omentielvo