🏆 HCI Conference Award Winner
Interactive Simulation-Based Learning System for Middle School Science
FingerTypoon
UX/UI | Tablet | APR 2014 - SEP 2014
Embedded Files
Finger Typhoon is an interactive iPad-based learning application designed to help middle school students understand the scientific principles of typhoon formation and movement through simulation-based learning.
Instead of passively consuming textbook information, students generate, manipulate, and experiment with typhoons in a controlled digital environment — enabling experiential, self-directed learning.
Timeline : April 2014 - September 2014
Type : Educational Science Application (Tablet)
Team: 2 members (Collaborative project)
Role: UX/UI Designer & Interaction Design Lead
Tools : Photoshop, Illustrator
Main Tasks:
UX structure & information architecture
Layout and visual system design
Interaction prototype and usability testing
Collaborative ideation and content structure planning
Problem
Traditional science education in Korean middle schools relied heavily on lecture-based instruction.
Students:
Memorized concepts without fully understanding cause-and-effect relationships
Had limited opportunities to experiment
Struggled to visualize large-scale atmospheric systems like typhoons
At the same time, the Korean government was introducing a nationwide “Smart Education” initiative, equipping classrooms with iPads and digital textbooks.
However, most digital tools still replicated static textbook experiences rather than leveraging interactive simulation.
Design Question
How might we design a self-directed, simulation-based learning experience that enables students to understand typhoon dynamics through direct manipulation and experimentation?
Target Users
Middle school students (science class)
Classroom environment with iPads
Group-based, exploratory learning context
The system was designed to support:
Collaborative discussion
Hypothesis-based experimentation
Visual pattern recognition
Design Strategy
The system was divided into two major modules:
A. Learn (Structured Knowledge)
A. Learn (Structured Knowledge)
Infographic-based explanation of typhoon formation, lifecycle, and impact
Interactive drag-and-drop exercises
Historical typhoon data visualized by year, damage scale, and intensity
This module reinforced foundational knowledge before experimentation.
B. Simulate (Experiential Learning)
B. Simulate (Experiential Learning)
Students can:
Generate a typhoon
Adjust environmental variables (temperature, wind direction, humidity)
Observe changes in movement and intensity
Answer guided scenario-based questions
Receive real-time feedback
The simulation transforms abstract meteorological concepts into observable cause-effect interactions.
Interaction Design Decisions
1. Direct Manipulation Interface
1. Direct Manipulation Interface
Students interact with the typhoon using touch gestures, reinforcing tactile engagement.
2. Step-Based Learning Flow
2. Step-Based Learning Flow
The simulation is structured as:
Explore
Experiment
Validate
Reflect
This prevents cognitive overload while maintaining autonomy.
3. Immediate Feedback Loop
3. Immediate Feedback Loop
When answers are incorrect, users are prompted to retry.
Correct answers provide confirmation and contextual explanation.
This design supports iterative reasoning rather than passive correction.
Information Architecture
The application structure includes:
Typhoon fundamentals
Formation conditions
Characteristics
Historical cases
Simulation lab
Scenario-based experiments
Data archive
The IA was designed to move from conceptual understanding → applied experimentation → contextual reinforcement.
Learning Design Framework
The system follows a “Head – Hands – Heart” model:
Head: Understand theoretical knowledge
Hands: Manipulate and experiment
Heart: Engage emotionally through interactive participation
This approach shifts science learning from memorization to inquiry-based exploration.
Platform & Technical Implementatio
Designed for iPad (classroom deployment)
JavaScript-based interactive logic
Real-time variable-driven visual renderin sg
Compatible with projector display for class demonstration
Outcome
Awarded at an HCI academic conference
Recognized for innovative integration of interaction design and educational simulation
Demonstrated effective transformation of passive content into experiential learning
Reflection
This project strengthened my ability to:
Translate complex systems into intuitive interaction models
Design cause-effect visual simulations
Structure guided autonomy within learning experiences
Balance cognitive load with exploratory freedom
Although developed as a graduation project, Finger Typhoon reflects foundational skills in systems thinking, interaction design, and experience architecture that continue to inform my product design work today.
Page updated
Google Sites
Report abuse