USE CASE
MAKE MUSIC
Refonte de l'expérience mobile des pages de recherche de MakeMusic pour permettre aux musiciens de parcourir et choisir un morceau depuis n'importe quel device.
Rôle
Senior Product Designer
Équipe
Tribe Practice App · 2 PD + PM + 2 Dev
Durée
Cycle Shape Up de 6 semaines · 2023
Statut
✅ Shipped
Outils
• 01. Contexte & objectifs
Méthodologie Shape UP · Design system Harmonica. Pitch : compléter le MVP des pages produit de MakeMusic pour déclencher la traction SEO et transformer un catalogue de 20 000 partitions en source d'acquisition organique.
KR1
18 000 pages indexées dans les 3 mois après livraison (vs 1 780 initialement)
KR2
5 000 clics/mois depuis Google Search vers les pages produit dans les 6 mois
KR3
150 free trials/mois attribuables aux pages produit dans les 9 mois (conv. 3%)
• 02. Problem statement
Je suis un(e) étudiant(e) en musique qui utilise MakeMusic depuis son téléphone qui essaye de trouver et sélectionner un morceau dans le répertoire complet mais les pages de recherche ne s'affichent tout simplement pas parce que le site a été conçu exclusivement pour desktop sans adaptation responsive ce qui me fait me sentir frustré et contraint de reprendre mon ordinateur pour une action pourtant simple.
• 03. Recherche utilisateur
8 interviews utilisateurs menées en binôme avec le product manager. Restitution des résultats dans le repository Notion, partagée avec l'équipe engineering dans le canal dédié pour aligner l'équipe sur le « pourquoi » du pitch.
INSIGHTS CLÉS PITCH
Le catalogue de 20 000+ partitions est un actif SEO inexploité. Les pages ne passent pas les prérequis techniques minimum de Google (SSR, structure de liens, sitemap). Les pages mobiles de recherche et d'exploration sont inexistantes, bloquant à la fois l'indexation et l'expérience utilisateur sur mobile.
HOW MIGHT WE
Comment pourrait-on rendre les 20 000 pages indexables dans un seul cycle de 6 semaines ? Comment prioriser les composants à refaire pour maximiser l'impact SEO sans reconstruire tout le design system ?
• 04. Analyse concurrentielle
CONTEXTE MARCHÉ
MakeMusic dispose d'un catalogue Digital Catalog B2C avec Product Pages et Music Catalog comme product areas — des actifs directement comparables à MuseScore, Musicnotes ou Songsterr qui captent déjà du trafic SEO sur ces requêtes.
OPPORTUNITÉS IDENTIFIÉES
Le produit MakeMusic était en retard par rapport à ses concurrents qui avaient tous une expérience de recherche mobile, mais un catalogue moins riche.
• 05. Exploration & idéation
Plusieurs pistes de design explorées sur mb-mobile-search. Présentation des tracks pour développement ⇒ faire les bons choix techniques avec implication du lead design system. Réunion trio Product Design / Tech / PM pour présenter les explorations et impliquer l'engineering dès la phase de shape.
CONTRAINTES & RABBIT HOLES
Limiter l'évolution de composants comme la mise à jour de la search bar sur Explore et Search, custom focus state pour les boutons (conservé natif browser pour ce cycle).
OPTION RETENUE
Isoler uniquement les prérequis nécessaires pour déclencher la traction SEO et les livrer en un seul cycle de build : SSR des pages Search et Explore, pages produit responsive mobile, liens internes structurés, sitemap généré.
• 06. Solution designée
PRINCIPES DE CONCEPTION
Responsive first. Intégration dans le Design System Harmonica. Conformité SEO sur les composants UI (anchor tags valides, balises h2 sur les titres de partitions, anchor text descriptif sur les tuiles de navigation).
SOLUTION TECHNIQUE & DESIGN
SSR Search & Explore · product listings mobile · liens internes · sitemap.
AUDIT COMPOSANTS DESIGN SYSTEM
Pitch complété avec la liste de composants pour la conformité DS. Améliorations : Accordion (suppression background color à l'ouverture, swap icône), Filter box (ajout option button-icon). Arbitrages partagés avec le DS manager.
• 07. Tests utilisateurs
Test d'utilisabilité — 5 interviews utilisateurs menées en binôme avec le PM, préparées en amont de la phase de build. La solution sort renforcée par les tests.
- ✅ Expérience de recherche validée — 5/5 jugent la recherche user-friendly. Aucun blocage critique.
- ✅ Navigation filtres mobile comprise — 5/5 comprennent comment accéder aux filtres. La search bar reste le point d'entrée principal.
- 💡 Filtres prioritaires — Catégories, Difficulté et Genre sont les plus sollicités, à mettre en avant.
MODIFICATIONS SUITE AUX TESTS
Suite aux tests, les filtres Catégories, Difficulté et Genre — identifiés comme les plus sollicités — ont été mis en avant dans l'interface mobile.
• 08. Résultats
La bascule sur mobile a produit les deux effets attendus : de la traction SEO et une acquisition B2C directe sur le catalogue musical.
Traction SEO par le mobile
Les pages Search et Explore devenues responsive et indexables font entrer le catalogue dans les résultats Google : le mobile devient le support de la visibilité organique.
Acquisition B2C sur le catalogue musical
La navigation mobile du catalogue devient un point d'entrée d'acquisition : les musiciens parcourent et choisissent un morceau depuis leur téléphone.
• 09. Apprentissages
• 10. Way of work
Découverte & cadrage
OKR · Data · Signaux terrain
Framing + exploration
Hypothèse · Solution draft (PM + PD) · Revue composants (PD + DS Lead) · Build Pitch
Tests utilisateurs PM + PD
Sessions · Restitution Notion · Flux UX cohérent
Kick-off
BE / FE / EM · Flux HiFi partagé · Conformité DS
Build QA / Delivery
Suivi QA · Métriques implémentées · Traçabilité des écarts
Release milestone OKR
Mesure des métriques · Bilan des écarts vs intention
Étude suivante
→