What is Knowledge Net?
Knowledge Net is an educational exhibit that helps children understand how AI learns through knowledge representation, which is a way of structuring information, where concepts are linked to show relationships, enabling machines to reason and make decisions.
How?
Kids build their own knowledge networks and observe how these affect their AI agents' behavior and appearance, making abstract AI ideas playful and tangible.
Previous Knowledge Net?
- UX Research Recap
.png)
Children Interacting with Previous Knowledge Net
(I joined the lab in Summer 2024 after the study was conducted but contributed by segmenting and analyzing the video data to uncover insights for design improvements. I then participated in discussions on how to apply these insights to enhance Knowledge Net’s learning outcomes and user experience.)
Setting?
2-day study at the Griffin Museum of Science and Industry (Chicago), Summer 2024
Participants?
Children aged 10–14, recruited on-site
Data Collected?
- 228 segmented video recordings
- Live observations
- Structured interviews
Focus of Analysis?
- Active, prolonged engagement
- Understanding of AI concepts
- Situational interest
- Creativity and embodiment
Areas to Be Strengthened?
- UX Research Insights
Design Jam in Collaboration with Georgia Tech's TILES Lab
1. Creative Exploration
👍 The variety of features for personalizing the AI agents fostered active engagement with the exhibit.
👎 The lack of visual feedback for all features hindered users' learnings and explorations of various knowledge representations.
➡ Produce Comprehensive Visual Feedback for All Knowledge Representations
➡ Expand Visual Feedback Opportunities to Support Effective Learning
2. Knowledge Representation UX
👍 Experimentations with different combinations of features in the knowledge representation was engaging.
👎 The limited workspace for each knowledge representation and technical difficulties of navigating multiple features were disruptive to user engagement with the exhibit.
👍 Collaborative learning talks emerged as users compared how their knowledge representations influenced their AI agents’ interactions with others.
👎 Users had limited understanding of their AI agents' behavior, as they had to passively wait for the agents' interactions to unfold on the screen.
👍 The visual feedback on appearance change .
👎 Limited feedback.
➡ Improve the UX for Creating Knowledge Representations
➡ Add support to reduce technical bottlenecks around Knowledge Net interactions
New Knowledge Net?
- Key Design Updates
1. Strengthening Creative Exploration with Effective AI Learning
1.1 Production for Scalable, Comprehensive Visual Feedback Design System
Previous AI Agent Design
New AI Agent Design
Varied Character Structure
Uniform Character Structure
➡ Now visual assets have uniform size and positioning, streamlining the production process and enabling scalable visual feedback.
Based on the New Design System, Created +200 Assets with Adobe Illustrator to Cover All Possible Visual Feedback for Knowledge Representations
Therefore,
Previous Incomplete
Visual Feedback Mapping
e.g. There is no asset for AI agent's appearance when "it is a palette."
New Complete
Visual Feedback Mapping
e.g. AI agent's appearance changes accordingly when "it is a palette."
➡ Not only more engaging but also supports a learning outcome
that AI learns from human's input even though it is incorrect / unusual
1.2 Expansion of Visual Feedback Possibilities
Previously, AI Agents Can Only
Interact with Other Agents
Now, AI Agents Can Additionally Interact with the Environment
A Tree
Mud Puddles
Cave Portals
And Each Action Zone Has an Unique Interactive
Feedback Based on User's Knowledge Representation
➡ More opportunities to observe and learn
about AI's knowledge representation
2. More Engaging Knowledge Representation UX
2.1 Improvement of Knowledge Representation Creation Experience
Figma Prototypes I made for Knowledge Representation Creation
Previous Unorganized
Knowledge Representation Layout,
Causing Issues of Overlapping Nodes and Limited Workspace
New Organized
Knowledge Representation Layout,
Resolving Previous Technical Difficulties
Previous Drag-and-Drop UI
New Tap and Automatic Layout UI
➡ Streamlined UX for knowledge representation creation,
designed to help users focus more on how it impacts AI agents
2.2 Addition of Visual Feedback for Knowledge Representation UX
Previously Limited Support for Collaborative Learning Talks About How All Participants' Networks Connect With Each Other
Now Global Knowledge Representation Viewpoint Prototype to Be Projected on the Wall Next to the Exhibit for Users' Reference
➡ Users can have a global perspective on how each participant adds to the AI agents' interactions, fostering learning talks about knowledge representation
Previously When Changes to the Knowledge Representation Weren’t Immediately Visible, Users Often Felt Confused.
e.g. After Creating “Snedgar Likes a Hat,” Users Had to Wait for the Agent to Interact with a Hat Before Seeing Any Effect, Making It Unclear Whether Their Input Had Worked
Now Immediate Visual Feedback is Added to Indicate That a Change in the Knowledge Representation Has Been Successfully Applied to the AI Agent
➡Users have a smoother UX and learning experience understanding human input in knowledge representations and its effects
Final Thought
Testing Knowledge Net at Our Lab's Building
This project was a perfect blend of problem-solving and creative design, and I often found myself thinking, "Is this really my job?" because I truly loved the experience. What I valued most was the collaborative development process with fellow developers and researchers, as we worked to find the most effective ways to teach participants about AI's knowledge representation. The iterative nature of the project involved not only revising design prototypes but also refining learning goals and conjecture maps, which helped me develop an investigative mindset about how people learn effectively. And through these team discussions, I honed my communication skills, ensuring that design updates and prototypes fostered meaningful and actionable feedback.
As the lead for UI/UX and visual design, I have also focused on maintaining development efficiency by creating a new design system. This experience reinforced the importance of balancing creativity with practicality in design and development as a part of the team. Working on this collaborative project taught me to approach challenges from multiple perspectives, combining technical, creative, and user-focused approaches to deliver a cohesive and impactful solution.
.png)
