Making-of : Un site de vente de sac personnalisables avec WordPress et WooCommerce

Nous avons lancé pour un client il y quelques semaines un site marchand destiné à vendre des sacs à main en ligne personnalisables. Le projet s’appelle Je vais rentrer tard. Petit making of d’un projet qui n’aura pas été sans embuches.

Attention ! Long read. Je me suis un peu emballé et j’ai écris un roman. Prenez un café, quelques cookies, installez-vous tranquillement.

Qui dit Start Up dit innovation

Chez Smoothie on adore les start-up et leurs projets innovants, c’est pour cela que nous nous sommes spécialisés dans leur accompagnement (conseil, développement spécifique). C’est à mi 2013 qu’une amie se pointe avec son projet murement réfléchi de lancer une boutique e-commerce de sacs à main. Facile !

Je Vais Rentrer Tard : Sacs personnalisables, made in France, cuirs de qualité

Comment souvent on a dit “Facile” un peu tôt. Le site va mettre l’accent sur 3 choses : les sacs à mains sont totalement fabriqués en France, ils sont réalisés avec des cuirs de grande qualité seulement. Et ils sont personnalisables, un peu comme les chaussures sur Nike Id ou Reebok. C’est là que réside tout le défi du projet.

Du côté Design / UX / Ergonomie

Nos clientes avaient déjà murement réfléchi au branding. Quelque chose de décalé, féminin et moderne : Je Vais Rentrer Tard.

Pour toute la réflexion UX / Design, Fabrice a tout d’abord demandé aux filles de réfléchir à leur philosophie, ce qu’il fallait montrer avant tout afin de créer le plus d’impact possible.

La page d’accueil se focalisera tout d’abord sur l’argument principal : créer le sac à l’image de votre vie avec un bouton Call to action vers le système de personnalisation. Présentée sous forme de landing page, une section montrera quelques exemples, “la Galerie” et aussi un résumé du concept. Une page concept dédiée s’attardera plus en détails sur le “pourquoi” de ce projet, en mettant l’accent sur les cuirs de qualité, la fabrication à la main 100% française, qui sont des valeurs fortes des porteuses de projets.

Vient ensuite la phase de Mockup, suivie de l’identité visuelle, flat, pastel et aérée, et enfin des maquettes. Nous avons utilisé Invision pour faire valider mock-ups et maquettes aux filles de JVRT. Invision permet à Fabrice d’importer ses designs et de mettre des explications et au client de poser des commentaires pour un retour rapide et efficace.

Du côté Code / Technologies

Après quelques réunions pour travailler sur le projet, établir une estimation du coût de fabrication, on se lance dans la réflexion des technologies à utiliser.

On pense tout de suite à WordPress et WooCommerce. Ca permet d’avoir un site complètement administrable, et gérer les commandes depuis une seule et même interface. Et Puis WordPress, on en fait depuis 7 ans, donc on est calés sur le sujet.

Fabrice comment à réfléchir à l’UX (ergonomie, arboresence, contenu) et on décide d’utiliser Advanced Custom Fields afin que chaque section des landing pages soient administrables.

Comme on va bosser à plusieurs sur le projet (Thierry au Front, Natasha sur WooCommerce et l’intégration, moi en soutien) on versionne le projet avec git et sur Github. Le site sera hébergé sur WPEngine et boosté avec Cloudflare.

Pour des raisons de budget le site et le blog sont responsive, mais pas la partie personnalisation / commande. Nous avons jugé que les gens seront plus à l’aise sur un ordinateur pour personnaliser son sac.

La personnalisation

C’est là que tout va se jouer : comme tout site le message dès la page d’accueil se doit d’être clair, et doit donner envie à l’internaute d’aller créer et commander son sac. Il va donc falloir que ce système de personnalisation soit bien pensé, ergonomique et ludique.

L’internaute peut choisir son sac parmi plusieurs sacs de base, et ensuite personnaliser l’avant, les côtés, l’intérieur, les boucleries, les finitions … Quelques exemples de résultats :

L’organisation des données dans WooCommerce

Le problème est que les délais commencent à être serrés et certains détails n’ont pas encore été complètement validés du côté client. C’est assez tard que l’on convient enfin d’un modèle de données et d’une organisation des produits et sous-produits dans WooCommerce.

C’est un schéma simplifié mais qui montre l’étendue des possibilités. Techniquement on va créer dans WooCommerce une catégorie “mendigote”, le produit “mendigote de base” et chaque partie personalisable du sac sera un sous produit de la catégorie. chacune des parties de chaque sac pourra être habillée selon 73 variations de cuirs différents (on utilise pour cela les variations Woocommerce).

Après calcul on doit rendre plus de 2200 vues différentes. Au final il existe quelques millions de possibilités différentes.

Choix technologiques Front End

En plus de développer un module de personnalisation, il faut que l’on fasse appel à un collègue calé en modélisation 3D pour créer les sacs et les différentes parties.

Nous avons convenu d’utiliser Angular.js de Google pour réaliser le module de personnalisation javascript qui s’avère ultra pratique pour traiter des données en temps réel.

Pour envoyer les données à angular, nous avons généré un export JSON de toute la partie sac personnalisables de la boutique. Ce JSON est mis à jour lorsque le client fait une modification depuis l’admin sur un des produits (changer un prix par exemple). L’export est un peu lourd et peut prendre une a 2 minutes. Nous avons préféré cette méthode plutôt que de faire une lecture Ajax en live, car les petits délais de chargement d’informations en direct empêchait le module d’être fluide.

Le plus long a été de traiter les “cas particuliers” qui se sont avérés très nombreux et assez complexes à gérer.

Retour vers WooCommerce

Lors de la validation du produit, celui-ci est envoyé à Woocommerce en ajout de produit à la volée, où le prix final est calculé, et toutes les informations du produit sont listées.

Evolutions techniques

Nous prévoyons à terme de générer une image du produit afin qu’elle soit transmise à la commande mais aussi pour que le client puisse partager sa création sur les réseaux sociaux, et booster la dynamique autour du produit.

Nous avons mis en place un Hash dans l’URL qui s’enregistre en cookie, de cette manière si une personne partage l’url à un ami, il pourra voir le sac personnalisé. Cela permet également à un internaute de revenir terminer sa création plus tard, ou de la retrouver en cas d’interruption momentanée de connexion.

La phase de modélisation 3D

Modéliser les sacs était déjà un beau défi : il faut que le rendu soit le plus réaliste possible, afin que le client se projette complètement avec son produit. Il faut donc que le rendu des ombres, lumières et surtout des textures soit crédible. Un rendu “dessiné” peut freiner l’internaute. Les sacs étant peu abordables, l’internaute souhaite prendre le moins de risques possible lorsqu’il commande et éviter les déceptions dûes à une différence trop importante entre le visuel et le vrai produit.

On a pensé pendant un moment à proposer les sacs en vraie 3D pour que le client puisse voir son produit sous tous ses angles, en utilisant par exemple le web player Unity 3D. Cependant le gros problème vient du fait qu’il faille installer un petit module, même si c’est très simple, le risque était trop grand. Nous avons préféré donc faire avec des rendus 3D précalculés.

L’automatisation des rendus

La masse de travail étant assez lourde, il a fallu optimiser les rendus : Après avoir modélisé les sacs, géré les lumières, ombres et textures. Notre collègue Philippe a écrit un script pour opérer le rendu automatiquement avec chacune des textures

Chaque morceau de chaque produit a donc été rendu avec les 73 cuirs différents. Malgré le fait que le process aie été optimisé, les ordinateurs qui se sont occupés des rendus on travaillé pendant plusieurs jours et nuits pour fournir les quelques 2200 images de morceaux de sacs.

Le Module de personnalisation

Thierry allait donc pouvoir finaliser son module avec Angular et toutes les images. Bémol : le temps restant quasiment nul, nous avons du fournir un effort jours et nuits pour finaliser dans les temps.

Timings, inconnues et difficultés

Le gros problème, outre mon optimisme légendaire, était le temps : la soirée de lancement fixée au 30 janvier, les engagements pris sur KissKissBankBank, les communiqués de presses partis. Quand on a vu que le temps restant serait trop court, il était déjà trop tard. Ca aurait pu être évité plus simplement avec un fonctionement plus agile. Et surtout ne rien prévoir en communication du côté client tant qu’un prototype n’est pas opérationnel.

Ce qui a posé le plus de problème est le fait que le maroquinier a fourni les modèles moins de 2 semaines avant le lancement. Ce qui implique tout simplement que le module de personnalisation et les rendus 3D ont du être fait dans ce laps de temps. Aussi improbable que ce soit, on a réussi à livrer un produit certes pas parfait, mais fonctionnel dans les temps, mais au prix de gros coups de stress et de nuits blanches successives.

La soirée de lancement

19h48, Les invités boivent un coup. Thierry s’occupe de pusher la dernière version depuis Montréal. La tension monte d’un cran à la soirée de lancement, Le discours d’ouverture est prévu à 20h. Je suis dans la “gueule du loup”, sourire feint, à prier pour que la dernière mise en ligne fonctionne correctement.

Et au final on a été prêt, à la minute prêt ou presque. On a pu relever quelques petits bugs grâce aux testeurs de la soirée, mais globalement tout le monde a pu s’amuser à concevoir son sac en ligne. Nous avons ouvert le site une semaine plus tard afin de laisser un accès anticipé à tous les pledgers de KissKissBankBank.

Quelques mots sur le Projet “Je Vais Rentrer Tard”

Le concept a été initialement imaginé par 3 filles : Amandine, Catherine et Aurélia De Grenoble et Aix En Provence. L’idée est inspirée du site Dessine Moi Un Soulier. L’avantage d’un sac par rapport à des chaussures est que le taux potentiel de retour de produit est moindre. Le projet a longtemps muri dans leur tête avant de se lancer concrètement : réfléchir au branding et à la philosophie, trouver un maroquinier, imaginer les modèles, créer la SARL, convaincre les banques, monter un dossier KKBB et trouver le prestataire web. Bref bravo à vous 3 pour cette aventure !

Pour visiter le site, rendez-vous ici : jevaisrentrertard.com

En conclusion

En tant que chef de projet sur Jevaisrentrertard, j’ai pu noter quelques points que je pourrais améliorer à l’avenir et conforter certains process et connaissances :

• Ne jamais vouloir trop presser la sortie d’un produit : We don’t launch on date, we launch on quality
• Pour ce genre de projet où plusieurs personnes travaillent dessus, il est bénéfique de dédier quelqu’un à la gestion du projet
• Je n’ai pas assez itéré et réfléchi sur la partie technique Woocommerce -> module de personnalisation ce qui nous a couté du temps par la suite
• Le process : reflexion du contenu (scénario, arguments, why) puis de l’UX, et enfin du Design est une bonne méthode.
• L’utilisation de WordPress et WooCommerce était une bonne chose
• Nous avons fixé le budget un peu trop tôt. Il n’a pas été évident de rentrer dans nos frais.
• Il faut bien prendre en compte que sur ce genre de projets le nombre d’inconnues à la base n’est pas négligeable, d’où la nécessité de fonctionner Agile dès le début.
• Il est important de définir le cahier des charges avec le client, en tout premier lieu. Le but n’est pas une relation client – prestataire mais une relation de partenariat. Ayant des compétences dans la Start-Up, il est utile de la partager avec le client pour l’aider à appréhender au mieux son projet, fixer des priorités, mettre de côté des points pas importants pour le moment et se focaliser sur l’essence même du produit.
• Ne pas tout faire pour la V1 : en se basant sur le principe du MVP (Minimum Viable Product), prévoir pour la V1 un produit fonctionniel, attrayant, mais ne pas vouloir absolument sortir tous les produits par exemple, et en garder pour la suite, le temps de finaliser. Cela permet à l’internaute de découvrir des nouveautés à chacune de ses visites.
• Il faut dès le début parler de Lean, Méthode Agile, coûts non fixes avec le client, afin qu’il comprenne comment gérer au mieux la complexité dans son intérêt
• Travailler dans le stress a des bons et des mauvais côtés. Un bon stress est bénéfique, mais un stress dû à une erreur stratégique peut être source de tensions et de bâclages.
• Savoir dire non : Ce n’est jamais bien vu de dire non à son client, mais à l’heure où il faut se dépecher pour sortir un produit, mieux vaut se focaliser sur l’essentiel, et laisser les détails pour plus tard. Ce n’est pas toujours évident d’expliquer que ce n’est pas par flemme mais que c’est stratégique
• Ne pas vouloir tout faire : mon erreur dans le passé était de vouloir coder, designer, gérer des projets et des prospects. J’étais trop optimiste. Aujourd’hui avec 6 personnes à Smoothie je passe quasiment la totalité de mon temps à faire gestion de projets (entrants et actifs) et administratif. Le développement était assuré par Thierry, l’intégration et l’ecommerce par Natasha et le design par Fabrice.

Je pense qu’il est important après un gros projet, de prendre le temps, se poser, regarder ce qui s’est bien et moins bien passé, mettre au point de nouvelles techniques, lire un peu afin d’être encore plus efficace sur le projet suivant. Et surtout partager avec la communauté les choix, les difficultés afin de faire profiter de l’expérience à tous.

Ca fait un petit moment que je n’avais pas écris sur le blog, du fait qu’il a fallu terminer ce projet, puis des congés. Me revoilà avec pleins de nouvelles histoires. Vous avez tout lu ? Y’a quelqu’un ? ohé ?