Watchdreamer, e-commerce de montres de luxe

Brief

Rendre un rêve accessible. C’est en ces termes que notre client Nicolas Hildenbrand nous a présenté son projet. L’idée est simple : être le premier en Suisse à proposer une solution de financement pour l’achat d’une montre de luxe. La passion et l’exigence de Nicolas sont venus compléter à merveille le tableau qui avait recueilli l’adhésion de toute l’équipe. Nicolas a confié à Antistatique la conception, le design et le développement de sa plateforme e-commerce et nous avons pu réfléchir au positionnement de cette nouvelle marque ainsi qu'à ses premiers pas en terme de communication.

Le design du projet Watchdreamer s’est appuyé sur 3 axes principaux :

  • Création de l’identité d’une marque et de son Univers
  • Différenciation et compréhension du concept d’entreprise
  • Vente e-commerce

Ces 3 objectifs sont interdépendants, sans l’un d’entre eux, pas de réussite. Nous avons donc dû les travailler de front et de façon complémentaire :

1. Stratégie de l'image de marque

Design visuel

Comme mentionné plus haut, la perception du public de la nouvelle marque Watchdreamer s’inscrit dans 2 univers : celui de la haute horlogerie (les produits) et celui du e-commerce (le contexte). Il nous fallait répondre aux attentes de ces 2 univers auprès des futurs clients. Rassurer sur l’authenticité des produits et ainsi légitimer Watchdreamer. Et en même temps accompagner les futurs propriétaires dans un tunnel d’achat parfois complexes avec la demande de crédit en ligne.

Positionnement visuel

Dans notre analyse pour la marque, nous avons étudié le paysage des marques de haute-horlogerie bien évidemment. Nous avons également envisagé un horizon plus large : le luxe en générale et les codes qui y sont associés actuellement. Ce à quoi les gens font référence ou ce à quoi ils peuvent s’attendre. Nous menons cette recherche avec le client notamment au travers de workshop de branding (définition, positionnement & stratégie de communication).

Typographie

Nous avons choisi la police de caractères Metric de Klim Type Foundry pour accompagner la marque. Ce dessin de caractère contemporain fait parfaitement écho à la précision et à l’expertise horlogère Suisse. Son auteur parle de «Engineered Geometry», une approche rationnelle pour un résultat fonctionnel. Un classique moderne en somme.

Sobriété & contraste

Nous avons condensé les codes du luxe dans une palette de couleurs restreinte et contrastée, avec une petite touche Suisse. Combinée avec la police Metric, nous avons construit une interface sobre pour on peut se concentrer sur le produit. Éviter le bruit et la dissonance visuelle aurait pu être notre credo. Cette approche nous permet également d’être un bon écrin pour les différentes marques et modèles présentés sur le site.

2. Compréhension du contexte

Mise en avant des différenciations

Comme évoqué ci-dessus, sur le site watchdreamer.com, un internaute peut choisir de payer en plusieurs fois par crédit ou bien de payer de façon plus classique par virement bancaire ou carte de crédit. Le véritable enjeu ici réside dans la compréhension du système de paiement atypique par crédit. L'internaute doit comprendre immédiatement les différentes méthodes de paiement disponibles sur le site. Dans cette logique, tous les prix du site sont toujours affichés dans les deux moyens de paiement.

Clarté et fluidité dans la navigation

L'expérience de l'utilisateur se fait dans sa navigation à travers le site. Les différents éléments de paiement doivent être identifiables et clairs tout au long du parcours de l'internautes dans le site. Pour cela, nous avons simplifié le plus possible l'accès aux deux moyens de paiement tout en créant des tunnels de paiement tout à fait différenciés. Ainsi l'expérience est différente selon le moyen de paiement utilisé mais l'internaute reste guidé dans le processus d'achat.

3. Transformation

Spécificités de la demande de crédit

Comme nous avons commencé à l'expliquer plus haut. L'un des principal enjeux de ce projet a été de modéliser les deux systèmes de paiement de façon liée, cohérente mais dissociée. Le système de paiement par carte, classique étant lié à une logique e-commerce de panier tandis que le moyen de paiement par crédit est avant tout une demande personnalisable et non une commande à proprement parlé. Nous sommes arrivé à ce résultat grâce à des recherches profondes de modélisation, des wireframes très détaillés, et la création de parcours utilisateurs.

Les leviers traditionnels

La vente est l’objectif final du site, suite à notre travail sur l'image de marque et la compréhension du contexte, il nous reste à mettre en place les éléments principaux des sites e-commerce. Cela passe notamment par l'optimisation du flux de navigation et par la mise en avant d'éléments de réassurance. Le parcours de l'internaute dans le tunnel de paiement devait correspondre à l'image du site mais il devait également être relayé par un service client disponible et réactif. Par exemple, afin d'augmenter l'expérience utilisateur, nous avons mis en place un système complexe de transaction par emails personnalisé et automatisé.

Les éléments de contenu

Dans le site, l’image et donc la création d'une relation de confiance, circule énormément par le contenu visuel et textuel. Vous pouvez d'un côté ressentir le travail de notre équipe et celui de Watchdreamer dans la qualité du travail textuel mais également dans la présence des éléments de réassurance tels que les bannières et la partie FAQ.

Technologie

Après une longue analyse, nous avons identifié deux frameworks - Sylius et Drupal 8 - Commerce 2 ayant le potentiel de soutenir les ambitions du site Watchdreamer.
Les deux étant propulsés par Symfony, nous avons effectué un comparatif afin de les départager, voici un résumé condensé de ce dernier:

  • Communauté ;
  • Developer Experience ;
  • Flexibilité ;
  • Évolutivité ;
  • Budget ;
  • Deadline ;
  • Connaissance et expérience des équipes.

Suite à plusieurs discussions avec Watchdreamer, nous en sommes rendu compte que le site devait être plus qu'un site e-commerce. Celui-ci doit également propulser un système de Blog, un outil de gestion de Page et Menus et une interface avancée permettant la gestion fine des produits. Toutes ces conditions nous ont permis de confirmer la solution Drupal 8 comme une évidence aux yeux de tous.

Fraîchement propulsé dans sa dernière version 2.0, mais déjà parfaitement maîtrisé et éprouvé par notre équipe de développeurs, Drupal Commerce 2 s'inscrit comme la solution la plus flexible et logique, quant aux besoins de Watchdreamer.

Complètement refondu, modulaire, évolutif, sécurisé, performant, robuste, autant d’adjectifs qui caractérisent Commerce 2, un outil d’une très grande qualité.
À la pointe des dernières nouveautés, travailler avec ce genre de technologies apporte un sérieux avantage quant à la pérennité et l’efficacité des projets.

« Watchdreamer est un vrai “Game Changer” dans l’industrie horlogère suisse. Ce concept propose, pour la première fois sur le territoire helvète, l’achat à crédit de modèles prestigieux. Une bonne solution pour se faire plaisir et investir dans une (ou plusieurs) montre(s) de luxe. Le tout sur une plateforme moderne et en quelques clics. »

 

Challenges

Simulateur de crédit

Un simulateur de crédit est directement intégré dans le site Watchdreamer.

Le gros challenge fut de transformer les formules de crédit provenant de sources hétéroclites (Excel, Java ...) pour les rendre compatibles avec Vue.js et Drupal. Afin d’en améliorer la qualité et la portabilité future, nous avons également opté pour une solution d'automatisation des tests et avons intégré le framework de tests PHPUnit, ceci afin de s’assurer qualité et précisions à nos calculs.

Grâce à ces outils dynamiques et automatiques, Watchdreamer propose un simulateur d'une fidélité à toute épreuve.

 

Deadline

Afin de réussir son lancement, la plateforme e-commerce Watchdreamer devait être mise en production avant les fêtes de nöel. Un challenge. C'est en 4 mois que nous avons relevé ce défi et réalisé cette plateforme complexe !

Nous avons réussi cela grâce à une réactivité de chaque instant de l'équipe de Watchdreamer. 
Mais également grâce à notre gestion de projet AGILE qui nous a permis de livrer et de valider chaque partie au fur et à mesure et d'ainsi travailler tous les corps de métiers en parallèle.

Cette faculté nous a également permis de mettre en place l'outil l'implémentation de contenu très tôt durant la pahse de développement afin que Watch Dreamer puisse rentrer son contenu et ses 500 produits et plus de façon régulière et ce tout au long du déroulement du projet.

Conclusion

Rien ne sert d'avoir le meilleur outil si personne ne sait qu'il existe.

Pour le lancement du site, l'équipe Watchdreamer, guidée par nos soins, a également investi dans une campagne de presse, une campagne sur le web (Instagram, Facebook & SEA), ainsi qu'une campagne d'affichage. Le travail de tous les intervenants de ce projet a porté ses fruits.

Résultat ? Après quelques mois, le nombre des commandes et le taux de conversion du site ont largement dépassés nos espérances. C'est un véritable succès !

Malgré cela, nous continuons d'analyser le site et de proposer des améliorations. L'optimisation d'un site n'est jamais terminée et la concurrence sur le web reste rude.

Finalement, toute l'équipe a été stimulée par ce projet complexe et riche en enjeux. Partagez-nous vos feedback sur nos réalisations !
 

Antistatique a fourni un travail absolument irréprochable sur le développement du site internet Watchdreamer.com. Ils nous ont permis, de par leur grande expertise, d’élaborer un site de très haut standing dans le domaine de la vente horlogère, qui est sans contestation un marché très compétitif mais surtout qualitatif. Ils ont également su s’adapter mais aussi se réinventer tout au long de la réalisation de notre site afin de le rendre le plus efficace, et user friendly possible. Je me réjouis d’ores et déjà de leur confier mon prochain projet pour lequel ils bénéficieront de ma totale confiance.

Nicolas Hildenbrand Fondateur