Oppia’s iframeexperience
Making embedded lessons more focused, accessible, and intuitive — without asking learners to leave the lesson.
Project overview
& context
One learning experience. Many host platforms. Very little room for distraction.
The canvas
Oppia is an open-source educational platform dedicated to accessible, high-quality interactive lessons for learners worldwide, particularly in underserved communities.
A key way to distribute Oppia content is through an embeddable iframe widget hosted on third-party learning portals and school platforms.
A lesson inside a smaller world.
Inside an iframe, screen space is limited and the host environment can vary. The player needed to keep the lesson at the centre while making supporting tools easy to reach and use.
Research &
problem discovery
A heuristic review and synthesis of student and educator feedback surfaced three recurring points of friction.
Fragmented audio & language controls
Playback, volume, and language selection lacked a clear unified pattern. Learners listening in regional languages often paused or replayed sections to recover context.
Audio continuityResources competing with the lesson
Glossaries, hints, and notes either occupied valuable canvas space or were hidden so deeply that learners could overlook them.
Cognitive loadRigid embedded layouts
Host platforms used different container sizes. Some components clipped or wrapped awkwardly on tablet and netbook screens used in school labs.
Responsive behaviourStay in the lesson.
Keep attention on the current question, with secondary resources available only when needed and without losing progress or context.
Be predictable everywhere.
Keep controls legible, states obvious, and interaction targets usable inside a range of iframe widths and input methods.
UX strategy &
information architecture
The redesign focused on keeping learners in the lesson while making essential feedback and audio tools clear, accessible, and available in context.
01 / Contextual learner feedback
When a learner selects an incorrect answer, the interface provides clear feedback and invites them to try again while keeping the lesson context visible.
02 / Audio & language controls
Audio playback, language selection, progress, and replay controls are grouped into a persistent bar, making narration easier to access without competing with the lesson content.
03 / In-lesson feedback panel
A dedicated feedback panel lets learners write and submit comments without replacing the lesson experience, keeping the feedback action clear and focused.
UI execution &
component design
Inside constrained layouts, visual hierarchy and reliable interaction states are functional requirements—not decoration.
High-contrast feedback
Active playback, selected languages, and hint states use clear, legible indicators to communicate what is happening at a glance.
Touch-friendly targets
Controls were designed around a minimum 44 × 44 px target size to support touch and pointer interaction on compact devices.
Fluid viewport behaviour
A modular grid and flexible spacing help the interface adapt to varying iframe widths and reduce clipping or horizontal scrolling.
Consistent component states
Reusable patterns give controls predictable placement and feedback across lessons, utilities, and host environments.
Explore the Oppia iframe experience.
Navigate the prototype to see how lesson content, audio controls, language selection, and contextual feedback fit together within a compact embedded player.
Impact &
key learnings
The project outcomes focused on making supporting tools less of a barrier between learners and the lesson itself.
Faster audio and language switching
Reported reduction in task completion time when switching audio tracks and narration languages.
Reported project outcomeMore focus on learning
User testing indicated that students spent less time navigating settings and more time engaging with interactive prompts, with higher lesson completion rates.
Reusable integration pattern
A modular design pattern was created to support adoption across partner portals while reducing layout regressions.
Impact figures and qualitative outcomes are based on the project notes available for this case study. The original test sample size was not retained in the recovered material.
Designing within an iframe is an exercise in visual discipline. Every pixel, margin, and drawer transition must justify its presence.
Designer’s reflection · Oppia iframe experience
Accessibility is part of the structure.
Accessible target sizes, clear control states, and reduced cognitive load need to shape the architecture from the beginning—not be added after the interface is complete.
The host is not always predictable.
Embedded experiences must work within another product’s constraints. Flexible layout rules and modular components are essential to protect the learning experience.