SQOOL Connect

Product Design Lead-UX Strategy, UI Design, Prototyping-2020-2021

A web-based dashboard concept and persistent interaction prototype for classroom orchestration

Replacing a legacy Android launcher with modern, modular interfaces

By 2020, UNOWHY's Android launcher was increasingly difficult to maintain and evolve. The launcher acted as the main interface for students to access content, but it had become outdated and unsustainable on new Android systems. We envisioned Connect as a modern, web-based dashboard to replace the launcher for teachers and students, offering modular access to apps, session tools, and notifications. In parallel, we conceptualized "The Bubble", a persistent contextual UI prototype that would float above Android UI, offering quick and smart interactions.

SQOOL Connect Overview
Connect overview - Web-based dashboard concept for classroom orchestration.

Overview

Introduction

Between 2020 and 2021, the French EdTech company UNOWHY faced a turning point. Its long-standing Android-based launcher had reached technical and conceptual obsolescence. Originally built for primary and middle schools, the launcher offered limited flexibility and a user experience that no longer reflected modern pedagogical practices, especially for high schools entering France's ambitious Plan Lycée Numérique. At that critical juncture, I led the design of a proof-of-concept platform we called Connect: an integrated web-based dashboard interface that brought together classroom control, onboarding, app access, and persistent UI experimentation. Its goal wasn't to be shipped as-is, but rather to crystallize a vision for the future of educational interfaces at UNOWHY and provide a tangible experimentation platform.

Goals

  • - Replace the obsolete Android launcher with a web-first, modular alternative
  • - Centralize classroom pilotage features in one interface
  • - Offer application store, onboarding, notifications, and search
  • - Provide a simple, extensible UI system that could scale to future tools
  • - Experiment with new interaction paradigms (e.g., persistent modules like "la Bulle")

Role and scope

Product Design Lead (UX strategy, UI design, prototyping, interaction design). Initiator and co-author of the project vision and interaction model. Designer and presenter of motion prototypes, interaction flows and specs. Contributor to the PRD and onboarding flows. Designed all core UI systems: app grid, quick actions, notifications, modals. Collaborated daily with our React developer to shape the prototype dashboard.

The Dashboard: A New Starting Point

The core of Connect was a modular dashboard interface. Inspired by desktop operating systems, it enabled teachers to access quick actions (e.g., lock screens, share files, open apps remotely), visualize class status (who's connected, device health, participation), browse and launch apps from a personalized catalog, and receive and manage notifications such as work submission or session events.

Dashboard home (dark mode)
Dashboard home (dark mode) - The main dashboard interface showing quick actions and class status overview with dark theme optimized for classroom projection.
Dashboard home (light mode)
Dashboard home (light mode) - Light theme variant for different lighting conditions and user preferences.
Applications dashboard
Applications dashboard - App catalog interface allowing teachers to browse, organize, and deploy applications to student devices.
Connection & authentication flow - User authentication study showing the login flow and app launching choreography.
Complete dashboard prototype - Full interaction walkthrough demonstrating the dashboard's modular capabilities and responsive behavior.
Technical architecture
Technical architecture - System overview showing how the web-based dashboard integrates with the existing Android infrastructure.
Implementation specifications
Implementation specifications - Detailed specifications for developer handoff, including component structure and interaction states.
Content specifications
Content specifications - Content strategy documentation for the dashboard interface elements.
App loading choreography - Animation specifications for smooth app launching transitions.

La Bulle - A Vision-Driven Experiment

One of the boldest explorations was "la Bulle": a floating, persistent UI module inspired by gaming overlays or stylus menus (e.g., Samsung Galaxy Note's radial shortcuts). We imagined it as a visual presence on student tablets, a motion-rich bubble that opened a radial or vertical menu, and a context-aware assistant offering shortcuts, search, capture, and sharing capabilities.

UI Wireframes concept
UI Wireframes concept - Early exploration of the bubble's interaction model, showing radial menu patterns and contextual actions.
UI Focus view
UI Focus view - Detailed view of the bubble's expanded state with all available quick actions.
Icon system
Icon system - Custom icon set designed for the bubble's contextual menu, optimized for touch targets and quick recognition.
Behavior documentation (1)
Behavior documentation (1) - Specifications for the bubble's animation states and user interaction patterns.
Behavior documentation (2)
Behavior documentation (2) - Additional behavior specifications covering edge cases and system integration.
Interaction demonstration - Motion prototype showing the bubble's opening animation and menu interactions.
Bubble interactions - Full demonstration of the bubble's capabilities including shortcuts, search, and sharing features.