Refonte du Store Locator selfstock.com

selfstock.com est une franchise de Garde Meuble low-cost basée en France. Le site internet selfstock.com sert principalement aux nouveaux clients, qui peuvent y chercher un centre de stockage près de chez eux via une carte interactive et un moteur de recherche géolocalisé : c'est ce que l'on appelle le store locator. Une fois leur centre choisi, ils y choisissent leur box en fonction de la taille souhaitée.

Quelques minutes après avoir finalisé leur commande, les clients peuvent signer électroniquement leur contrat et accéder à leur box.

Les problèmes à résoudre

L'ancien Store Locator était fourni par un plugin WordPress tiers, Dokan, qui a rempli son office la première année d'existence du site. Cependant, le système fourni par ce plugin ne nous offrait pas toute la liberté de personnalisation souhaitée et souffrait de problèmes de performance.

Captures d'écran de l'ancienne version du store locator

En plus de cela, l'expérience utilisateur était impactée par un design graphique standard et peu aguicheur. Chaque recherche demandait également un rechargement complet de la page, des résultats de recherche étaient proposés en dehors du territoire français et l'ergonomie sur mobile était loin d'être idéale.

Les solutions apportées

Dans ce contexte, j'ai été missionné afin de repenser le Store Locator dans son intégralité afin d'offrir à selfstock.com toute la liberté d'action qu'ils souhaitaient et délivrer une expérience utilisateur optimale.

Un design pensé pour le mobile

Ma première tâche a consisté à redesigner intégralement le Store Locator aussi bien sur le plan UI qu'UX pour offrir aux visiteurs une expérience de qualité supérieure et rafraîchir l'aspect graphique global de la page.

Capture d'écran de la nouvelle version du Store Locator

L'écrasante majorité des visites du site ayant lieu sur mobile, il était logique de baser mon travail sur une approche mobile-first, là où la première itération du design avait été pensée en premier lieu pour les ordinateurs de bureau (desktop). En s'inspirant du Store Locator d'Airbnb, j'ai également cherché à réduire l'occurrence des couleurs vives afin de focaliser l'attention de l'utilisateur sur les fonctionnalités essentielles, là où, auparavant, on retrouvait un grand nombre de couleurs différentes qui pouvaient dissiper le visiteur.

Amélioration des performances

Basé sur WordPress et WooCommerce, le site souffre de nombreux problèmes de performances, en partie mitigés par de nombreuses couches de cache. En effet, bien qu'étant le Content Management System (CMS) plus utilisé au monde, WordPress est avant tout pensé pour une utilisation blog. Toute l'architecture de la base de donnée et des différentes requêtes se retrouve ainsi alourdie par une conception très générique.

Comparatif des performances de l'ancienne et de la nouvelle version du store locator

Pour pallier cela, j'ai ainsi proposé de me découpler le plus possible de WordPress, en ne gardant que les fonctions essentielles telles que le système de routage des requêtes. Cette mission a donc été l'occasion de repenser la base de donnée afin de réduire drastiquement le nombre de requêtes et leur temps d'exécution.

L'utilisation de Doctrine et du module de cache de Symfony m'a ainsi aidé à réaliser des tables SQL sur mesure pour optimiser le stockage et le requêtage des données.

Une grande liberté d'action

L'un des objectifs primordiaux de cette mission était aussi de gagner en liberté. Auparavant, le champ d'action était fortement bridé par l'utilisation de nombreux plugins qui, s'ils n'étaient pas suffisamment ouverts, n'offraient pas de possibilités de personnalisation suffisantes. Mais alors pourquoi ne pas directement modifier le code source ? Bien qu'évidente, cette solution implique de perdre toute modification apportée au plugin lors des mises à jour.

Pour offrir une plus grande liberté d'action, la solution s'est trouvée d'être de fournir des alternatives en dehors de l'écosystème WordPress. L'utilisation de librairies spécifiques et l'implémentation des fonctionnalités critiques au sein d'un plugin sur-mesure a ainsi permis d'apporter une plus grande flexibilité pour selfstock.com, dont les demandes peuvent à présent être facilement réalisées.

Ce but a été atteint suite au choix de la Clean Architecture, ensemble de principes qui permettent un découplage fort de la logique métier en inversant les dépendances. Ainsi, le code du Store Locator ne dépend pas de WordPress, Doctrine ou Twig, il ne fait que les utiliser au travers de composants intermédiaires qui agissent comme interface entre eux et le code métier. De cette manière, un changement technologique peut plus facilement être effectué, puisqu'il suffit de modifier les adaptateurs.