Cracking the Gamification code for WhiteHat Jr.

Client / WhiteHat Jr.
Domain / EduTech
Services rendered / UX Design

“ZEUX Innovation’s thought leadership and their output exceeded our expectations. Their advanced UX design techniques such as gamification worked really well for us and have helped achieve tremendous ROI. Their work was also one of the factors in closing a round of funding with marquee investors. Overall, ZEUX is a great company for emerging startups who believe in the power of great user experience design or even an incumbent who is truly looking to differentiate in a red ocean.”

Karan Bajaj
CEO | WhiteHat Jr.

The UX Challenge

WhiteHat Jr. is a platform for Live 1:1 online coding classes targeted at 6-14 year old children.

They were experiencing UX issues such as a complex registration process, low engagement on the student dashboard, high drop-off rates and low class renewal percentage. For instance, only 13% of the users were completing the trial class registration process and only 2% of those were converting to paid students. We embarked on a journey of redesigning all aspects of the customer acquisition, Live class and retention journeys. The design objectives were…

  • Simplify the trial class registration, scheduling, and tech setup process to reduce drop-off and increase paid student conversion rate
  • Gamify the entire learning experience to improve student engagement with the classes and projects, increase stickiness and maximize renewals
  • Provide a comprehensive student performance tracking dashboard for parents to keep them informed about their child’s accomplishments and progress

Based on stakeholder interviews, analytics data, best practice review and user research insights, we were able to identify the core problem areas in the design…

  • Missing value proposition: It was not clear what users get from attending the trial class. The trial class registration process did not mention the trial class certificate, the topic that will be covered etc.
  • Poor form design: Length of input fields did not match the input required length making the form unnecessarily long and cumbersome
  • Lack of persuasion: The customer acquisition process did not leverage persuasion design principles to drive registration urgency. There are limited, fast-filling trial class spots every week, but the page failed to highlight that.
  • Inadequate progress summary: The student dashboard failed to answer parent’s questions such as: How is my child progressing? Is s/he doing well in the assignments? How is s/he doing compared to other children? How many more classes does my child need to take to become proficient in coding?

Our Solution

After getting an in-depth understanding of the UX issues, we started the redesign process to create a best-in-class online coding class experience. The design approach essentially focused on two UX pillars…

Simplification

Simplified one-page trial class registration form

Important information shown upfront to address parent’s concerns on safety and support

Easy and jargon free tech setup journey designed considering varying levels of tech savviness across customers

Visual styling designed to be child-friendly, with large fonts, bright colors, simple language and compelling imagery

Gamification

Comprehensive dashboard designed using advanced gamification techniques to increase engagement, maximize opportunities for upsell and increase lifetime customer value

Badges and leaderboards to enhance student motivation, generate brag value and keep parents informed about their child’s progress

Progress ladder abstracted using hats of different colors leading upto the final white hat level was conceptually relevant and aligned, not only to the WhiteHat Jr. brand name but also the coding ecosystem as a whole

Teachers empowered to reward students during the live class with badges to reinforce desired behavior such as: curiosity, creativity, and perseverance.

Progress tracker for parents to help them track their child’s coding progress and skill development 

Community features such as discussion forums, trending projects, etc.

The Outcome

ZEUX’s redesign of WhiteHat Jr. is a fantastic illustration of the ROI of UX and its ability to positively impact business KPIs. Comparison of WhiteHat Jr. user data from before and after the redesign going live shows the massive impact of good UX on both ‘soft’ and ‘hard’ success measures… 

8x increase in trial class completion

6x increase in overall classes

8x revenue growth

23% increase in lifetime value of students