Le Bikini
Salle de concert emblématique de la scène culturelle toulousaine, Le Bikini propose une programmation riche et variée, avec plus de 200 événements par an.
Interventions
- Analyse concurrentielle
- Audit UI / UX
- Arborescence et parcours utilisateur
- Wireframes (maquettes fonctionnelles)
- Prototype haute fidélité (maquettes graphiques)
- Specs techniques et fonctionnelles
Outils
- Figjam
- Figma
Contexte & Objectifs
Le site vitrine du Bikini constitue un canal central pour la découverte des événements, la consultation des informations pratiques et surtout la vente de billets.
Cependant, le site existant comptait plusieurs limites :
- une page d’accueil peu cohérente visuellement, présentant un taux de rebond élevé
- une navigation complexe, notamment sur mobile,
- une hiérarchie de l’information confuse, rendant la programmation moins lisible
L’objectif de la refonte était donc double :
- Diminuer le taux de rebond sur la page d’accueil pour encourager la navigation vers les pages événements et la billetterie
- Fluidifier le parcours utilisateur pour augmenter la conversion (vente de tickets).
Contraintes
Plusieurs contraintes techniques et stratégiques ont orienté la conception :
- Respect de la charte graphique historique du Bikini : palette noir et blanc, typographie forte, univers visuel minimaliste à conserver pour ne pas dénaturer l’identité visuelle.
- CMS existant : le site devait rester administrable facilement par l’équipe interne, sans nécessiter de compétences techniques avancées.
- Évolutivité : le nouveau design devait s’adapter aux besoins futurs (ajout d’événements, intégration de contenus médias, etc.) sans casser la mise en page.
- Performance mobile : avec près de 80 % du trafic provenant de smartphones, la conception devait suivre une approche mobile-first stricte.
- Contrainte de temps : la refonte devait être livrée dans un délai restreint afin d’être alignée sur la nouvelle saison de concerts.
Solutions
👉 Navigation
Plusieurs modifications ont été entreprises pour simplifier la navigation.
Dans le menu principal, nous avons réduit le nombre d’entrées parentes à 5 et avons réorganisé les sous-menus.
En navigation mobile, les allers et retours dans le menu freine la navigation. Pour éviter cela, nous avons également ajoutés un système d’onglets pour la navigation entre les sous-pages.
👉 Page d’accueil
La page d’accueil a été entièrement repensée pour 1) une meilleure hiérarchisation de l’information 2) qu’elle invite à poursuivre la visite sur le site.
Elle se présente sous la forme d’une grille entièrement modulable et responsive, composée de blocs est indépendants et personnalisables. Ainsi, les équipes peuvent modifier les blocs au grès des événements, et ce sans risquer de « casser » le design initial.
Cette composition en bloc offre par ailleurs la garantie d’une navigation mobile first.
👉 Page Programmation
La page programmation a été repensée afin de simplifier la recherche d’événements et permettre aux utilisateurs de trouver puis réserver plus rapidement les concerts qui les intéressent, notamment sur mobile.
Filtres dynamique
L’intégration de filtres dynamiques contextuels (lieu, catégorie, date) facilite l’exploration des événements.
En vue desktop et mobile, l’affichage des filtres est persistant. Cette position « sticky » une expérience de navigation continue, où l’utilisateur peut affiner sa recherche sans perdre le fil de sa consultation.
La combinaison de plusieurs critères indépendants permet un croisement dynamique des résultats. Pour une meilleure expérience, le visiteur obtient un feedback visuel immédiat, les résultats sont filtrés en temps réel.
Cartes Évenements
La hierarchie visuelle des cartes a également été revue en jouant avec la position et la taille des éléments. Cette nouvelle structure facilite le balayage visuel (affiche → artiste → infos → CTA) et la lecture des informations clés.
Pour renforcer la distinction entre concerts disponibles et complets, un repère visuel a été rajouté sur les visuels. Cet indicateur permet d’éviter toute ambiguïté lors de la consultation de la programmation.
Ces différents états (complets, annulés, reportés, dernières places…) ont été intégrés au design system pour garantir la cohérence et la visibilité.
De la même manière, pour distinguer facilement les événements du Bikini et ceux se tenant dans d’autres salles, un tag a été ajouté sur chaque visuel.
Concernant le parcours utilisateur, un bouton « Réserver » a été ajouté, permettant d’accéder directement à la billeterie. Il est toujours possible d’accéder à la fiche de l’événement pour obtenir plus de renseignement.
Résultats
La refonte a permis d’obtenir une meilleure expérience utilisateur, qui se retranscrit à plusieurs niveaux :
- Taux de rebond réduit sur la page d’accueil (−25 % sur les trois premiers mois).
- Augmentation du taux de conversion vers la billetterie
- Navigation mobile plus fluide, avec un temps moyen de session en hausse
- Autonomie accrue de l’équipe interne, grâce au système de blocs modulables.
- Identité visuelle renforcée : un design à la fois minimaliste et impactant, fidèle à l’univers du Bikini tout en modernisant son image digitale
