Chronodrive - Redesign Mobile

Le projet

Proposition de redesign de l'application mobile Chronodrive pour optimiser l'affichage des produits et réduire l'espace occupé par les éléments promotionnels. Les grands bandeaux ont été remplacés par des cartes compactes, le carrousel horizontal par une grille de produits, et la recherche est désormais intégrée directement dans la barre de navigation.

Cliquez pour agrandir

Contexte

Cette proposition de redesign s'appuie sur une analyse de l'existant de l'application mobile Chronodrive. Le service de drive étant utilisé de manière récurrente par les clients pour leurs courses hebdomadaires, l'objectif est de proposer une interface plus rapide et efficace pour ceux qui savent déjà ce qu'ils cherchent, tout en facilitant la découverte de nouveaux produits.

Objectifs du redesign

• Accélérer le parcours d'achat : Réduire le scroll et afficher plus de produits simultanément
• Améliorer la comparaison : Remplacer le carrousel par une grille pour faciliter la comparaison entre produits
• Faciliter l'accès à la recherche : Intégrer la barre de recherche dans la navigation pour un accès immédiat
• Rééquilibrer l'espace : Réduire les bandeaux promotionnels pour donner plus de place aux produits

Avant / Après

Comparaison visuelle

Modifications principales

1. Header condensé

Avant : Le sélecteur Drive/Livraison occupait deux blocs séparés, prenant beaucoup d'espace vertical.

Après : Header épuré avec badge compact "Drive Orléans" et toggle Livraison sur une seule ligne, affichant directement la disponibilité.

Impact : Gain d'espace vertical permettant d'afficher les produits plus rapidement sans scroll.

2. Réduction des bandeaux promotionnels

Avant : Un grand bandeau rouge "100% PROMOS" en pleine largeur, plus une bannière "les promos font leur show" occupant près de la moitié de l'écran.

Après : Deux cartes promotionnelles compactes côte à côte, regroupant les offres dans un espace réduit.

Impact : Les promotions restent visibles mais libèrent de la place pour les produits, qui apparaissent plus tôt dans le parcours.

3. Grille de produits au lieu du carrousel

Avant : Carrousel horizontal affichant un seul produit à la fois, nécessitant un swipe pour voir les suivants.

Après : Grille 2x2 affichant 4 produits simultanément, avec une nouvelle section "Produits Phares" mettant en avant les best-sellers.

Impact : Vision d'ensemble des produits facilitant la comparaison et accélérant la découverte du catalogue.

4. Cartes produit modernisées

Avant : Carte avec image à gauche, informations à droite (nom, poids, prix/kg, promotion), bouton d'ajout excentré.

Après : Carte épurée avec image centrée en haut, nom du produit en dessous, et prix affiché dans un badge arrondi vert distinctif.

Impact : Design plus lisible et moderne, avec le prix mis en valeur comme élément d'action principal.

5. Barre de recherche intégrée à la navigation

Avant : Recherche accessible uniquement via l'icône du header en haut à droite.

Après : Barre de recherche intégrée directement au centre de la navigation du bas, toujours accessible.

Impact : Accès immédiat à la recherche, fonctionnalité essentielle pour les courses récurrentes où l'utilisateur sait ce qu'il cherche.

Bénéfices du redesign

Pour l'utilisateur

• Plus de produits visibles : Grille 2x2 affichant 4 produits au lieu d'un seul dans le carrousel
• Recherche accessible : Barre de recherche toujours disponible dans la navigation, sans remonter en haut
• Moins de scroll : Header condensé et bandeaux promotionnels réduits permettent d'accéder aux produits plus rapidement
• Découverte facilitée : Section "Produits Phares" mettant en avant les best-sellers

Pour l'entreprise

• Amélioration du taux de conversion : Plus de produits exposés simultanément augmente les opportunités d'ajout au panier
• Augmentation du panier moyen : Grille facilitant la découverte de produits complémentaires
• Interface modernisée : Design épuré renforçant l'image de marque
• Réduction du taux d'abandon : Accès rapide à la recherche limitant la frustration pour les utilisateurs pressés

Compétences mises en œuvre

• Analyse UX et identification de points d'amélioration
• Redesign d'interfaces e-commerce mobile
• Optimisation de la hiérarchie visuelle
• Équilibre entre contenu promotionnel et catalogue produit
• Design de composants réutilisables