Novi ACAdemy
intro
Ella Academy explores a new direction for traditional education products, shifting from simply delivering courses and answers to an autonomous learning system built around AI notes, knowledge graphs, and atomic content.
It organizes learning materials, connects related concepts, and recommends exercises, flashcards, and other resources to help students understand and retain knowledge more efficiently while preserving control over their learning journey. AI continuously identifies each student’s current level and provides adaptive explanations, practice, and assessments tailored to their needs.
Services
UI/UX Design, Research, Animation, Illustration
Year
2026
Concept, Analysis & Planning
In traditional learning models, students are expected to follow predefined courses, with the starting point largely determined by a structured education system.
Existing education apps face a similar issue. They are not fundamentally different from traditional learning platforms: AI mainly helps generate course content more efficiently, while human review ensures quality. Some AI-powered Q&A and explanation features are added to support learning.
From a longer-term perspective, however, this still treats AI as an efficiency tool rather than part of the learning process itself. The core experience remains largely unchanged. It falls short of truly AI-native learning—personalized pathways, adaptive feedback, contextual interaction, and continuous support for motivation and outcomes are still missing.
To explore what the project could become, I conducted desk research and developed a 50-page strategic proposal outlining possible directions and potential solutions.
Problems & Challenges
In the 1.0 version, we identified several key issues:
Content production was costly and hard to reuse across regions due to local textbooks, curriculum standards, and manual review. AI output also required frequent quality checks.
Courses, Q&A, and schedules were disconnected, so learning activity and results could not accumulate into long-term assets.
AI worked mainly as an on-demand tool, with little ability to guide learning paths or retain context over time.
The core challenge was to connect fragmented content and tools, so AI could support understanding, practice, and knowledge accumulation while helping users build their own learning library.
Design Strategy
After research and exploration, I defined the core strategy as “deliver tool value first, then build trust in learning.”
Users first gain clear efficiency benefits through AI summaries, concept explanations, and note organization, gradually learning what AI can reliably do.
Once trust is established, the system recommends exercises, flashcards, and related concepts, helping users move from passive reading to active learning.
Throughout the experience, AI recommends rather than dictates—users always decide what to generate, study, or explore next.
Start with Notes
Notes are the main entry point for users to experience the product’s value. They turn courses, files, and personal records into structured knowledge—highlighting key ideas, explaining concepts, organizing questions, and connecting related content.
Users can freely review, edit, and expand both original materials and AI-generated content. Over time, these notes become a personal knowledge base that supports practice generation, flashcard review, and relevant course recommendations.
Learning Engine
The knowledge graph and atomic course structure form the product’s learning engine. The graph defines prerequisite, follow-up, and related concepts, helping AI understand what users are learning, what they are missing, and what they can explore next.
Course atomization breaks full lessons into clear, reusable knowledge units that can be connected and orchestrated by the graph. Together, they allow the system to generate targeted practice, flashcards, and explanations around specific concepts instead of simply recommending entire courses.
Learning Loop
The user journey follows one simple principle: the system provides options and content, while users decide how to learn and act.
The experience begins when users upload materials or open a course. AI turns the content into structured notes and identifies key concepts. Based on these notes, knowledge relationships, and past questions, the system recommends exercises, flashcards, summaries, or further explanations.
Students choose what to generate and study without following a fixed schedule. New results and questions then feed back into their notes and knowledge state, forming a continuous loop of Input → Understand → Recommend → Practice → Retain.
Page Structure
The final product is built around four core modules: Home, Notes, Library, and Q&A.
Home surfaces recent content and learning suggestions. Notes support deeper analysis and explanation, organizing useful information around the learner’s context. Library manages structured course resources, while Q&A provides quick, on-demand support.
Exercises and flashcards appear naturally as extensions of specific knowledge points, allowing the experience to grow around user choice and continuous knowledge accumulation.
AI Character Design
The AI character needed to reflect both the target user profile and the existing visual language of the AI Center’s assistant. I therefore used a bright orange-yellow palette and simple gestures to give it a distinct identity and help users quickly recognize its role.
Motion & Delivery
Motion needed to be visually distinctive while remaining practical to implement. After evaluating several options, I chose Rive as the main tool for motion design and delivery.
Compared with traditional workflows such as Lottie or After Effects, Rive offered greater flexibility and smoother transitions between AI states. Its state-machine logic maps closely to development workflows, allowing interaction states to be controlled through parameters and greatly simplifying integration. This reduced the implementation workload for motion by over 90%.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 176 180" xmlns="http://www.w3.org/2000/svg"><path d="M 66.153 1.35 C 68.406 0.128 71.069 -0.154 73.62 0.07 C 80.437 0.67 86.661 4.765 90.749 10.256 C 94.837 15.743 96.946 22.51 97.766 29.303 C 98.224 33.088 98.287 36.915 97.974 40.712 C 101.309 30.727 106.015 21.2 111.94 12.501 C 115.975 6.578 121.767 0.481 128.909 1.04 C 134.567 1.482 139.231 6.397 140.513 11.925 C 141.796 17.456 140.171 23.338 137.275 28.22 C 143.563 26.07 151.201 24.139 156.29 28.414 C 158.252 30.065 159.49 32.435 160.217 34.893 C 162.162 41.455 160.632 48.748 157.026 54.564 C 153.417 60.379 147.899 64.825 141.88 68.079 C 140.036 69.076 138.137 69.966 136.194 70.749 C 138.863 70.599 141.528 70.591 144.127 70.674 C 150.967 70.895 157.891 72.402 163.717 75.994 C 169.542 79.583 174.17 85.423 175.365 92.162 C 175.814 94.683 175.767 97.362 174.749 99.712 C 172.107 105.809 164.413 107.496 157.827 108.387 C 162.601 111.457 166.683 115.997 168.009 121.515 C 169.334 127.032 167.359 133.514 162.495 136.441 C 156.354 140.134 148.449 137.268 142.191 133.776 L 142.191 133.773 C 138.65 131.795 135.216 129.626 131.906 127.281 C 135.265 131.392 138.354 135.776 141.137 140.4 L 141.138 140.397 C 144.841 146.541 148.052 154.492 144.969 161.349 C 142.526 166.783 136.54 169.602 131.249 168.852 C 125.957 168.101 121.412 164.35 118.205 159.708 C 117.794 166.709 116.699 174.964 111.118 178.437 C 108.967 179.774 106.442 180.136 104.036 179.958 C 97.6 179.486 91.791 175.318 88.027 169.63 C 84.263 163.942 82.39 156.867 81.74 149.728 C 81.337 145.297 81.395 140.8 81.892 136.342 C 77.657 146.16 72.039 155.446 65.205 163.848 L 65.205 163.855 C 60.433 169.725 53.731 175.667 45.985 174.659 C 39.85 173.859 35.081 168.502 34.04 162.715 C 32.995 156.928 35.14 150.95 38.607 146.084 C 31.621 147.92 23.173 149.451 17.904 144.731 C 15.873 142.909 14.674 140.384 14.038 137.804 C 12.342 130.912 14.473 123.473 18.774 117.686 C 23.079 111.899 29.374 107.642 36.141 104.647 C 36.431 104.518 36.722 104.392 37.014 104.268 C 36.288 104.355 35.561 104.443 34.833 104.531 C 27.807 105.39 20.565 105.098 14.229 102.76 C 7.894 100.422 2.561 95.867 0.647 89.97 C -0.07 87.762 -0.294 85.34 0.509 83.062 C 2.588 77.152 10.295 74.439 16.948 72.62 C 11.748 70.585 7.103 67.124 5.181 62.349 C 3.259 57.574 4.619 51.422 9.3 48.03 C 15.209 43.75 23.598 45.114 30.36 47.3 L 30.356 47.301 C 38.497 49.932 46.227 53.419 53.368 57.651 C 46.461 51.461 40.298 44.44 35.083 36.77 L 35.08 36.77 C 31.052 30.847 27.506 23.22 30.643 16.781 C 33.131 11.679 39.412 9.141 45.027 9.978 C 50.642 10.815 55.52 14.482 58.999 18.968 C 59.307 12.329 60.311 4.517 66.153 1.35 Z" fill="rgb(255, 203, 66)" height="180.00022979945265px" id="jozbPtP7M" transform="translate(0 0)" width="175.6359417878117px"/><path d="M 21.797 5.252 C 24.075 7.617 26.163 10.27 27.182 13.39 C 28.201 16.511 28.001 20.172 26.013 22.781 C 19.223 31.68 7.274 24.978 2.58 17.419 C -6.568 2.697 10.701 -6.274 21.797 5.252 Z" fill="rgb(244, 60, 23)" height="27.027261382472247px" id="XghBv9guO" transform="translate(76.947 77.633)" width="27.78440265333664px"/></svg>)
Design System / Component Library
I built a component library and supporting design guidelines to improve consistency and usability across implementation.
The system was designed not only for human readability, but also tested and adapted for AI. This allows AI tools to access the specifications directly through MCP and quickly generate corresponding Markdown design documentation for each module.
OUTCOME
