Refonte UX/UI pour élargir les usages au-delà de l’audio

Faire évoluer Mixup vers un produit plus universel

Rôle : Product Designer

Contexte : Évolution du produit vers de nouveaux usages et refonte de l’interface

Enjeu : Adapter l’expérience d’un outil centré sur l’audio vers une plateforme de collaboration multi-format

Contexte

Mixup.media est une plateforme collaborative permettant de stocker, partager et commenter différents types de fichiers.

 

À l’origine, le produit était principalement conçu pour des usages audio, permettant aux musiciens et ingénieurs du son de collaborer autour de morceaux : partage, commentaires et feedback centralisés, afin d’éviter la dispersion entre plusieurs outils (emails, google drive, etc.).

 

Avec le temps, le produit a évolué vers un outil plus large, intégrant d’autres types de fichiers (vidéo, images, documents) et visant un public plus diversifié.

 

Cette évolution a mis en évidence un besoin : Faire évoluer l’expérience pour qu’elle reflète cette nouvelle ambition.

Problèmes identifiés

L’interface restait très orientée audio, ce qui la rendait difficile à comprendre pour de nouveaux profils. La structure des pages et des parcours était pensée pour des usages spécifiques, limitant l’intégration de nouveaux types de fichiers.

 

La navigation mélangeait également des contenus de nature différente (fonctionnalités de l’application, pages externes…), ce qui rendait l’ensemble confus, en particulier pour les nouveaux utilisateurs.

 

Le produit manquait de clarté, de cohérence, et ne reflétait plus sa direction.

Mixup.audio: Gestion et collaboration autour de tracks et playlists.

L’approche​

L’objectif n’était pas de repartir de zéro, mais d’améliorer l’existant de manière ciblée.

 

Dans un contexte contraint côté développement, j’ai adopté une approche pragmatique :

– identifier les principaux points de friction

– simplifier les parcours clés

– améliorer la lisibilité de l’interface

 

L’enjeu était de trouver le bon équilibre entre amélioration de l’expérience et faisabilité technique.

Mixup.media: Gestion et collaboration autour de différents types de fichiers

Mon rôle

En tant que Product Designer, j’étais en charge de la refonte de l’application web.

 

Je travaillais avec un autre designer, responsable de la landing page, tandis que je me concentrais sur l’expérience et l’interface du produit.

 

J’ai travaillé sur toute la démarche : réflexion UX, design UI, prototypage, spécifications, et suivi avec les développeurs jusqu’à l’implémentation.

Décision clé n°1

Repenser la navigation

Le problème

La navigation existante mélangeait plusieurs types de contenus : fonctionnalités produit (comme My projects ou Shared with me) et pages externes (comme forum ou landing page).

 

Cela créait une expérience fragmentée et donnait l’impression de sortir de l’application, ce qui nuisait à la compréhension globale.

Les options envisagées

– Conserver une navigation en header
Simple, mais peu adaptée à l’évolution du produit

 

– Réorganiser les entrées existantes
Amélioration limitée

 

– Introduire une navigation latérale
Plus structurante, mais changement plus important

Le choix

J’ai introduit une side navigation pour structurer l’expérience autour des usages principaux.

Pourquoi ce choix

– mieux organiser les fonctionnalités

– clarifier la structure du produit

– préparer l’arrivée de nouvelles fonctionnalités (Teamspaces)

 

Cette nouvelle navigation rend l’expérience plus cohérente et évolutive.

Décision clé n°2

Clarifier les actions sur les fichiers

Le problème

Les actions principales (partager, télécharger, etc.) étaient dispersées dans l’interface, ce qui compliquait leur compréhension.

Les options envisagées

– conserver les actions distribuées
Flexible mais peu lisible

 

– regrouper partiellement
Amélioration limitée

 

– centraliser dans une zone dédiée
Plus clair, mais nécessite une refonte

Le choix

J’ai introduit une top bar contextuelle regroupant toutes les actions liées aux fichiers.

Pourquoi ce choix

– rendre les actions visibles et accessibles

– améliorer la compréhension des possibilités

– réduire la charge cognitive

Refonte visuelle & identité

Cette refonte a également été l’occasion de moderniser l’interface.

 

J’ai travaillé sur :

– une meilleure hiérarchie visuelle

– des composants harmonisés

– une interface plus lisible

 

L’objectif était de renforcer la clarté et la crédibilité du produit.

Contraintes et arbitrages

Le projet devait rester réaliste côté développement.

 

Les choix UX et UI ont été pensés pour améliorer significativement l’expérience tout en s’appuyant sur l’existant, afin de garantir une implémentation réaliste et efficace.

Livraison & implémentation

Tout au long du projet, j’ai échangé régulièrement avec les développeurs pour m’assurer que les solutions proposées étaient faisables.

 

Une fois les designs validés, j’ai rédigé des spécifications fonctionnelles en anglais sur Notion, avec les règles et les cas à gérer.

 

J’ai aussi créé les tâches sur Asana pour organiser l’implémentation.

 

Après développement, je faisais un QA design pour vérifier que tout correspondait bien aux maquettes.

Impact

Cette refonte a permis de passer d’une interface orientée audio à une expérience plus universelle, capable de s’adapter à différents types de contenus et d’utilisateurs.

 

Elle a facilité l’intégration de nouveaux types de fichiers et préparé le produit à des évolutions futures, notamment l’introduction des Teamspaces.

Recul & apprentissages

Ce projet m’a appris à travailler dans un contexte contraint, en trouvant le bon équilibre entre amélioration de l’expérience et faisabilité technique.

 

J’ai également renforcé ma capacité à aller à l’essentiel : identifier les problèmes prioritaires et proposer des solutions simples mais efficaces.

 

Enfin, cela m’a permis d’anticiper davantage les évolutions produit, en concevant des solutions qui restent pertinentes dans le temps.