A first-of-its-kind phygital learning platform, combining physical and digital experiences to promote self-paced learning for children from Pre-KG to Grade 3. Designed to enhance motor skills, it features a library of activity templates aligned with learning objectives. Using computer vision, it detects answers written and provides real-time feedback through an AI-powered character named Jane. The experience is gamified, encouraging engagement by rewarding users for completing worksheets.
Outcome
An augmented interactive experience called Magic Workbooks
Problem
Osmo games is a hands on learning experience for the age group 6-10 that uses tangible pieces with a digital app. It covers a wide range of topics like math, coding, puzzles and spelling.
The challenge was to explore how we could design an interactive and educational worksheet experience using Osmo.
Impact 🍪
These insights are derived from user reviews of the app and end of quarter business team reports from December 2022.
Highly Rated by Users – Achieved a 4.4-star rating from over 18,670 reviews, reflecting strong user satisfaction.
Profitable Product – Successfully positioned as a revenue-generating learning platform.
Top-Ranking Product – Recognized as one of Byju’s top products, demonstrating its market success and educational value.
Global Reach – Successfully launched across two continents, India and North America, expanding its impact on early childhood education.
Reflections
Designing for a phygital experience requires balancing both physical and digital interactions seamlessly.
Character design plays a crucial role in user engagement, facial expressions and feedback significantly impact a child’s learning experience.
Aligning computer vision capabilities with real-world constraints, making sure to account for all the edge cases and solve them through UX.
Ensuring the UI complemented the learning experience rather than distracting from it.
What I Learned
Challenges
Next Steps
Enhance onboarding to guide children more effectively through worksheet interactions.
Explore multilingual support to improve accessibility for diverse audiences.
Automate animation and dialogue integration using AI to streamline the process and reduce manual effort.
Client
Team
Osmo
1 Lead Designer
Me | Senior Experience Designer
6+ Engineers
3D Animators, artists
5+ Education Specialists
Product Manager
Led the conceptualization phases, identifying key challenges in children's learning experiences and designing features that enhance engagement and comprehension. I collaborated with engineers to define computer vision constraints. Additionally, I worked on character design, speech, and motion to create Jane, an AI-powered assistant that provides intuitive feedback, making learning more interactive and rewarding for young users.
Best Learning App, Kidscreen Awards 2022
Magic Workbooks
A combined physical and digital experience that promotes self paced learning in elementary kids using gamification and storytelling.
Recognition 🏆
Best Learning App, Kidscreen Award 2022
We collaborated with the computer vision team and engineers to define detection parameters, ensuring minimal errors in recognition. Through rigorous testing, we identified key challenges, colouring posed the most detection issues, while handwriting recognition required further refinement for accuracy. These findings helped establish project constraints, scope technical feasibility, and align development with the current capabilities of the technology.
Technology and Design
The Design Process
Maze Template Issues
Adjusted designs to improve clarity and minimize detection errors.
Inconsistencies in Tagging
Standardized templates to reduce tagging errors and improve accuracy.
1.
2.
Refining Worksheet Designs
Based on our findings, we developed 6 distinct types of worksheets, including coloring, which was particularly popular among children. Since kids naturally enjoy coloring, we incorporated it into the experience while continuously refining the technology to improve detection accuracy and ensure a seamless learning process.
Defining Scope in Collaboration with Computer Vision Engineers
Activity Definition Based on Computer Vision Capabilities
User Interface
The Design Process
We focused on enhancing the existing interface to improve usability and clarity.
A key insight was that characters are integral to the user experience, with facial expressions playing a crucial role in enhancing children's learning and engagement.
We refined her speech, body language through animations, and facial expressions to enhance engagement and learning.
We also explored different ways to indicate whether answers were right or wrong.
The existing method was confusing for kids, so I experimented with multiple variations to ensure clarity. I believe in generating a wide range of options to cover all possibilities and find the most effective solution.
Earlier Interface
Enhancing Existing Interface
Designing Facial Expressions, Dialogues, and Animations for Enhanced Learning
Updated Interface
User Flows
The Design Process
This was a challenging experience, as I had previously worked solely on digital screens. Here, I had to consider not only the physical worksheets in front of the child but also the character’s dialogue and the real-time feedback displayed on the screen.
Implementing Storyboarding Over Traditional User Flows
We created an extensive number of storyboards to map out the experience in detail. To give a sense of scale, the volume of storyboarding was significant, covering every aspect of interaction and user flow.
User Testing
The Design Process
At Osmo, user testing is deeply embedded in our culture, with frequent playtests to refine and improve the experience. We conducted two rounds of usability testing.
Playtest photographs from Osmo Headquaters
In-Person Playtest at the Osmo Office
Remote Playtest via Zoom
Onboarding Challenges
Children faced difficulties navigating the initial setup, requiring a more intuitive introduction to the experience.
Concept Understanding Before Worksheets
Users needed additional guidance to grasp concepts before attempting worksheets, highlighting the need for pre-learning support.
Language Barriers for Indian Audiences
Some children struggled with language comprehension, leading to the introduction of vernacular support for better accessibility.
1.
2.
3.
Key Insights
Post Usability testing Ideation
Playtest, Learn, Design, Repeat
Back to
🐼