Étude de cas — Application mobile / Design & Dev

Rewind

Le journal de tout ce que l'on regarde et de tout ce à quoi l'on joue : séries, films et jeux vidéo réunis dans une seule application, conçue et développée de A à Z.

Product Design Design System React Native Firebase 2026

RôleProduct Designer & Développeur

PérimètreUX · UI · Design System · Développement mobile · Back-end

PlateformeAndroid · Web

Voir sur Google Play

Rewind — quatre écrans de l'application : fiche série, découverte, fiche film et recherche

02 — Le défi

Un seul endroit pour tout suivre

Séries, films et jeux vidéo sont aujourd'hui suivis dans des applications différentes, quand ils le sont. Résultat : on oublie à quel épisode on s'est arrêté, on rate les sorties et on perd la trace de ce que l'on a aimé. Rewind réunit les trois univers dans une expérience unique, rapide à utiliser et agréable à revisiter.

Un suivi éparpillé

Une application pour les séries, une autre pour les films, rien de satisfaisant pour les jeux : l'historique est fragmenté.

Reprendre là où on s'est arrêté

Savoir quel épisode regarder ensuite ou quelle mission terminer doit prendre une seconde, pas une recherche.

Garder une trace et partager

Noter, retrouver son historique, voir ce que regardent ses amis et revivre son année en séries, films et jeux.

03 — L'expérience

Des parcours pensés pour aller vite

L'application s'organise autour de cinq onglets : Accueil, Découvrir, À venir, Amis et Profil. Chaque écran met en avant l'action la plus probable : marquer un épisode comme vu, ajouter un titre à sa watchlist ou reprendre une série en cours.

Rewind — écran Découvrir avec filtres et recommandations — Découvrir

Rewind — fiche série avec progression et reprise de lecture — Fiche série

Rewind — fiche film avec watchlist et où regarder — Fiche film

Rewind — recherche de séries, films et jeux — Recherche

Suivi épisode par épisode Quick Log en deux gestes Jeux suivis mission par mission Watchlist & listes perso Sorties à venir Où regarder Notes & statistiques Amis & commentaires XP, défis & Rewind annuel

04 — Maquettes & onboarding

Du croquis à l'écran final

Chaque écran est d'abord passé par une maquette basse fidélité, puis a été repris en haute fidélité avec le design system. Le jeu complet est organisé en huit parcours : entrée, cœur de l'appli, contenus, suivi, social, espace personnel, compte et états système.

Dès l'onboarding, l'utilisateur choisit ses genres préférés et ses plateformes de streaming : les recommandations sont pertinentes dès la première ouverture.

Connexion Google, e-mail, ou sans compte
Genres et plateformes choisis en deux étapes
Visuels de remplacement pour juger la structure, pas les affiches

Rewind — maquettes haute fidélité de l'écran d'accueil et du choix des genres et plateformes

05 — Suivi

Enregistrer en deux gestes

Le Quick Log permet de marquer ce que l'on vient de regarder sans quitter l'écran en cours. À la fin d'une saison ou d'un film, un écran dédié invite à noter, ou à lancer directement la saison suivante. Tout est ensuite retrouvé dans l'historique, daté.

Rewind — maquettes du Quick Log, de la note personnelle, des écrans de fin de saison et de film, et de l'historique

Quick Log Note personnelle Saison terminée Film terminé Historique

06 — Progression & social

Donner envie de revenir

Le profil transforme le suivi en progression : niveaux et XP, séries de jours, défis hebdomadaires et classement entre amis. Les statistiques (heures regardées, genres préférés, note moyenne) et les listes personnelles nourrissent le Rewind annuel, le récapitulatif de l'année.

Rewind — maquettes du profil, des statistiques, des listes, des récompenses et du classement entre amis

Niveaux & XP Défis hebdomadaires Série de jours Classement entre amis Statistiques Listes personnelles

07 — États système

Penser aussi aux moments sans contenu

Un écran vide, un chargement ou une coupure réseau font partie de l'expérience. Chaque état a été dessiné : un message clair, une action pour repartir, des squelettes de chargement à la forme du contenu, et une notification avec « Annuler » après chaque action rapide.

Rewind — maquettes des états vides, du chargement, du mode hors ligne et d'une notification avec annulation

États vides Squelettes de chargement Hors ligne Annuler une action

08 — Design System

Un design system, du fichier au code

J'ai d'abord construit le design system (couleurs, rayons, espacements, composants), puis je l'ai porté à l'identique dans le code sous forme de tokens. Chaque écran de l'application utilise les mêmes fondations, ce qui garde l'interface cohérente et rend chaque nouvel écran plus rapide à produire.

Ink 900

#080D16

Surface

#131922

Coral 500

#FD736D

Gray 100

#F5F6F8

Gray 300

#9AA1AC

Une couleur par statut de suivi, utilisée partout de la même façon :

En cours Watchlist Terminé En pause Abandonné

Button Chip Input PosterCard EpisodeRow ContinueWatchingCard QuickLogSheet Rating BottomSheet Toast Skeleton FriendActivityCard BottomNav

09 — Développement

Une vraie application, de bout en bout

Après le design, j'ai développé l'application complète : interface, navigation, données, comptes utilisateurs, partie sociale et builds Android.

React Native · Expo · TypeScript

Une seule base de code pour Android et le web, avec une navigation par fichiers (Expo Router) et des builds générés avec EAS.

Firebase

Authentification, base de données Firestore et règles de sécurité qui contrôlent qui peut voir l'activité de chaque utilisateur.

TMDB · IGDB

Les données des séries et des films viennent de l'API TMDB, celles des jeux vidéo d'IGDB.

Cloudflare Worker

Un petit serveur proxy interroge IGDB à la place de l'application, pour ne jamais exposer les clés secrètes de l'API.

React Query · Zustand

Mise en cache des données distantes et gestion de l'état local pour une interface fluide, même avec beaucoup de contenus.

Concevoir et coder le même produit m'a permis de prendre des décisions de design en connaissant leur coût technique, et de garder une interface fidèle aux maquettes jusque dans le code.

10 — Résultat