A Cognitive First Approach to AI-Powered Coding Education for K-12 Students
Meet Funoppia’s FunAI
Imagine a world where coding isn’t just about syntax, but about creativity and problem-solving. Funoppia’s FunAI makes this vision a reality by offering Asia’s first visual AI platform, designed specifically for students. With its intuitive drag-and-drop tools, FunAI lets young minds build AI and ML models in a way that feels more like playing with puzzle pieces than writing code.
Learning Through Play: What sets FunAI apart is its use of interactive games and story missions to teach AI and ML concepts. Students embark on adventures that challenge them to solve real-world problems, fostering cognitive and computational skills in a fun and engaging way. Whether it’s creating a chatbot or building a simple AI model, every project feels like a new discovery.
TL;DR
Designed the FunAI web app from scratch end to end consisting of:
FunAI IDE, Project Playground, and Funzone flow for the creators (tutors)
FunAI IDE for a bit experienced learners
Funzone is for beginners who are just starting with the coding.
This case study is primarily divided into the following sections:
Research: Discovering and understanding user expectations, behavior, needs, motivation and integrating them into my design decisions.
Develop: Develop the information architecture for FunAI and give the structure and order to all the insights obtained.
Deliver: Explaining the design decisions taken and presenting the final designs.
How it Started?: Defining the Problems!
Many students struggle with coding due to complex syntax and lack of engaging learning experiences. Current platforms often overwhelm beginners, leading to frustration and a high dropout rate.
Key Challenges:
Syntax Overload: It’s tough to grasp and recall complex coding syntax. For example, in Java, to print something, users have to remember this long syntax “system.out.println(“”);”. Imagine the struggle for students!
Lack of Engagement: Traditional platforms lack interactive elements, making learning dull.
Inadequate Support: Insufficient guidance for transitioning from block-based to text-based coding.
Qualitative Research Insights
Syntax Complexity: Difficulty understanding and remembering programming syntax
Insufficient Guidance: Lack of clear instructions and tutorials
Overwhelming Interfaces: Too many functions and features causing cognitive overload
Time Constraints: Limited time for learning due to academic commitments
Limited Project Options: Desire for more diverse projects and challenges
Quantitative Research Insights
Secondary Research
Personas
Navigating the Coding Journey: A User-Centric Approach
Understanding the Touchpoints, Emotions, and Opportunities in the FunAI IDE User Experience.
User Flow Mapping
This is the user flow for using the FunAI, starting from google to using the IDE and exploring funzone, Project Playground etc.
Rough Sketches (Lo-Fi Wireframes)
Once I organised all the insights gathered during the ideation phase, I began sketching the key screens of FunAI IDE using my user flow as a guide. These low-fidelity wireframes allowed me to rapidly explore multiple layout concepts and test initial ideas for usability. By focusing on simplicity and functionality, I aimed to ensure that the wireframes addressed both user needs and business goals.
Hi-Fi Designs
In just one year, we scaled to over 200,000+ users all without a single penny in external funding. It was a completely bootstrapped journey, fueled by relentless execution, deep user insight, and a strong product-market fit.