🎁 Projet mybox – Template SaaS (B2C & B2B)
Contexte :
Au sein de l’équipe Buybox, j’ai participé à la refonte du template « MyShop », utilisé par nos clients B2C et B2B pour personnaliser leur boutique de cartes cadeaux en ligne. Cette interface devait être à la fois responsive, adaptable à plusieurs marques, et respectueuse des contraintes techniques de notre plateforme SaaS.
Problématiques identifiées
- Template vieillissant : l’interface MyShop (ancien template) ne reflétait plus l’image de la plateforme Buybox ni les standards UX/UI actuels.
- Parcours d’achat peu fluide : les étapes de commande manquaient de clarté, générant de la friction pour l’utilisateur final.
- Personnalisation client inexistante : sans maquette de référence, les demandes de customisation des clients B2B/B2C arrivaient sans cadre. Cela générait des difficultés à évaluer la faisabilité technique, étape très chronophage.
- PDF carte cadeau peu qualitatif : visuellement daté, UX non adaptée à l’impression.
- Code front-end non maintenable : l’intégrateur repartait de zéro à chaque nouveau client, faute de base propre et structurée.
Missions menées :
- Refonte complète de l’UI sur Figma, desktop et mobile, déclinaisons B2C et B2B (version EN et FR). Les maquettes sont livrées aux clients comme base de personnalisation de leur boutique en ligne
- Optimisation UX des étapes du parcours d’achat.
- Refonte du PDF carte cadeau : mise en page optimisée
- Réécriture complète du code front-end CSS pour livrer une base propre et réutilisable à l’équipe intégration.
🚀 Résultat / Impact :
- Relation commerciale fluidifiée : les clients disposent désormais d’une maquette Figma concrète pour visualiser et cadrer leurs demandes de personnalisation, limitant les allers-retours liés à des demandes incompatibles avec le template.
- Coûts mieux justifiés : les demandes spécifiques hors template sont désormais clairement identifiables et facturables en option.
- Gain de temps en intégration : la base front-end propre évite à l’intégrateur de repartir de zéro à chaque déploiement client.
- PDF repensé : plus lisible, et plus aligné avec l’image de marque.
Technos & outils :
Figma · HTML/CSS
1. Les maquettes comme outil de cadrage commercial
Le template existant ne permettait pas aux équipes commerciales de s’appuyer sur une base visuelle claire lors des échanges clients.
Sans référentiel commun, les demandes de personnalisation arrivaient sans cadre, rendant difficile l’évaluation de leur faisabilité technique.
J’ai conçu sur Figma l’ensemble des écrans du nouveau template. Desktop et mobile, parcours B2C et B2B, versions française et anglaise pour répondre à ce double besoin :
- permettre au client de se projeter,
- et fournir aux équipes commerciales un support concret pour cadrer les demandes en amont.
2. Un template conçu pour être présenté, personnalisé et déployé
Une fois le concept validé, j’ai décliné le template afin de disposer d’une base complète et cohérente, directement exploitable par les équipes.
L’ensemble des pages a été conçu sur Figma, puis intégré en HTML/CSS (en plusieurs langues) afin de fournir une base réutilisable pour les futurs projets.
Le template pouvait ainsi servir à la fois de :
- support de présentation commerciale
- et de socle de production, avec une expérience cohérente sur desktop et mobile.
Cette approche permettait de partir d’une base commune pour chaque nouveau projet, tout en conservant la possibilité d’adapter l’interface à l’identité et aux besoins spécifiques de chaque client.
3. Décliner l'expérience au-delà de la boutique
Le nouveau template ne devait pas être cohérent uniquement sur les pages de la boutique.
J’ai également travaillé sur les supports qui accompagnent l’expérience client : documents PDF et emails transactionnels, afin de prolonger le nouvel univers graphique sur les différents points de contact.
L’objectif était d’éviter une rupture entre l’interface de la boutique et les communications envoyées au client, et de construire une expérience plus cohérente sur l’ensemble du parcours.
