Redesign de l’app mobile

Contexte

MConnect Player transforme le téléphone en télécommande d’une installation hi-fi. L’application diffuse la musique en Hi-Res (sans perte de qualité contrairement aux autres solutions du marché) vers des appareils UPnP/DLNA, depuis Qobuz, Tidal, un NAS ou un service cloud. Son public est exigeant : des audiophiles et des utilisateurs avancés qui veulent garder la main sur la qualité du son.

Les avis des stores dessinent un paradoxe. Au-delà des problèmes techniques, les utilisateurs saluent la puissance de l’app et la qualité de lecture, mais l’interface arrive en tête de leurs reproches : navigation difficile, écrans austères, fonctions mal expliquées.

Ce redesign est un projet personnel, sans lien avec l’éditeur et sans accès à ses données internes.

Démarche et planning

Recherche

Analyse des avis des stores

J’ai collecté à la main les avis de Google Play et de l’App Store, en France et aux États-Unis, et gardé 69 avis commentés publiés entre 2017 et 2025. Avec l’aide de l’IA, je les ai classés dans Excel en positifs, négatifs et opportunités d’amélioration, puis regroupés par catégorie.

Ce qui plaît : la compatibilité avec de nombreux appareils, la qualité sonore et la prise en charge du format MQA. « C’est pour sa musicalité et sa qualité de restitution », résume un utilisateur.

Ce qui gêne : l’interface arrive en tête, avec un tiers des problèmes classés. Navigation difficile, design austère, manque d’explications : « Interface assez austère, mais ça fonctionne ».

La stabilité et la connexion reviennent aussi, mais elles relèvent du développement : donc hors du périmètre design.

Questionnaire AttrakDiff

Pour compléter les avis, j’ai diffusé le questionnaire AttrakDiff, qui évalue l’efficacité et l’attrait d’une interface par paires de mots opposés. Ses résultats sont un premier signal, recueilli auprès d’un panel restreint.

Ils confirment les avis : l’app se situe entre « superflu » et « neutre ». Les répondants la jugent confuse, fastidieuse, bas de gamme, voire amateur, et l’attractivité globale est la dimension la plus faible. Ils lui reconnaissent un côté original et challengeant.

Benchmark

J’ai comparé MConnect à quatre applications gratuites : BubbleUPnP et HEOS pour le streaming réseau, Lecteur audio USB PRO et Lecteur de musique MP3 côté lecteurs. Seules les apps de streaming restituent le Hi-Res, socle attendu des audiophiles.

J’en ai tiré cinq principes : épure et contraste, hiérarchie par la typographie, libellés soutenus par les icônes, réglages essentiels visibles, identité forte.

Audit de l’existant

Après avoir matérialisé le userflow complet de l’app actuelle, j’ai annoté une trentaine d’écrans clés. La navigation est éclatée entre les sources, les fonctions se cachent derrière des menus d’options successifs, et le bouton retour ferme souvent l’application.

Définition

Personas

Mélina, 36 ans, dirige une boutique audio-vidéo à Strasbourg. Elle fait ses démonstrations en lossless dans son showroom. Sa crainte : rester bloquée devant un client par une connexion capricieuse ou une interface complexe.

Bertrand, 53 ans, dirige une entreprise à Lyon. Il veut entendre chaque détail, que la musique vienne du streaming ou de sa bibliothèque locale, et fuit les applications compliquées qui gâchent l’écoute.

Points de douleur prioritaires

Quatre irritants de la journey map de Bertrand ont guidé le redesign :

• Onboarding · Perdu : aucun tutoriel ni repère au premier lancement.
• Choix de source · Confus : aucun moyen simple de passer du streaming à la bibliothèque locale.
• Lecture · Satisfait du son, pas du lecteur : les pistes en cours sont inaccessibles depuis le lecteur.
• Navigation · Frustré : trop d’écrans pour atteindre un album, le bouton retour ferme l’app.

Comment pourrions-nous permettre aux mélomanes exigeants de profiter pleinement de leur matériel en quelques gestes, grâce à une interface claire et premium ?

Objectifs du redesign

• Clarté : rendre le parcours appareil → source → musique lisible en quelques gestes, avec une seule navigation quelle que soit la source.
• Perception premium : donner à l’app une image à la hauteur du matériel hi-fi qu’elle pilote, sobre et soignée.
• Attractivité : rendre l’app agréable au quotidien, sans perdre son côté original.

Idéation

J’ai réorganisé l’app autour de cinq onglets fixes : Home, Settings, Music, Player et Queue. Qobuz, un NAS ou un serveur Plex s’affichent tous dans Music, avec la même présentation.

Sur l’accueil, le duo Listen on / Listen from rend visibles les deux choix essentiels : où joue la musique et d’où elle vient. Chaque onglet garde son historique, et le bouton retour remonte d’un niveau au lieu de fermer l’app.

Des avis aux solutions

Design system

Quatre intentions guident l’univers visuel : sombre, chaleureux, feutré, premium. Les couleurs puisent dans l’univers du café, comme le moka qui donne son nom à MConnect Mocha. Côté interface, l’accueil adopte une grille Bento de raccourcis : des blocs de tailles et de couleurs différentes qui hiérarchisent l’essentiel d’un coup d’œil sans passer par les menus. Le fond sombre laisse la place aux pochettes, et l’orange apporte chaleur et identité.

Le design system repose sur des variables Figma à deux niveaux : douze couleurs de base alimentent vingt tokens d’usage. Neulis Neue et Hellix se partagent 33 styles de texte, et les 38 icônes basculent entre état sélectionné et inactif grâce à un mode de variable.

Une trentaine de composants, rangés en 12 catégories, vivent dans une bibliothèque séparée et publiée, documentée par une page Getting Started et un journal des versions.

Maquettes et prototype

Le prototype mobile compte 30 écrans, dont 4 dédiés à l’onboarding. Cinq écrans portent l’essentiel du redesign : l’accueil, les appareils et les sources, la bibliothèque, le lecteur et la file d’attente.

Avant / après

Premier écran → Accueil avec onboarding. Au premier lancement, des bulles guident vers l’essentiel : où diffuser, d’où vient la musique.

Accessibilité

J’ai audité les maquettes selon les WCAG 2.1 AA, adaptées au mobile. Les contrastes sont un point fort : de 7:1 à 14:1 sur les textes principaux.

Quatre corrections sont prévues : des cibles tactiles portées à 44 pt / 48 dp, des libellés pour les lecteurs d’écran, des interlignes plus généreux et des mises en page qui tiennent avec un texte agrandi à 200 %, testé dans le prototype.

Résultats et apprentissages

Limites

Ce redesign a été mené sans accès aux utilisateurs réels ni aux données de l’éditeur. Les résultats AttrakDiff proviennent d’un panel restreint : ils indiquent une tendance, pas une mesure.

Prochaines étapes

• Tester le prototype auprès de mélomanes utilisant l’application d’origine.
• Refaire l’AttrakDiff sur la nouvelle version, avec un panel plus large.
• Appliquer les corrections d’accessibilité.
• Présenter le redesign à l’éditeur pour confronter les choix aux contraintes techniques.

Ce que j’ai appris

Les avis disaient « austère », AttrakDiff précisait « bas de gamme », la journey map montrait où l’on décroche. Croiser les études a permis de confirmer les points de douleur et révéler les points d’amélioration.

L’IA m’a fait gagner du temps pour trier les avis et mettre en forme l’étude, mais chaque résultat a demandé une relecture attentive.

Enfin, construire les variables du design system avant les écrans m’a permis de mettre à jour simplement les maquettes et d’ajouter l’onboarding sans rien casser. Et tester le texte agrandi à 200 % a révélé des défauts invisibles à taille normale.