Designing Better Science Learning: Building the “Flower Reproductive Structures” Interactive
Teaching biology to young learners often begins with something familiar: flowers. But explaining how flowers reproduce—and why stamens and pistils matter—isn’t always simple. That’s where well-designed educational interactives can help.
Recently, we built an interactive learning module for primary school students that introduces the reproductive structures of flowers through a clean illustration, multiple learning modes, and built-in assessment. This post shares the journey behind the tool—what worked, what didn’t, and the research principles that shaped the final design.
 |
| final output |
 |
| older AI generated SVG which didn't help student see the real flower |
 |
| desired world view of flower, sync up with textbook representation |
Why We Built This Interactive
At its core, the module aims to help students:
-
Identify key reproductive parts of a flower
-
Understand the male vs. female structures
-
Connect biological function to real-world examples (e.g., fruits and seeds)
To achieve this, the module offers three modes:
-
Explore Mode – click and learn freely
-
Guided Learning Mode – structured step-by-step instruction
-
Check Understanding Mode – built-in quiz with feedback
This multi-pathway approach gives students autonomy while also supporting teachers who prefer explicit instruction.
The Journey: From AI-Generated Images to Scientific Accuracy
Attempt 1: AI-Generated Diagrams
Like many modern projects, we began by testing AI image generation. The tools produced aesthetically pleasing flowers, but we quickly ran into a major problem:
The images looked convincing, but the science wasn’t.
older AI generated SVG which didn't help student see the real flower
Petals became leaves, stamens became stylized shapes, and reproductive structures were often missing or mislabeled. After several iterations, we learned an important lesson:
In educational design, accuracy must beat convenience.
The Pivot: User-Provided Scientific Diagram
To fix this, we switched to a manually drawn, curriculum-aligned diagram supplied by the educator. This solved three key issues:
-
Correct botanical terminology
-
Proper labeling and spatial relationships
-
Visual authenticity students could trust
What we gained wasn’t just accuracy—it was integrity. Students learn better when the representations are true to life.
Solving the User Experience Challenges
With the right image secured, we moved on to interactivity. This part took three significant iterations:
Iteration 1: SVG Clickable Hotspots
The original idea was visually elegant—overlay invisible clickable zones on top of the image.
The problem: raster images and scalable vector overlays don’t share the same coordinate system.
No matter what we tried, alignment broke under different screen sizes.
Iteration 2: Direct Label Overlays
Next, we attempted to overlay text directly onto the image.
The problem: it worked on our screens, but collapsed on mobile and responsive layouts. Labels shifted, overlapped, or disappeared entirely.
Iteration 3: Side Panel Labels (Final Design)
The final solution was deceptively simple:
-
Keep the flower diagram clean
-
Place all labels as clickable buttons in a side panel
Benefits:
-
No coordinate alignment issues
-
Works on desktop, tablet, and mobile
-
Supports accessible keyboard navigation
-
Reduces cognitive load for young learners
Sometimes the best interface is the one that removes complexity rather than adding features.
Inside the Interactive
The module ships as a fully offline web asset with this file structure:
Each part of the flower is defined in script.js using a clear data structure:
This data-driven approach makes the module easy to update, extend, or adapt for other biological topics.
Designing for Real Classrooms
Throughout development, we made design choices guided by one principle:
A good interactive should make the learning visible and the interface invisible.
Here are the key decisions that shaped the finished tool:
1. Content Accuracy for Age Level
-
Scientific terminology remains correct
-
Explanations are simplified, not dumbed down
-
Real examples (like “apples are ovaries”) increase relevance
This avoids misconceptions that can persist for years.
2. Multiple Learning Modes
Different students learn differently, so the module supports:
-
Self-directed exploration
-
Sequenced instruction
-
Low-stakes assessment
This aligns with modern formative assessment practices.
3. Clear Visual Hierarchy
We reduced cognitive load by:
-
Using one main image as the visual anchor
-
Offloading text and labels to separate panels
-
Color-coding male vs. female structures
Students never have to guess “what matters” on the screen.
4. Immediate Feedback
Assessment items include:
-
Multiple-choice questions
-
Fill-in-the-blank items
-
Explanatory feedback messages
Feedback isn’t just “correct/incorrect”—it tells students why.
5. Accessibility & Inclusivity
The interface supports:
-
High contrast colors
-
Keyboard navigation
-
Touch-friendly buttons
-
Alt text for screen readers
These aren’t add-ons—they’re part of the design requirements.
The Research Behind the Design
The module is not just intuitive—it’s grounded in learning science. Here are the major influences:
Cognitive Load Theory (Sweller)
Young learners have limited working memory. So we:
-
Chunked information
-
Removed noisy overlays
-
Paired visuals with short text
Constructivist Learning (Piaget / von Glasersfeld)
Explore Mode supports knowledge construction through:
-
Curiosity
-
Discovery
-
Self-pacing
Self-Determination Theory (Deci & Ryan)
Three psychological needs drive intrinsic motivation:
| Need | Implementation |
|---|---|
| Autonomy | Students choose modes & parts |
| Competence | Quizzes + guided steps |
| Relatedness | Real-world plant biology |
Mayer’s Multimedia Learning Principles
We applied:
-
Coherence Principle (remove distractions)
-
Segmentation Principle (guided steps)
-
Modality Principle (visual + verbal pairing)
-
Pre-training Principle (simple definitions first)
This reduces frustration and improves retention.
What Makes This Interactive Work
For Students
-
They feel in control
-
Information comes in digestible pieces
-
Feedback is immediate and helpful
-
Real-world connections make it meaningful
For Teachers
-
Can be used whole-class or individually
-
Supports inquiry, direct teaching, or revision
-
Assessment is built-in
-
Scientifically accurate and curriculum-aligned
For Educational Designers
-
Shows the importance of testing and iteration
-
Demonstrates accessibility by default
-
Uses scalable, extendable architecture
-
Serves as a template for future biology topics
Final Thoughts
Building educational technology is always a balancing act:
-
Accuracy vs. Aesthetics
-
Engagement vs. Cognitive Load
-
Features vs. Simplicity
This project demonstrated that the best solutions often come from stripping away complexity rather than adding more of it.
If there’s a single lesson from this build, it’s this:
The best interactives disappear—students remember the learning, not the interface.
References & Further Reading
-
Mayer, R. (2009). Multimedia Learning
-
Sweller, J. et al. (2011). Cognitive Load Theory
-
Deci & Ryan (2000). Self-Determination Theory
-
Wiliam & Black (2004). Assessment for Learning
-
WCAG 2.1 Accessibility Guidelines (W3C)