Le site uniwax.com est maintenant en ligne depuis quelques mois. Ce projet qui nous a occupés pendant un peu plus d’une année est un bon sujet pour vous présenter une étude de cas complète et détaillée sur la création d’un site e-commerce africain sous Magento 2, des débuts jusqu’à la mise en production finale.
Les débuts du projet :
En fin d’année 2017 la société UNIWAX a pris contact avec nous pour l’étude de son projet de vente en ligne de pagnes personnalisables. Vous pouvez imaginer les petites lumières qui se sont allumées dans nos têtes. Nous avons été immédiatement conquis par tous les aspects de ce projet :
- L’entreprise Uniwax, basée à Abidjan, en Côte d’Ivoire, fait partie du groupe Néerlandais Vlisco. C’est une entreprise importante en Côte d’Ivoire, qui développe des produits traditionnels de qualité, tout en menant une politique sociale exemplaire.
- Les motifs des pagnes sont dessinés sur place par des artistes talentueux. Ils sont colorés, créatifs, originaux.
Nous sommes devenus des fans inconditionnels :) - Les objectifs du projet sont multiples et relativement complexes. Un véritable challenge technique et créatif pour nous.
Dès l’accord commercial passé, nous avons rédigé les spécifications techniques du projet. Comme je le disais, les objectifs sont multiples. En voici les principaux points :
- Reprendre intégralement le site existant qui proposait une galerie des collections des pagnes traditionnels, des contenus rédactionnels et un blog.
- La priorité ergonomique du site est le mobile, représentant plus de 80% des habitudes des internautes ciblés.
- Créer un catalogue de pagnes personnalisables, c’est à dire permettant à l’utilisateur de modifier l’aspect général du pagne, d’incruster des visuels ou des logos et de saisir des textes.
- Gérer un workflow de commande qui permette à UNIWAX d’effectuer un contrôle éthique sur les commandes passées. Il s’agit bien évidemment de ne pas autoriser n’importe quelle personnalisation : pas de sexe, pas de drogue, pas de discrimination.
- Générer un motif personnalisé imprimable.
- Piloter l’impression numérique des pagnes pour les commandes validées.
- Synchroniser les commandes avec l’ERP pour les données comptables.
- Gérer les contraintes locales : Les paiements sont majoritairement effectués via les forfaits mobiles (l’utilisation de la carte bleue n’est pas très répandue en Côte d’Ivoire) et les livraisons doivent être entièrement gérées par le réseau de distribution d’UNIWAX.
- Maintenir une capacité d’évolutivité forte, ce premier site e-commerce pour UNIWAX étant le début d’une longue aventure digitale.
Dès le démarrage du projet, chacun des sujets listés ci-dessus a été détaillé avec le maximum de précision. Mais bien sûr, comme il est impossible, voir même dangereux, de tout prédéterminer, le cahier des spécifications technique a évolué tout au long de la production, acceptant les changements et modifications liées aux différentes contraintes rencontrées.
En parallèle, une étude ergonomique a été effectuée à l’aide de Storyboards et de prototypes (diffusés sur MarvelApp) pour nous permettre d’analyser la manière d’utiliser les interfaces afin de créer des pagnes personnalisés sur un smartphone.
Une fois le prototype validé, nous avons démarré la création graphique, en explorant deux pistes : l’une très sobre et peu colorée, l’autre maintenant l’univers graphique de la marque.
Les maquettes graphiques et toutes les déclinaisons ont ensuite été réalisées (avec Sketch) tout au long du projet, suivant l’évolution du cahier des spécifications techniques, lui-même suivant l’évolution des développements et des contraintes rencontrées.
Production :
La production du projet a été menée de front par toute l’équipe sur tous les aspects du projet : conseils, design, UX et ergonomie, frontend, backend et suivi de projet.
Interface de personnalisation des pagnes
Véritable coeur du projet, l’éditeur de pagnes personnalisés devait respecter les contraintes suivantes :
- Simple à utiliser sur un smartphone.
- Offrant la capacité à personnaliser le pagne en un minimum de manipulations (3 à 5 étapes).
- Un aspect ludique de la personnalisation pour donner l’envie de tester et jouer avec.
Nous avons par conséquent fait le choix de limiter les possibilités de personnalisation afin de ne pas transformer l’éditeur en une véritable usine à gaz. Les actions disponibles sont peu nombreuses, mais permettent d’obtenir un pagne unique, personnel :
- Choix du motif
- Choix des couleurs
- Incrustation de médaillons pouvant accueillir une photo ou un logo
- Incrustation de textes avec un choix restreint de typographies.
- Manipulation complète des visuels insérés dans le médaillon.
Design des pagnes
Initialement les pagnes étaient dessinés par les artistes de la marque avec Adobe Photoshop à l’aide de palettes graphiques. Nous avons dû contraindre les artistes à changer leur mode de production afin de nous fournir des motifs vectoriels, réalisés sous Adobe Illustrator. Ceci nous a permi d’obtenir des motifs ne dépassant pas le MegaOctet, alors que les originaux étaient entre 20 et 50 fois plus lourds. Au delà du problème du poids, il était absolument obligatoire d’avoir des motifs vectoriels pour autoriser l’édition des couleurs et générer un fichier prêt à imprimer.
Figure 1 : Optimisation des tracés dans Illustrator
De plus, pour optimiser le poids des fichiers vectoriels (qui pouvaient contenir plusieurs milliers de points), il a fallu travailler sur la base de patterns de symboles. Ainsi, le motif de base est défini une fois puis répété sur une grille de 8 à 16 éléments, selon la taille du symbole de base.
Figure 2 : Exemple de pattern
Résultats :
- Une équipe interne formée à l’utilisation d’Illustrator
- La réalisation de tutoriels vidéos
- Des fichiers SVG légers et faciles à manipuler par les développeurs
Génération des motifs personnalisés imprimables
Comme évoqué plus haut, les pagnes ont été générés en vectoriel (format SVG). Le format vectoriel offre de nombreux avantages, dont le poids du fichier final et la capacité de manipulation des données par les scripts. Cependant le traitement de l’affichage d’un fichier vectoriel sur un smartphone nécessite beaucoup de ressources de calcul. Pour limiter ces calculs du CPU qui auraient rendu l’affichage trop lent et saccadé (sans parler de l’utilisation abusive de la batterie), nous transformons le motif SVG en motifs PNG montés en plusieurs couches.
Figure 3 : Explication sur l’utilisation des couches de couleurs
L’utilisation de couches PNG permet à l’utilisateur de visualiser rapidement et facilement le motif.
L’incrustation de photos et/ou de textes se fait via l'utilisation de médaillons SVG, prêt à l’emploi, fournis également par les illustrateurs d’UNIWAX.
Nous avons défini une structure des calques dans Illustrator qui permette aux scripts de connaître l’emplacement du visuel, l’espace disponible qui lui est dédié, l’emplacement du texte ainsi que la courbe que doit suivre le texte dans le cas où le médaillon propose un texte courbé.
Figure 4 : Structure d’un médaillon dans Illustrator
Lorsque l’utilisateur personnalise un pagne, toutes les modifications apportées sont enregistrées pour pouvoir être modifiées une fois le produit ajouté au panier. Ce n’est que lorsque la commande est passée que la personnalisation est appliquée au fichier SVG pour générer le PDF à destination de l’impression.
A noter également que l’enregistrement des données de personnalisation permet à l’utilisateur de retrouver sa personnalisation lorsqu’il change de produit, se déconnecte et revient sur le site quelques jours plus tard. Pratique pour lui permettre de choisir son motif ;)
De nombreux tests ont dû être réalisés, et pour cela nous avons créé une interface temporaire permettant :
- de tester et vérifier que les fichiers SVG fournis par l’équipe UNIWAX sont correctement réalisés, en respectent les contraintes imposées.
- de tester et vérifier les changements de couleurs
- de tester et vérifier la génération des PDFs.
La production pilotée par Magento et Streamlive (Caldera)
Une fois la commande validée par les modérateurs d’UNIWAX, les données de la commandes sont envoyées à Streamlive de CALDERA qui prend en charge la production sur l’imprimante numérique.
Résultat :
- Mise en place d’une interface permettant le contrôle éthique et le suivi de la production dans Magento
- Développement et utilisation d’un connecteur mettant en relation Magento et Streamlive.
Méthodes de paiement
Trois méthodes de paiement ont été définies :
- par CB, qui bien que peu utilisée en Côte d’Ivoire, reste une possibilité nécessaire.
- via Orange Money, qui est le moyen de paiement via le forfait mobile Orange, uniquement disponible en Afrique
- via MTN, qui est le moyen de paiement fourni par l’opérateur mobile MTN
Nous avons développé les deux connecteurs de paiement Orange Money et MTN.
Ces deux connecteurs seront bientôt mis à disposition sur notre store ;)
Logistique
Autre sujet inédit et passionnant !
Les moyens de livraison en Côte d’Ivoire ne sont pas aussi développés qu’en Europe. La contrainte a donc été de s’appuyer sur le réseau de distribution d’Uniwax existant et extensible à l’avenir vers un réseau de partenaires.
Il nous fallait par conséquent imaginer le système global permettant de suivre les différents prestataires prenant en charge les colis depuis l’entrepôt jusqu’à la remise en main propre.
Le circuit est le suivant : Entrepôt -> Livreur -> Distributeur -> client.
Nous avons développé une PWA (Progressive Web App) pour Magento permettant à un terminal mobile de récupérer les commandes à traiter selon le livreur ou le point de distribution.
Le terminal dispose d’un scanner de code barre qui peut changer l’état d’une commande lors du scan du colis. Le scan est une opération réalisée à la réception du colis et à la remise au client.
Autre contrainte : le terminal doit pouvoir fonctionner avec ou sans réseau. Ainsi, toutes les opérations d’entrées et sorties sont enregistrées en local sur le terminal puis synchronisées dès que le terminal récupère une connexion.
Résultats :
- Design et ergonomie de l’outil de suivi logistique
- Développement de la PWA de gestion du tracking des colis
- Installation des terminaux
- Livraisons des terminaux
- Tests grandeur nature
Catalogue des produits traditionnels
L’un des objectifs du projet était également la reprise de l’existant, dont faisait partie une présentation des motifs traditionnels des pagnes réalisés et vendus par UNIWAX.
Nous avons fait le choix d’anticiper sur la possibilité future de vendre en ligne ces pagnes. C’est donc via les produits Magento que sont présentées les collections. Pour le moment, les fonctions de commandes en ligne sont bloquées.
Contenus rédactionnels
Reprise de l’existant avec notre extension Advanced Content Manager pour Magento 2 pour créer le blog et la médiathèque (entre autres).
Carte des boutiques
Advanced Content Manager est également utilisé pour générer le store locator, utilisés également comme points de retrait pour les colis.
La mise en production
Tests, affinage : La mise en production d’un site aussi conséquent est une phase délicate qui nécessite de très nombreux tests. 3 mois ont été requis pour cette période de recettage du projet. Pour la mise en production, Anthony et Thomas sont allés à Abidjan pendant 10 jours pour les derniers réglages, notamment en ce qui concerne le workflow et le tracking des commandes.
Hébergement : Afin d’assurer un service optimal, nous avons choisi d’héberger le site sur l’infrastructure technique proposée par Google Cloud. Ceci nous permet d’avoir plusieurs serveurs virtuels dédiés à certaines tâches (Cache, Front, Backoffice, Generateur PDF, Base de données). Ces serveurs sont scalables et s’activent selon le trafic sur le site web.
Conclusion
Bilan très positif, malgré les nombreux écueils rencontrés que nous avons pu contourner sans faire de compromis sur la qualité du résultat, tant ergonomique, fonctionnel qu’au niveau de la performance.
S’il n’est pas toujours évident de maintenir le cap sur les spécifications techniques, et de se faire comprendre sur les détails de certaines fonctions, nous avons tout au long du projet réussi à conserver un haut niveau technique, un code propre et irréprochable.
La phase de création et d’optimisation des motifs au format SVG a été relativement longue à mettre en oeuvre. Dès lors que tout était clairement défini, nous avons transmis notre expérience à l’équipe UNIWAX, qui a su produire une grande quantité de motifs personnalisables avec brio.
Autre difficulté rencontrée : la communication avec les partenaires tiers (moyens de paiement) qui ne montraient pas beaucoup de disponibilités et surtout ne fournissaient qu’une documentation technique très succincte et d’un autre âge.
Les points positifs sont nombreux :
D’abord notre fierté d’avoir relevé un tel challenge technique. Nous sommes restés motivés et moteurs tout au long du projet.
Ensuite les rencontres humaines avec l’équipe d’UNIWAX, énormément impliquée dans le projet.
Et bien sûr les voyages que nous avons pu faire à Abidjan, ainsi que l’accueil que nous avons réservé aux équipes d’UNIWAX pour leur faire découvrir notre succulente choucroute.
