Scaler's live learning environment.
Concentration isn't shaped by a feature alone; attention wanes for a variety of reasons
Concentration isn't shaped by a feature alone; attention wanes for a variety of reasons
External interruptions are inherently unpredictable, making the platform’s direct influence the primary lever: managing on-screen noise.
Rather than simply counting down time, the feature could help protect that session from avoidable disruptions. I made one key assumption here: students choosing to use it already had an intention to concentrate. The goal was to support those who had decided to focus. How might we help students manage distractions during live sessions?
Entry point
One of the key considerations was the entry point for Focus Mode. High discoverability was essential, so I opted for a prominent header placement rather than burying it inside a secondary menu.
Because muting popups and initiating focus blocks alters the classroom experience at a platform level, placing the control in the top navigation establishes clear global hierarchy and immediate access.
Entry point
One of the key considerations was the entry point for Focus Mode. High discoverability was essential, so I opted for a prominent header placement rather than burying it inside a secondary menu.
Because muting popups and initiating focus blocks alters the classroom experience at a platform level, placing the control in the top navigation establishes clear global hierarchy and immediate access.
(T to B) Entry point buried in contextual side panels; Prominent global header placement.
Setting up a focus session
Before starting, users can match the tool to their personal study cadence. Instead of imposing a single rigid approach, the setup overlay balances structured presets—such as Pomodoro-inspired intervals—with customizable durations and flexible distraction-blocking toggles.
Setting up a focus session
Before starting, users can match the tool to their personal study cadence. Instead of imposing a single rigid approach, the setup overlay balances structured presets—such as Pomodoro-inspired intervals—with customizable durations and flexible distraction-blocking toggles.
Choose a duration and configure distraction controls.
Active State
Early prototypes included controls to adjust durations on the fly, but I hypothesized that allowing mid-session changes defeats the point of committing to a focus block. After validating this rationale in a critique session with peers and mentors, we stripped away active-state controls to streamline and strictly enforce that boundary.
Active State
Early prototypes included controls to adjust durations on the fly, but I hypothesized that allowing mid-session changes defeats the point of committing to a focus block. After validating this rationale in a critique session with peers and mentors, we stripped away active-state controls to streamline and strictly enforce that boundary.
Additionally, in an interface already displaying multiple time-based metrics, a bare numerical readout (e.g., 20:00) risks confusion with elapsed time or recording status. Pairing the countdown directly with a distinct icon establishes clarity.
Cross-Platform Continuity
Initial experimentation with a compact icon-based layout for smaller screens was intended to reduce the timer’s visual footprint. However, the increased contrast caused it to pop and pull focus away from the live lecture. Returning to the desktop countdown pill created a more consistent, low-profile treatment across both screen sizes and kept distraction to a minimum.
Reusing this pattern allowed me to maintain identical setup flows and interaction logic across both desktop and mobile, ensuring a unified, platform-agnostic experience while respecting mobile screen constraints.
What if the session didn't end when a student switches from laptop to phone? Observing mid-class device handoffs made it clear that continuity matters. Real-time state synchronization keeps the active countdown running seamlessly across screens, preserving their exact session progress.
Completion
Upon hitting zero, the timer briefly animates to confirm completion before transitioning back to its initial state—ensuring an uninterrupted flow without forcing immediate interaction. Light haptic feedback provides a subtle tactile cue on supported devices.
Completion
Upon hitting zero, the timer briefly animates to confirm completion before transitioning back to its initial state—ensuring an uninterrupted flow without forcing immediate interaction. Light haptic feedback provides a subtle tactile cue on supported devices.
Since concentration is inherently qualitative, evaluating Focus Mode relies on observing real classroom behavior: whether the controls stay out of the way during lectures and if students consistently return to the tool across complex topics.
A natural next step would be connecting focus milestones to Scaler’s classroom leaderboard—turning intentional, distraction-free study blocks into a rewarding, habit-building loop.
Conclusion & Learnings
This was an effort to address a critical touchpoint in the student journey: when a student feels overwhelmed by on-screen noise and decides to lock in. Designing for it uncovered far more edge cases and product decisions than I initially expected. Thinking through different scenarios reinforced how even simple interactions have wider implications across the broader experience.
While early usability tests with a small pool of students validated the core direction, true results will come from tracking engagement and drop-off rates across diverse classroom environments post-launch. I’m excited to see the long-term impact this will have on student focus and retention during live sessions. With more time, I’d focus on refining this core interaction further—particularly how the timer behaves across different distraction states, session lengths, and device transitions.
Thankyou :)
Conclusion & Learnings
This was an effort to address a critical touchpoint in the student journey: when a student feels overwhelmed by on-screen noise and decides to lock in. Designing for it uncovered far more edge cases and product decisions than I initially expected. Thinking through different scenarios reinforced how even simple interactions have wider implications across the broader experience.
While early usability tests with a small pool of students validated the core direction, true results will come from tracking engagement and drop-off rates across diverse classroom environments post-launch. I’m excited to see the long-term impact this will have on student focus and retention during live sessions. With more time, I’d focus on refining this core interaction further—particularly how the timer behaves across different distraction states, session lengths, and device transitions.
Thankyou :)
