Improving the Wonder UX

Cognitive loads and guiding the user

Upon arriving at WonderWorkshop I started digging through the existing list of user feedback and performing a heuristic evaluation of the app’s onboarding.
Lucky for me, I had been given carte blanche to solve whatever issue I thought was most problematic. In other words, focus on the improvements that would most benefit the children using the app.

What is Wonder?

Wonder is the first coding tool that lets kids have fun with robotics all on their own. Children interact with a pictured-based language and a guided challenge system.

The product is made for children 6–10 years old and can be used on phones and tablets on both iOS and Android. Wonder connects via bluetooth to either Dash or Dot (the robots in the image above). Dash & Dot will run the program that the child has created and can engage via its various sensors and vocalizations. Fun stuff!


The problem

Once the feedback collected, I conducted user testing with new and existing users. The purpose of this was to dig deeper and better understand what the underlying issue was.

These are a few of the quotes that collected for our users that embodied the issues we would need to solve.

“My children are not finishing challenges”
“What should I do next?”
“Not sure what I need to program”

1. Challenges

Users would pause and need to think about which challenge they should do next despite the checkmark icons.
This view also lacked delight, it was never met with the same level of excitement as the map view which you can see underneath the modal.

2. The Wonder Editor

Users were so overwhelmed with an interface they had never seen before that the instructions were always unnoticed.


Goals

  • Allow children to quickly understand what the next challenge is next.
  • Improve cognizance of challenge instructions before user starts to program.
  • Improve narrative and storytelling to make the UX more engaging and better capture the child's attention & focus.

Difficulties encountered

  • Even with a simplified UI for the programming editor that made the instruction better stand out, people started coding right away. People just don’t want to read.
  • Children (and adults) will tap before they read and we needed to find ways to pace the user so they would spend more time processing what was present on screen.

Solution

1. Challenges

  • Use of iconography to better indicate what challenges were completed, which one is currently active & which ones are locked.
  • Animation upon loading of the screen to better draw the eye and establish focus on the challenge that is most relevant. (in addition to the heat-mapping)
  • Inclusion of artwork alongside the challenges to allow for a more immersive experience. The artwork was related to the current adventure Dash & Dot were on at that moment of the story. Some extra flavor to engage!

2. The Wonder Editor

  • Redesign of the overall UI to simplify, declutter and eliminate unnecessary visual noise. This made the instructions stand out much more.
  • Added animation upon entry in the editor to emphasize the instructions and also draw attention to where the instructions would be placed permanently.

Outcome

After two and a half months of weekly user testing we have reduced almost completely any negative feedback in regards to both areas of the app. In the last year since this update was released, no additional negative feedback was received on the Customer Support side of the company.

There clearly more elements of interaction that can further improve the UX and we have a log of further user-driven improvements we would love to address.


Full video of the entire Wonder first time user experience

This effort was part of a larger endeavor to refresh the full onboarding process. Take a look below to see the deltas.

Previous design

Wonder 1.9 onboarding experience (previous design)

Updated design

Wonder 1.11.0 onboarding experience (new design)

Other projects available at: http://www.west-chris.com