panasdingin.id

panasdingin.id

An immersive Gen-Z centred thermochemistry learning website to elevate high school students' representational competence.

An immersive Gen-Z centred thermochemistry learning website to elevate high school students’ representational competence.

Overview

Panasdingin.id is a web-based educational platform designed to eliminate the cognitive friction associated with traditional thermochemistry learning. By synthesizing interactive digital comics with molecular animations, the platform bridges the gap between abstract scientific theory and real-world phenomena.

The core purpose of this website is to provide XI grade students with an immersive learning ecosystem that sustains situational interest while systematically reducing cognitive overload.

This website is used for educational research in Thermochemistry learning purposes by the client

Role

UI/UX Designer & Project Coordinator

Research, Visual Design, Scriptwriting & Prototyping

Team

1 Subject Matter Expert

1 Illustrator

1 Web Developer

Duration

Jan 2026 - Mar 2026 | 3 Months

Client

a Master’s Student of Chemistry Education

Institut Teknologi Bandung (ITB)

Overview

Overview

Panasdingin.id is a web-based educational platform designed to eliminate the cognitive friction associated with traditional thermochemistry learning. By synthesizing interactive digital comics with molecular animations, the platform bridges the gap between abstract scientific theory and real-world phenomena.

Panasdingin.id is a web-based educational platform designed to eliminate the cognitive friction associated with traditional thermochemistry learning. By synthesizing interactive digital comics with molecular animations, the platform bridges the gap between abstract scientific theory and real-world phenomena.

The core purpose of this website is to provide students with an immersive learning ecosystem that sustains situational interest while systematically reducing cognitive overload.

The core purpose of this website is to provide students with an immersive learning ecosystem that sustains situational interest while systematically reducing cognitive overload.

This website is used for educational research in Thermochemistry learning purposes by the client

This website is used for educational research in Thermochemistry learning purposes by the client

Role

Role

UI/UX Designer & Project Coordinator

Research, Visual Design, Scriptwriting & Prototyping

Team

Team

1 Subject Matter Expert

1 Illustrator

1 Web Developer

1 Subject Matter Expert

1 Illustrator

1 Web Developer

Duration

Duration

Jan 2026 - Mar 2026 | 3 Months

Jan 2026 - Mar 2026 | 3 Months

Client

Client

Mr. Tiar (Master in Chemistry Education student)
Institut Teknologi Bandung (ITB)

The Problem

The Problem

High school thermochemistry is highly prone to student misconceptions due to the abstract, unobservable nature of energy. Conventional teaching exacerbates this disconnect by overemphasizing symbolic formulas rather than integrating the macroscopic, submicroscopic, and symbolic levels of representation. Furthermore, there is a critical shortage of educational media that leverages visual narratives and molecular modeling to actively bridge this cognitive gap.

High school thermochemistry is highly prone to student misconceptions due to the abstract, unobservable nature of energy. Conventional teaching exacerbates this disconnect by overemphasizing symbolic formulas rather than integrating the macroscopic, submicroscopic, and symbolic levels of representation. Furthermore, there is a critical shortage of educational media that leverages visual narratives and molecular modeling to actively bridge this cognitive gap.

Client Workshop

Client Workshop

Due to the tight timeline and also considered the amount of scope that should be managed, I thought it’s not possible to do the user research in the initial phase. We decided to go with the user testing before the app was used by the real student in class for the client research.

Due to the tight timeline and also considered the amount of scope that should be managed, I thought it’s not possible to do the user research in the initial phase. We decided to go with the user testing before the app was used by the real student in class for the client research.

To get more understanding on the request, I conducted brainstorming workshop with the client. My research encompassed:

To get more understanding on the request, I conducted brainstorming workshop with the client. My research encompassed:

  • Understanding the misconception in the thermochemistry learning

  • Intervention framework used by the client

  • Targeted users and the pain points

  • Understanding the misconception in the thermochemistry learning

  • Intervention framework used by the client

  • Targeted users and the pain points

Insights

Insights

After conducting workshop with the client, and analyzing the gathered data, I categorized the problems into 3 categories:

After conducting workshop with the client, and analyzing the gathered data, I categorized the problems into 3 categories:

The Conceptual Gap

The Conceptual Gap

Chemistry forces students to learn about invisible energy and abstract ideas, often leaving them lost in a sea of disconnected formulas

Chemistry forces students to learn about invisible energy and abstract ideas, often leaving them lost in a sea of disconnected formulas

The Tool Gap

The Tool Gap

Traditional classrooms train students to mechanically memorize formulas and calculate answers without understanding the science behind them. Furthermore, educators often lack the practical digital tools needed to show students how molecules actually interact.

Traditional classrooms train students to mechanically memorize formulas and calculate answers without understanding the science behind them. Furthermore, educators often lack the practical digital tools needed to show students how molecules actually interact.

The Engagement Gap

The Engagement Gap

Dense, static textbooks are completely out of touch with how today's Gen Z students naturally consume information.

Dense, static textbooks are completely out of touch with how today’s Gen Z students naturally consume information.

Theoretical Basis

Theoretical Basis

Explicit integration of multiple representations. The design orchestrates a structured, guided transition between the three levels of Johnstone's Triangle to ensure cohesive conceptual understanding.

Explicit integration of multiple representations. The design orchestrates a structured, guided transition between the three levels of Johnstone’s Triangle to ensure cohesive conceptual understanding.

The macroscopic level deals entirely with observable, tangible phenomena that can be experienced directly by the user. Digital comics function as this representation by visually depicting relatable, everyday scenarios (such as a smartphone heating up). This creates an intuitive anchor, allowing students to grasp the real-world context of energy transfer before they are introduced to abstract math or invisible particles.

The macroscopic level deals entirely with observable, tangible phenomena that can be experienced directly by the user. Digital comics function as this representation by visually depicting relatable, everyday scenarios (such as a smartphone heating up). This creates an intuitive anchor, allowing students to grasp the real-world context of energy transfer before they are introduced to abstract math or invisible particles.

The submicroscopic level involves entities that cannot be seen by the naked eye, such as atoms, molecules, and chemical bonds. Interactive particle animations serve as this representation by making the invisible visible. They allow users to actively visualize hidden molecular structures and observe exactly which specific chemical bonds are breaking and forming during a reaction.

The submicroscopic level involves entities that cannot be seen by the naked eye, such as atoms, molecules, and chemical bonds. Interactive particle animations serve as this representation by making the invisible visible. They allow users to actively visualize hidden molecular structures and observe exactly which specific chemical bonds are breaking and forming during a reaction.

The symbolic level utilizes formal chemical notation, formulas, and mathematical graphs to formally communicate processes. Cycle diagrams (such as Hess's Law energy cycles or Born-Haber cycles) act as this representation by translating the macroscopic phenomena and submicroscopic particle changes into standardized visual math. They map out thermodynamic variables and quantitative energy pathways, allowing students to calculate precise changes in enthalpy.

The symbolic level utilizes formal chemical notation, formulas, and mathematical graphs to formally communicate processes. Cycle diagrams (such as Hess’s Law energy cycles or Born-Haber cycles) act as this representation by translating the macroscopic phenomena and submicroscopic particle changes into standardized visual math. They map out thermodynamic variables and quantitative energy pathways, allowing students to calculate precise changes in enthalpy.

User Flow

User Flow

Micro-flow (Completing a Single Unit)

Micro-flow (Completing a Single Unit)

Goal: User engages with the content and successfully passes the unit's understanding questions.

Goal: User engages with the content and successfully passes the unit’s understanding questions.

Wireframe

Wireframe

I started to create the wireframe to visualize the concept and then sequentially finalize it to be developed. This allowed us to gauge technical feasibility, integrate developer ideation early, and establish a parallel workflow.

I started to create the wireframe to visualize the concept and then sequentially finalize it to be developed. This allowed us to gauge technical feasibility, integrate developer ideation early, and establish a parallel workflow.

Team workflow

Team workflow

Design

Design

  1. Story & Characters

Create Narration

School activities are the main narration setting. I created an onboarding experience from a student learning journey that starts from a wake-up alarm in the bedroom, school arrival and classroom situation.

Create Narration

School activities are the main narration setting. I created an onboarding experience from a student learning journey that starts from a wake-up alarm in the bedroom, school arrival and classroom situation.

Build Characters

After exploring some visual styles, I found that the Roblox game is successfully adopted by gen z population and it’s already played by millions of them in Indonesia. I took Roblox avatars as the source of inspiration to build 4 high school students and 1 teacher character. I also created unique personality for each character that would come through as they interact across the 14 comic series to enhance the story building. I assumed that this visual relevance could attract student and create positive energy that could sustain the learning process.

Build Characters

After exploring some visual styles, I found that the Roblox game is successfully adopted by gen z population and it’s already played by millions of them in Indonesia. I took Roblox avatars as the source of inspiration to build 4 high school students and 1 teacher character. I also created unique personality for each character that would come through as they interact across the 14 comic series to enhance the story building. I assumed that this visual relevance could attract student and create positive energy that could sustain the learning process.

  1. Comic series

the characters are involved in 14 comic series that contain real world phenomenon observation story that sparks the student curiosity.

the characters are involved in 14 comic series that contain real world phenomenon observation story that sparks the student curiosity.

  1. Interactive Particle Animation

fig1. H2O molecule

vid1. 2D particle animation of smartphone

vid2. 2D particle animation of water molecule

To create a model as part of the Johnstone’s submicroscopic level framework, I designed some animated 2D molecules. The goal of this feature was to give students an understanding about sub atomic level interaction visually. I consulted with the Client as Subject Matter Expert during the creation because the model has to be scientifically accurate.

To create a model as part of the Johnstone’s submicroscopic level framework, I designed some animated 2D molecules. The goal of this feature was to give students an understanding about sub atomic level interaction visually. I consulted with the Client as Subject Matter Expert during the creation because the model has to be scientifically accurate.

  1. Lesson Level System

vid3. unit cover list

vid4. understanding questions structure

The client created level as the foundation for the thermochemistry representation lesson structure. The client managed the unit structure by dividing into 3 levels starting from the foundation units (unit 1 & 2), thermochemistry essential units (unit 3 to 12 ) & advance units (unit 13 & 14).

The client created level as the foundation for the thermochemistry representation lesson structure. The client managed the unit structure by dividing into 3 levels starting from the foundation units (unit 1 & 2), thermochemistry essential units (unit 3 to 12 ) & advance units (unit 13 & 14).

I addressed the concept by designing 3 patterns:

I addressed the concept by designing 3 patterns:

  1. Cards for unit cover that was inspired by music album cover. Each card contains an illustration for the comic cover and the unit title. I designed infinite scroll card to enhance the engagement and make it feels seamless and immersive.

  2. After clicking the unit cover, user is navigated to the unit comic. This dedicated comic page was designed to make the user focus on observing science phenomenon before going to the respected lesson.

  3. When the user done with the lesson, user will continue working on the understanding questions (quiz). User required to get 100% of score to be able to continue to the next unit and user could take unlimited retest if user doesn't achieve the targeted score. I also created the questions review to help the user understand which question that need to be rechecked.

Validation

Validation

I didn’t conduct the user testing by myself. It was done by the client himself as a part of the validation process for the thesis.

The client directed the deployment of the live web application to 15 target users for real-world testing. The users highly rated the visual storytelling (scoring it 97.87%), successfully validating our core narrative hypothesis.

The client directed the deployment of the live web application to 15 target users for real-world testing. The users highly rated the visual storytelling (scoring it 97.87%), successfully validating our core narrative hypothesis.

98%

Visual Storytelling

93%

Multiple Representation

91%

Usability Rate

Classroom Deployment

Classroom Deployment

The iterated panasdingin.id platform was deployed in a real-world classroom of SMAN 49 Jakarta with 29 active users.

The iterated panasdingin.id platform was deployed in a real-world classroom of SMAN 49 Jakarta with 29 active users.

72.4% of users landed in the "High" category. Nearly three-quarters of the user base successfully filled over 70% of their total potential learning gap, proving the interface fundamentally repaired their mental models.

Using the student-level approach for Normalized Gain (N-gain), 72.4% of users landed in the “High” category. Nearly three-quarters of the user base successfully filled over 70% of their total potential learning gap, proving the interface fundamentally repaired their mental models.

*Top-Tier Efficacy (The N-Gain Metric by Hake's N-gain classification), N-Gain measures how much of a student's possible improvement they actually achieved.

*Top-Tier Efficacy (The N-Gain Metric by Hake's N-gain classification), N-Gain measures how much of a student's possible improvement they actually achieved.

What I Can Do Differently

What I Can Do Differently

Executing a rapid UX cycle within a strict academic and end-of-year timeline provided critical operational lessons. To optimize my methodology for future product cycles, I have identified three key areas for systemic improvement:

  1. Shift Generative Research Forward While our assumption driven approach effectively bypassed early roadblocks, relying entirely on evaluative (late-stage) testing carries inherent risk. Moving forward, I will mandate a strict, time boxed generative research at project kickoff. Validating core behavioral assumptions directly with users before establishing the technical architecture prevents costly pivots later in the development cycle.


  2. Implement Low-Fidelity Narrative Testing Waiting for high-fidelity, polished illustrations to validate our narrative hypotheses consumed unnecessary time and budget. I will institute early-stage guerrilla testing using raw, unpolished storyboards. Validating the narrative flow and cognitive hooks at the lowest possible fidelity ensures we only commit resources to art direction that is already proven to work.


  3. Establish Centralized Team Alignment because the team was distributed across different cities, the client initially requested a siloed, one-on-one communication structure (a hub-and-spoke model). This fragmented approach resulted in a lack of psychological connection, delayed progress reporting, and workflow friction. As a product lead, I must control the operational rhythm. In the future, I will mandate unified all-hands kickoffs and regular team syncs to foster shared commitment, accountability, and momentum, regardless of the client's initial organizational structure.

Create a free website with Framer, the website builder loved by startups, designers and agencies.