Designing a Focus Mode for live learning sessions
Team
Kishan V ( Design Manager )
Introduction
Live classes are a core part of Scaler's learning experience, where students learn directly from instructors while interacting through chat, Q&A, and other in-class tools. But being present doesn't always mean staying focused.
Note : This was a 24-hour design assignment that gave me the opportunity to step into Scaler's product, understand its existing patterns and constraints, and explore how a new feature could become a natural part of the learning experience.
Introduction
Live classes are a core part of Scaler's learning experience, where students learn directly from instructors while interacting through chat, Q&A, and other in-class tools. But being present doesn't always mean staying focused.
Note : This was a 24-hour design assignment that gave me the opportunity to step into Scaler's product, understand its existing patterns and constraints, and explore how a new feature could become a natural part of the learning experience.
Introduction
Live classes are a core part of Scaler's learning experience, where students learn directly from instructors while interacting through chat, Q&A, and other in-class tools. But being present doesn't always mean staying focused.
Note : This was a 24-hour design assignment that gave me the opportunity to step into Scaler's product, understand its existing patterns and constraints, and explore how a new feature could become a natural part of the learning experience.
Design Brief
Design a study timer feature that helps students maintain concentration during live learning sessions.
Design Brief
Design a study timer feature that helps students maintain concentration during live learning sessions.
I joined a Scaler live class to observe how the experience unfolded - from following the instructor to navigating chat, Q&A, and other in-class interactions.
I joined a Scaler live class to observe how the experience unfolded - from following the instructor to navigating chat, Q&A, and other in-class interactions.
Scaler's live learning environment.
Concentration isn't shaped by a feature alone. A student's attention can drift for many reasons.
Concentration isn't shaped by a feature alone. A student's attention can drift for many reasons.
Distractions
Many of these were beyond the product's control. It couldn't stop someone from checking their phone or hearing a knock on the door. That narrowed the scope to the parts of the experience the product could feasibly influence : on-screen.
Rather than simply counting down time, it could help protect that time from avoidable distractions. I made one key assumption here: students choosing to use the feature already had some intention to concentrate. The goal wasn't to force attention, but to support those who had decided to focus. How might we help students manage avoidable distractions during live learning sessions?
Many of these were beyond the product's control. It couldn't stop someone from checking their phone or hearing a knock on the door. That narrowed the scope to the parts of the experience the product could feasibly influence : on-screen.
Rather than simply counting down time, it could help protect that time from avoidable distractions. I made one key assumption here: students choosing to use the feature already had some intention to concentrate. The goal wasn't to force attention, but to support those who had decided to focus. How might we help students manage avoidable distractions during live learning sessions?
Entry point
One of the considerations was where the timer should live within the live-class interface. Because it influences the overall learning experience instead of a single classroom interaction, the top bar felt like the most appropriate place alongside other global level controls.
Entry point
One of the considerations was where the timer should live within the live-class interface. Because it influences the overall learning experience instead of a single classroom interaction, the top bar felt like the most appropriate place alongside other global level controls.
Tapping the timer opens the Focus Mode setup.
Setting up a focus session
Before starting, the user should be able to configure the session in just a few decisions. This became an important step because study preferences vary from person to person. The setup offers custom durations, Pomodoro-inspired presets, and optional distraction controls, allowing users to tailor the experience to their preferences.
Setting up a focus session
Before starting, the user should be able to configure the session in just a few decisions. This became an important step because study preferences vary from person to person. The setup offers custom durations, Pomodoro-inspired presets, and optional distraction controls, allowing users to tailor the experience to their preferences.
Choose a duration and configure distraction controls.
Active State
The initial version included both the countdown and controls to edit the session duration. During feedback, peers questioned whether students needed to adjust the timer after already committing to focus. While this assumption would ultimately need validation through usability testing, it led me to simplify the active state.
Active State
The initial version included both the countdown and controls to edit the session duration. During feedback, peers questioned whether students needed to adjust the timer after already committing to focus. While this assumption would ultimately need validation through usability testing, it led me to simplify the active state.
In a live-class interface with other time-based information, 20:00 on its own could be interpreted as elapsed time, time remaining or session recordings. Pairing it with the Focus Mode icon makes its purpose clearer at a glance.
In a live-class interface with other time-based information, 20:00 on its own could be interpreted as elapsed time, time remaining or session recordings. Pairing it with the Focus Mode icon makes its purpose clearer at a glance.
Across screens
Smaller screens required a different balance between visibility and available space. I explored whether the countdown should collapse into a compact state or preserve the same interaction used on desktop. Given the context of a live class, I leaned towards consistency, keeping Focus Mode accessible without drawing attention away from the lesson.
Across screens
Smaller screens required a different balance between visibility and available space. I explored whether the countdown should collapse into a compact state or preserve the same interaction used on desktop. Given the context of a live class, I leaned towards consistency, keeping Focus Mode accessible without drawing attention away from the lesson.
The setup itself remains platform-agnostic, preserving the same duration and distraction controls while adapting to the available space across screens.
The setup itself remains platform-agnostic, preserving the same duration and distraction controls while adapting to the available space across screens.
A natural extension of the experience was device switching. Rather than tying the timer to a single device, it could continue seamlessly across desktop and mobile.
A natural extension of the experience was device switching. Rather than tying the timer to a single device, it could continue seamlessly across desktop and mobile.
Completion
With a little time left, I explored one final interaction: what happens when the timer reaches zero? Rather than adding another step for the student to dismiss, the timer briefly animates to acknowledge completion before returning to its original state, with light haptic feedback adding a physical cue on supported devices.
Completion
With a little time left, I explored one final interaction: what happens when the timer reaches zero? Rather than adding another step for the student to dismiss, the timer briefly animates to acknowledge completion before returning to its original state, with light haptic feedback adding a physical cue on supported devices.
Since attention can't be measured directly, I'd evaluate Focus Mode through activation rate, session completion, repeat usage across future classes, and post-session feedback to understand both adoption and perceived value of the feature.
One opportunity I'd be excited to explore next is integrating it with Scaler's existing leaderboard, rewarding consistency across classes and encouraging students to build stronger study habits over time.
Since attention can't be measured directly, I'd evaluate Focus Mode through activation rate, session completion, repeat usage across future classes, and post-session feedback to understand both adoption and perceived value of the feature.
One opportunity I'd be excited to explore next is integrating it with Scaler's existing leaderboard, rewarding consistency across classes and encouraging students to build stronger study habits over time.
Conclusion & Learnings
Despite being a relatively small feature, designing Focus Mode uncovered far more edge cases and product decisions than I initially expected. Thinking through different scenarios reinforced how even simple interactions can have wider implications across the experience.
A few assumptions still remain to be validated with students - most importantly, whether Focus Mode solves a genuine need or is simply a nice-to-have. Thankyou :)
Conclusion & Learnings
Despite being a relatively small feature, designing Focus Mode uncovered far more edge cases and product decisions than I initially expected. Thinking through different scenarios reinforced how even simple interactions can have wider implications across the experience.
A few assumptions still remain to be validated with students - most importantly, whether Focus Mode solves a genuine need or is simply a nice-to-have. Thankyou :)