A centralized dashboard providing full visibility into campaign status, approvals, and distribution across regions and channels
EdTech Learning Player
From legacy desktop player to multi-device learning
Lead Product Designer, End-to-end UX & UI
1 Product Designer (Part-time), 6 Devs, 3 PMs, 3 QAs
3 years
Lead Product Designer, End-to-end UX & UI
1 Product Designer (Part-time), 6 Devs, 3 PMs, 3 QAs
3 years
Lead Product Designer, End-to-end UX & UI
1 Product Designer (PT), 6 Devs, 3 PMs, 3 QAs
3 years
TL;DR
A mobile-first learning experience optimized for scale
Impact:
Achieved 100% mobile activity completion by modernizing legacy desktop architecture, eliminating device switching while significantly reducing technical debt
Solution:
A fully responsive, real-time player optimized for both live classroom participation and remote assignments. We transformed a partially responsive legacy system into a smooth mobile experience.
Key takeaway:
Effective mobile-first design requires making intentional trade-offs for mobile simplicity.
TL;DR
A mobile-first learning experience optimized for scale
Impact:
Achieved 100% mobile activity completion by modernizing legacy desktop architecture, eliminating device switching while significantly reducing technical debt
Solution:
A fully responsive, real-time player optimized for both live classroom participation and remote assignments. We transformed a partially responsive legacy system into a smooth mobile experience.
Key takeaway:
Effective mobile-first design requires making intentional trade-offs for mobile simplicity.
TL;DR
A mobile-first learning experience optimized for scale
Impact:
Achieved 100% mobile activity completion by modernizing legacy desktop architecture, eliminating device switching while significantly reducing technical debt
Solution:
A fully responsive, real-time player optimized for both live classroom participation and remote assignments. We transformed a partially responsive legacy system into a smooth mobile experience.
Key takeaway:
Effective mobile-first design requires making intentional trade-offs for mobile simplicity.
Open Dicussion
Open Dicussion
Poll
Poll
CONTEXT
National-Scale Learning
CONTEXT
National-Scale Learning
CONTEXT
National-Scale Learning
Before redesigning, we aligned on how learning should work in live classrooms:
STRATEGY & FOUNDATIONS
From Legacy Architecture to Responsive Learning
The
Challenge
Transforming a rigid, desktop-first player into a fully responsive ecosystem, one that could support both classroom and independent learning.
The
Challnge
Transforming a rigid, desktop-first player into a fully responsive ecosystem, one that could support both classroom and independent learning.
The
Challenge
Transforming a rigid, desktop-first player into a fully responsive ecosystem, one that could support both classroom and independent learning.
How we
Worked
Working closely with product, LXDs, and pedagogy, we navigated technical debt and tight timelines through pragmatic trade-offs.
How we
Worked
Working closely with product, LXDs, and pedagogy, we navigated technical debt and tight timelines through pragmatic trade-offs.
How we
Worked
Working closely with product, LXDs, and pedagogy, we navigated technical debt and tight timelines through pragmatic trade-offs.
Design
Principles
Design
Principles
Design
Principles
USERS & PAIN POINTS
Bridging the Gap for Teachers and Students
Both user groups required speed and reliability, but the legacy player simply wasn’t ready for real-time learning.
Teachers
I just want to quickly review lessons and student work when I’m not at my computer.
The Pain: Lack of mobile parity forced a heavy dependency on desktops for basic administrative tasks.
75% of teachers
Reported an inability to effectively manage or review lesson content on the go.
Teachers
I just want to quickly review lessons and student work when I’m not at my computer.
The Pain: Lack of mobile parity forced a heavy dependency on desktops for basic administrative tasks.
75% of teachers
Reported an inability to effectively manage or review lesson content on the go.
Teachers
I just want to quickly review lessons and student work when I’m not at my computer.
The Pain: Lack of mobile parity forced a heavy dependency on desktops for basic administrative tasks.
75% of teachers
Reported an inability to effectively manage or review lesson content on the go.
Students
Some activities just don’t work on my phone. It’s really annoying.
The Pain: Broken features and poor responsiveness forced students to switch devices mid-task, shattering their learning flow.
90% of students
struggled to complete activities due to limited mobile support.
Students
Some activities just don’t work on my phone. It’s really annoying.
The Pain: Broken features and poor responsiveness forced students to switch devices mid-task, shattering their learning flow.
90% of students
struggled to complete activities due to limited mobile support.
Students
Some activities just don’t work on my phone. It’s really annoying.
The Pain: Broken features and poor responsiveness forced students to switch devices mid-task, shattering their learning flow.
90% of students
struggled to complete activities due to limited mobile support.
THE PROBLEM
System Fragmentation
CET’s ecosystem relied on incompatible systems for authoring and playback. This created a widening gap between content creation and multi-device consumption.
Structural Redundancy: Overlapping legacy patterns that hindered real-time, versatile learning.
Structural Redundancy: Overlapping legacy patterns that hindered real-time, versatile learning.
Inconsistent Logic: Fragmented mental models that failed to scale across diverse learning contexts.
Inconsistent Logic: Fragmented mental models that failed to scale across diverse learning contexts.
Rigid Architecture: A desktop-centric foundation that couldn't support a unified responsive experience
Rigid Architecture: A desktop-centric foundation that couldn't support a unified responsive experience
SOLUTION ARCHITECTURE
Adapting for Mobile Reality
Three Strategic Moves:
Mobile-first, no rewrites:
Reshaped content delivery for small screens while accepting legacy structural constraints.
Mobile-first, no rewrites:
Reshaped content delivery for small screens while accepting legacy structural constraints.
Mobile-first, no rewrites:
Reshaped content delivery for small screens while accepting legacy structural constraints.
Classroom participation:
Optimized quizzes and polls for the devices students already had, enabling real-time collaboration.
Classroom participation:
Optimized quizzes and polls for the devices students already had, enabling real-time collaboration.
Classroom participation:
Optimized quizzes and polls for the devices students already had, enabling real-time collaboration.
Intentional trade-offs:
Prioritized reliability over desktop feature parity, removing complex, fragile interactions.
Intentional trade-offs:
Prioritized reliability over desktop feature parity, removing complex, fragile interactions.
Intentional trade-offs:
Prioritized reliability over desktop feature parity, removing complex, fragile interactions.
System Rules: Standardizing the Mobile Experience
System Rules: Standardizing the Mobile Experience
System Rules: Standardizing the Mobile Experience
To ensure consistency across thousands of activities, we implemented three system-level rules:
To ensure consistency across thousands of activities,
we implemented three system-level rules:
01
Universal Scaling
A single scaling rule replaced breakpoint-specific layouts, preserving hierarchy without per-screen redesigns.
This ensured content remained readable and usable without redesigning layouts per device.
01
Universal Scaling
A single scaling rule replaced breakpoint-specific layouts, preserving hierarchy without per-screen redesigns.
This ensured content remained readable and usable without redesigning layouts per device.
01
Universal Scaling
A single scaling rule replaced breakpoint-specific layouts, preserving hierarchy without per-screen redesigns.
This ensured content remained readable and usable without redesigning layouts per device.
02
Structural Integrity
Kept tables intact instead of breaking them into cards to preserve the pedagogical need for comparative learning.
Preserving structure enabled comparative learning without sacrificing mobile usability.
02
Structural Integrity
Kept tables intact instead of breaking them into cards to preserve the pedagogical need for comparative learning.
Preserving structure enabled comparative learning without sacrificing mobile usability.
02
Structural Integrity
Kept tables intact instead of breaking them into cards to preserve the pedagogical need for comparative learning.
Preserving structure enabled comparative learning without sacrificing mobile usability.
03
No More Broken Mobile Flows
Supported only 100% mobile-complete actions to eliminate broken flows and device-switching.
This allowed students to complete activities end to end on mobile, without switching devices mid-flow.
03
No More Broken Mobile Flows
Supported only 100% mobile-complete actions to eliminate broken flows and device-switching.
This allowed students to complete activities end to end on mobile, without switching devices mid-flow.
03
No More Broken Mobile Flows
Supported only 100% mobile-complete actions to eliminate broken flows and device-switching.
This allowed students to complete activities end to end on mobile, without switching devices mid-flow.
IMPACT
From Legacy Playback to Live Interaction
The new Player launched at the beginning of the school year, transforming the mobile device from a limitation into a primary tool for participation.
Frictionless Completion
Achieved 100% activity completion on mobile, eliminating forced device-switching and broken flows.
Frictionless Completion
Achieved 100% activity completion on mobile, eliminating forced device-switching and broken flows.
Frictionless Completion
Achieved 100% activity completion on mobile, eliminating forced device-switching and broken flows.
Live Classroom Synergy
Enabled real-time participation (polls, quizzes, discussions) on the devices students actually own.
Live Classroom Synergy
Enabled real-time participation (polls, quizzes, discussions) on the devices students actually own.
Live Classroom Synergy
Enabled real-time participation (polls, quizzes, discussions) on the devices students actually own.
Systemic Scalability
Established universal translation rules that allow for future evolution without rewriting existing content.
Systemic Scalability
Established universal translation rules that allow for future evolution without rewriting existing content.
Systemic Scalability
Established universal translation rules that allow for future evolution without rewriting existing content.
Operational Efficiency
Reduced long-term maintenance costs and technical debt by unifying the playback logic.
Operational Efficiency
Reduced long-term maintenance costs and technical debt by unifying the playback logic.
Operational Efficiency
Reduced long-term maintenance costs and technical debt by unifying the playback logic.
A collaborative plenary lesson where student-created projects become shared classroom discussion.
A collaborative plenary lesson where student-created projects become shared classroom discussion.
A collaborative plenary lesson where student-created projects become shared classroom discussion.
DESIGN TRADEOFFS & LEARNINGS
01
Scalability Needs Clear Rules
Designing for thousands of activities taught me that strict system rules are the only way to ensure consistency at scale.
02
Constraints Improve Reliability
Accepting mobile limitations early allowed us to deliver a 100% reliable experience rather than a "broken" desktop clone.
03
Context-First Design
By designing for the reality of the classroom, we enabled collaborative learning that works in high-stakes, real-time environments.
This project reinforced my belief that strong product design emerges when systems are built for real classrooms, real constraints, and moments where failure is not an option.
DESIGN TRADEOFFS & LEARNINGS
01
Scalability Needs Clear Rules
Designing for thousands of activities taught me that strict system rules are the only way to ensure consistency at scale.
02
Constraints Improve Reliability
Accepting mobile limitations early allowed us to deliver a 100% reliable experience rather than a "broken" desktop clone.
03
Context-First Design
By designing for the reality of the classroom, we enabled collaborative learning that works in high-stakes, real-time environments.
This project reinforced my belief that strong product design emerges when systems are built for real classrooms, real constraints, and moments where failure is not an option.
DESIGN TRADEOFFS & LEARNINGS
01
Scalability Needs Clear Rules
Designing for thousands of activities taught me that strict system rules are the only way to ensure consistency at scale.
02
Constraints Improve Reliability
Meaningful learning experiences emerge when pedagogical goals are designed within technical and real-world constraints.
Accepting mobile limitations early enabled reliable, end-to-end participation instead of fragile feature parity.
03
Context-First Design
Looking beyond screens to real classroom conditions and usage patterns shaped more realistic product decisions.
Designing around the devices students actually have made collaborative, interactive lessons possible at scale.
This project reinforced my belief that strong product design emerges when systems are built for real classrooms, real constraints, and moments where failure is not an option.
Next Project
Next Project
EdTech Studio Ecosystem
Redesigning a fragmented EdTech ecosystem into a scalable platform.
EdTech Studio Ecosystem
Redesigning a fragmented EdTech ecosystem into a scalable platform.
EdTech Studio Ecosystem
Redesigning a fragmented EdTech ecosystem into a scalable platform.