ABL Classroom Timer

Interactive Webapp for Action-Based Learning

UI/UX Design • Sound Design • React Development

Project Overview

I designed and developed a specialized tabata-style timer webapp for an Action-Based Learning (ABL) teacher managing 750+ students daily across three elementary grade levels. The application needed to seamlessly integrate classroom timing, music control, and accessibility features while maintaining a distraction-free learning environment.

Client: Elementary ABL Teacher
Timeline: 3 weeks (1 week prototyping → beta testing → 2 weeks refinement)
My Role: Solo UI/UX Designer & Developer

The Challenge

Action-Based Learning combines academic content with physical movement through rotating station activities—students might step through a rope ladder while spelling words, or solve math problems while balancing. The teacher needed a solution that could:

• Manage timing needs across different grade levels and activity types

• Control Spotify playback without leaving the timer interface

• Remain visible and readable across large classroom spaces

• Stay accessible for hearing-impaired students

• Minimize visual distractions during learning activities

Her existing setup required awkward switching between separate timer and Spotify apps, with limited customization for the diverse needs of different grade levels and activities.

Design Process

Research & Requirements Gathering

I conducted an in-depth meeting with the teacher to understand the specific challenges of ABL environments. Key insights emerged about the scale (750+ students), the need for different timing patterns across grade levels, and the critical importance of maintaining focus in active learning spaces.

Prototyping & Information Architecture

Starting with paper sketches, I mapped out a responsive design approach where components would rearrange rather than rebuild between desktop landscape and mobile portrait orientations. I identified three core interface elements:

1. Always-visible timer display with both numerical and circular progress indicators

2. Event playlist management for different activities and grade levels

3. Hidden Spotify integration to minimize visual distraction

Visual Design System

I developed a clean color palette with defined primary and accent colors, prioritizing:

• High contrast for cross-room readability

• Minimal cognitive load through essential-only information display

• Responsive typography scaling appropriately for distance viewing

Key Design Solutions

Distraction-Free Music Integration

Rather than always-visible album artwork that could distract students, I designed a toggle-based Spotify controller. A subtle music icon reveals a blurred-background overlay containing the full Spotify embed, allowing teachers to control playback without visual interference during activities.

Technical Innovation: Used Spotify's iFrame Embed API with persistent mounting to avoid playback interruptions when toggling visibility—a key technical challenge that required careful state management.

Inclusive Timer Design

The timer features dual information display: numerical countdown for reading practice and a circular progress indicator for immediate visual understanding. When time expires, the interface uses a gentle pulse animation (seizure-safe, low-contrast accent colors) paired with customizable audio cues—ensuring accessibility for hearing-impaired students.

Flexible Event Management

Teachers can create and customize "event playlists" for different activities, grade levels, or seasonal themes. The interface includes drag-and-drop reordering (added after user testing) and associates specific Spotify playlists with each event sequence, providing pedagogical flexibility as the school year progresses.

Sound Design

I composed a variety of alert sounds using Logic Pro X, approaching audio design with intentional harmonic choices:

• Major chord arpeggios for positive completion signals

• Dominant seventh chords for transition/continuation cues

• Dissonant timbres for attention-grabbing alerts

• Varied instrumentation (synthesizers, xylophone, percussion) for sonic variety

Each sound was crafted to cut through typical classroom Spotify volumes while remaining pleasant and non-jarring. The system includes adjustable gain controls for fine-tuning in different acoustic environments.

Technical Implementation

Stack: React + TypeScript, Vite bundling, Tailwind CSS, Web Audio API
Hosting: AWS Amplify
Data Persistence: Local storage with versioned schema for seamless updates

Key Technical Decisions

• No-account approach: Avoided signup friction with robust local storage architecture

• Spotify iFrame API: Chose embed approach over OAuth for classroom simplicity

• Audio mixing: Implemented master gain system for balancing timer cues with background music

Results & Impact

The teacher received a classroom-ready version 1.0 that successfully addressed all identified pain points. The solution provides:

• Streamlined workflow eliminating app-switching during instruction

• Visual accessibility readable across large classroom spaces

• Pedagogical flexibility through customizable event playlists

• Technical reliability with consistent audio/visual performance

Design Reflection

This project pushed me beyond my typical music education domain, requiring deep empathy for a specialized educational context I wasn't personally familiar with. The challenge of designing for dual audiences—the teacher needing efficient controls and students requiring clear, non-distracting feedback—strengthened my systems thinking approach.

The integration of thoughtful sound design with functional UI demonstrates my interdisciplinary approach, while the technical problem-solving around Spotify integration showcases adaptive development skills.

Future Iterations

Version 2.0 priorities include enhanced customization options (such as custom notifications with GIFs), cross-device synchronization, and expansion to other ABL educators.