Replacing an Android launcher with a web dashboard

In 2020 I led the design of Connect, a web dashboard meant to replace UNOWHY’s Android launcher, and of La Bulle, a floating interface that went with it. The prototype never shipped as a product. It convinced the leadership to change strategy and opened the way to the SQOOL suite.

Role: Product Design Lead
Scope: UX strategy, UI design, prototyping
Company: UNOWHY

View the gallery

Summary

Context: UNOWHY’s Android launcher was outdated technically and visually, and the surge in digital use during COVID-19 made replacing it urgent. It no longer matched how high schools, then entering the Plan Lycée Numérique, were teaching. Connect was the proof of concept for a web dashboard for teachers, in a program that equipped 465 schools and 500,000 students in Île-de-France.
My role: Product Design Lead. I started the Connect vision with the Head of Product, co-wrote the PRD and designed every interface. I worked daily with a React developer to build a working prototype, which was presented to the leadership.
Product Design LeadUX strategy and UI design
VisionCo-author of the PRD
PrototypeWorking React demo
Visual languageBase of the design system
AlignmentDeveloper and leadership
Deliverables: Teacher dashboard
Quick actions, class status, app catalog and notifications, in light and dark themes.
App catalog
Searchable, filtered access to educational apps, linked to MDM policies.
La Bulle
A floating interface for contextual shortcuts, with wireframes, icons and behavior specs.
Technical architecture
How the web dashboard connects to the existing Android infrastructure.
Specifications
Implementation and content specs, and the app loading choreography.
Visual language
Components and style that became the base of the SQOOL design system.

A launcher to replace, a direction to choose

The Android launcher was the students’ way into their apps, but it no longer kept up with Android versions or with how schools worked. Replacing it meant choosing a direction for every app attached to it, without proof that a web approach would hold on the tablets already in schools. The stake was as much the decision as the interface: producing what the team needed to decide.

Four objectives to prove at once

A modular dashboardBlocks (quick actions, class status, catalog) that a teacher can customize and rearrange.
Credible web performanceA dense dashboard that loads fast and reliably in a browser, on the hardware already deployed.
Readable notificationsStudent requests and newly shared content surface by importance, without distracting.
One entry pointApps and classroom control tools brought together in one view.

Proving it with a prototype, not a document

A design sprint that starts from the teacher

I ran a strategic design sprint, held remotely on Miro and Figma, around one question: how do we make digital tools easier for teachers to adopt in class? The prototype was tested with teachers and UNOWHY staff, and the results were gathered in a scorecard. A sprint gives user feedback on a hypothesis in a few days, where documentation alone would take months.

Sprint method · Sketch and decide steps, run remotely.

Voting on sketches · Remote vote on a Miro board.

Home screen wireframe · First layout of the Connect home: quick actions, class space, news.

Prototype screens in Figma · Frames prepared for the test sessions.

Clickable prototype · The version tested with teachers and UNOWHY staff.

Test scorecard · Results of the test sessions, teachers and UNOWHY staff.

A React prototype instead of mockups

With a developer, I built the dashboard in React on a modular grid (React Grid Layout) that hosts apps in iframes. Mockups could not show whether rearrangeable blocks load fast on a tablet. A working prototype could, and it is the prototype that was presented to the leadership.

Working dashboard prototype · Full walkthrough of the modular dashboard.

The three most frequent actions come first

On the home screen, the main area holds what a teacher repeats most: start a session, share a document, lock the devices. Class status, the app catalog and notifications are organized around it, in light and dark themes (the dark one for projection in class). Notifications are ranked to flag what matters without distracting.

Dashboard home, dark theme · Quick actions and class status, on tablet and phone.

Dashboard home, light theme · Light variant for other lighting conditions.

App catalog · Browse, filter and launch educational apps.

La Bulle, permanent access above Android

Alongside the dashboard I explored La Bulle, a floating module that stays visible above the Android interface. Inspired by gaming overlays and stylus menus (the radial shortcuts of the Galaxy Note), it opens a radial or vertical menu with contextual shortcuts: search, screen capture, sharing. The idea was permanent access to frequent actions without leaving the current app. I specified its animation states, edge cases and integration with the system.

La Bulle: full demo · Shortcuts, search and sharing in motion.

La Bulle: wireframes · First exploration of the interaction model.

La Bulle: expanded menu · The menu open, with its quick actions.

La Bulle: behavior (1) · Animation states and interaction patterns.

La Bulle: behavior (2) · Edge cases and system integration.

Deliverables the team could judge

The prototype rested on an architecture that had to coexist with the existing Android infrastructure, and the diagram shows how the web dashboard plugs into it. I wrote the implementation and content specifications for the React developer, including the app loading choreography. The visual language set here (colors, typography, spacing) became the base of the SQOOL design system.

Technical architecture · How the web dashboard connects to the Android infrastructure.

Implementation specifications · Component structure and interaction states for the developer.

Content specifications · Texts and content rules of the interface.

App loading choreography · Animation specification of the launch transition.

Visual language and components · Palette, type scale and components of Connect.

What Connect changed

Connect never launched as a single product, and it was only tested internally, for a year. It still served as proof: React and a modular web approach held on the existing tablets, and the prototype convinced the leadership.

It also showed the limits of the idea. A dashboard that gathers everything became dense for teachers, and it would have competed directly with the ENT (digital workspaces) that schools already used. That finding led to splitting the platform into focused apps, which the SQOOL suite case study tells.

Read the SQOOL suite case study View all visuals

Victor Soussan

Lead Product Designer

Interested in working on a similar project? Let's talk.

Contact LinkedIn

Replacing an Android launcher with a web dashboard

Summary

A launcher to replace, a direction to choose

Four objectives to prove at once

Proving it with a prototype, not a document

A design sprint that starts from the teacher

A React prototype instead of mockups

The three most frequent actions come first

La Bulle, permanent access above Android

Deliverables the team could judge

What Connect changed

SQOOL Suite (UNOWHY)

Tessan

Toolkit

Replacing an Android launcher with a web dashboard

Summary

A launcher to replace, a direction to choose

Four objectives to prove at once

Proving it with a prototype, not a document

A design sprint that starts from the teacher

A React prototype instead of mockups

The three most frequent actions come first

La Bulle, permanent access above Android

Deliverables the team could judge

What Connect changed

Summary

A launcher to replace, a direction to choose

Four objectives to prove at once

Proving it with a prototype, not a document

A design sprint that starts from the teacher

A React prototype instead of mockups

The three most frequent actions come first

La Bulle, permanent access above Android

Deliverables the team could judge

What Connect changed

Keep reading

SQOOL Suite (UNOWHY)

Tessan

Toolkit

Summary

A launcher to replace, a direction to choose

Four objectives to prove at once

Proving it with a prototype, not a document

A design sprint that starts from the teacher

A React prototype instead of mockups

The three most frequent actions come first

La Bulle, permanent access above Android

Deliverables the team could judge

What Connect changed