Étude de cas : concevoir un écosystème digital complet pour Muslim Guard

Concevoir une application mobile ne consiste pas simplement à accumuler des fonctionnalités jusqu’à obtenir un produit suffisamment complet. Avec Muslim Guard, notre travail a surtout consisté à transformer plusieurs besoins très différents — apprentissage, contenu éducatif, divertissement, sécurité et contrôle parental — en une expérience cohérente aussi bien pour les enfants que pour leurs parents.

Le projet nous a amenés à intervenir sur plusieurs dimensions : stratégie produit, expérience utilisateur, design system, développement de l’application mobile et conception de son écosystème web.

Dans cette étude de cas, nous revenons sur les principaux choix effectués pour construire un produit capable d’évoluer sans perdre sa cohérence.

Le premier défi : concevoir deux expériences dans un même produit

Dès les premières réflexions autour de l’expérience utilisateur, une évidence s’est imposée : Muslim Guard possède en réalité deux profils d’utilisateurs très différents.

D’un côté, l’enfant veut ouvrir l’application et comprendre immédiatement où jouer, quelle histoire écouter ou quelle activité lancer. Il ne doit pas être confronté à une interface remplie de paramètres, d’options techniques ou de réglages complexes.

De l’autre, le parent recherche presque l’inverse. Il souhaite comprendre rapidement les options disponibles, gérer les accès et contrôler l’environnement numérique proposé à son enfant.

Chercher à satisfaire ces deux profils avec exactement la même interface aurait créé un compromis peu convaincant pour chacun.

Nous avons donc choisi de séparer clairement l’expérience enfant et l’expérience parent. La densité d’information, les interactions, les composants et la hiérarchie visuelle peuvent ainsi être adaptés aux besoins réels de chaque utilisateur.

Construire un design system avant de multiplier les écrans

Sur une petite application composée de quelques écrans, il est encore possible de concevoir chaque page presque indépendamment.

Ce n’était pas envisageable avec Muslim Guard.

Le produit devait progressivement accueillir plusieurs univers : histoires, quiz, jeux éducatifs, vidéos, apprentissage de l’arabe, Coran, espace parent et différentes fonctionnalités complémentaires.

Sans règles graphiques suffisamment solides, chaque nouvelle fonctionnalité aurait fini par développer sa propre identité et l’application serait progressivement devenue incohérente.

Nous avons donc travaillé autour d’un système de composants réutilisables : typographies, espacements, cartes, boutons, zones interactives, navigation, états visuels et règles de hiérarchie.

L’objectif d’un design system n’est pas seulement esthétique. Il permet également d’accélérer le développement et de réduire le nombre de décisions nécessaires lors de la création d’un nouvel écran.

Faire cohabiter de nombreuses fonctionnalités sans créer un catalogue

C’était l’une des principales difficultés du projet.

Muslim Guard rassemble de nombreuses activités : une bibliothèque d’histoires, des contenus audio, des quiz, différents modes de jeu, des vidéos sélectionnées, l’apprentissage de l’arabe, le Coran et plusieurs outils destinés aux familles.

Sur le papier, ajouter une nouvelle fonctionnalité semble simple. Dans une interface destinée aux enfants, chaque nouveau module augmente pourtant le risque de surcharge.

Notre travail a donc consisté à réfléchir davantage en termes d’univers, d’actions et d’intentions qu’en termes de fonctionnalités techniques.

Un enfant ne cherche pas un « module de contenu audio ». Il veut écouter une histoire. Il ne cherche pas une « fonctionnalité de gamification ». Il veut jouer, répondre à une question ou relever un défi.

Cette différence paraît anodine, mais elle influence directement les intitulés, les illustrations, la navigation et la manière dont l’information est présentée.

La gamification devait servir l’apprentissage

Lorsqu’une application s’adresse à des enfants, il est tentant d’ajouter des récompenses partout : points, badges, animations, niveaux ou classements.

Mais une gamification mal utilisée peut rapidement produire l’effet inverse de celui recherché : l’enfant ne s’intéresse plus réellement à l’activité et cherche uniquement à obtenir la récompense.

Pour Muslim Guard, nous avons donc travaillé ces mécaniques comme une couche supplémentaire autour de l’expérience plutôt que comme le cœur du produit.

Le quiz constitue un bon exemple. Une même activité éducative peut être vécue de plusieurs façons grâce à différents modes : partie classique, contre-la-montre, duel ou partie entre parent et enfant.

La mécanique de jeu permet alors de renouveler l’expérience sans faire disparaître l’objectif initial : apprendre et tester ses connaissances.

Traiter le contenu comme une véritable fonctionnalité produit

Un autre enseignement important du projet concerne la place du contenu.

Dans de nombreux produits numériques, le développement est considéré comme la partie principale du travail tandis que les textes, illustrations, audios ou contenus sont ajoutés dans un second temps.

Cette approche ne pouvait pas fonctionner ici.

Créer une bibliothèque d’histoires ne consiste pas simplement à développer un lecteur audio. Il faut réfléchir à la couverture, à la découverte d’une histoire, au passage entre lecture et écoute, à la navigation entre les contenus et à la manière dont l’enfant retrouve ensuite ce qu’il apprécie.

Nous avons donc pensé l’interface directement autour du contenu et de son utilisation.

Créer une expérience vidéo adaptée au produit

La vidéo représente aujourd’hui une part importante des usages numériques des enfants.

Le problème était donc moins de savoir s’il fallait proposer de la vidéo que de déterminer comment l’intégrer dans l’expérience globale.

Muslim Guard intègre ainsi un espace vidéo dédié appelé MuslimTube, conçu pour permettre aux enfants d’accéder à des contenus sélectionnés sans reproduire toute l’expérience d’une plateforme vidéo généraliste.

Du point de vue du produit, cette fonctionnalité devait rester cohérente avec le reste de l’application : même logique de navigation, même langage graphique et même simplicité d’utilisation.

Le site web ne devait pas devenir une simple brochure

Le projet ne s’arrêtait pas à l’application mobile.

Il fallait également construire un site capable d’expliquer un produit relativement large tout en restant compréhensible pour quelqu’un qui le découvre pour la première fois.

Une erreur fréquente consiste à créer une seule landing page qui accumule captures d’écran, fonctionnalités et boutons de téléchargement.

Cette approche peut suffire pour un produit très simple. Elle devient beaucoup moins efficace lorsqu’une application répond à plusieurs intentions différentes.

Nous avons donc structuré le site autour de plusieurs univers éditoriaux afin que les histoires, les quiz, l’apprentissage ou encore l’expérience enfant puissent être présentés de manière indépendante.

Le site devient alors une extension du produit et non une simple vitrine publicitaire.

Faire travailler acquisition et produit ensemble

Cette architecture répond également à un enjeu d’acquisition.

Un parent recherchant des histoires éducatives pour son enfant ne part pas nécessairement de la même problématique qu’un parent cherchant une solution numérique complète.

Les envoyer systématiquement vers une même page générique oblige à leur expliquer l’ensemble du produit avant de répondre à leur besoin initial.

Des pages spécialisées permettent au contraire de commencer par la problématique précise du visiteur, puis de lui faire découvrir progressivement l’écosystème complet.

Cette approche reflète un principe que nous appliquons dans nos projets : la stratégie d’acquisition ne devrait pas être pensée séparément du produit.

Penser dès le départ à l’évolution du produit

La difficulté d’un produit comme Muslim Guard n’est finalement pas seulement de réussir sa première version.

Elle consiste surtout à construire une base capable d’absorber de nouvelles idées.

Une nouvelle activité ne devrait pas obliger à repenser toute la navigation. Un nouveau type de contenu ne devrait pas nécessiter de recréer tous les composants graphiques. Une nouvelle page du site ne devrait pas imposer de réinventer complètement son identité.

C’est précisément le rôle de l’architecture produit et du design system : permettre au projet d’évoluer sans transformer chaque nouveauté en dette technique ou graphique.

Du projet mobile à l’écosystème numérique

Muslim Guard illustre bien la manière dont un projet peut progressivement évoluer au-delà de sa fonctionnalité initiale.

Ce qui aurait pu rester une application spécialisée est devenu un environnement regroupant plusieurs expériences : apprentissage, histoires, jeux, vidéos, contenu éducatif et outils destinés aux parents.

Notre rôle en tant qu’agence n’a donc pas simplement consisté à transformer des maquettes en écrans fonctionnels.

Il a fallu réfléchir à la manière dont le produit pouvait rester cohérent en grandissant, construire les bases graphiques et fonctionnelles nécessaires à cette évolution, puis prolonger cette logique dans son écosystème web.

C’est cette combinaison entre stratégie produit, UX, design et développement qui permet de transformer progressivement une application en véritable produit numérique.