Nouveau template Amsterdam: "Le Making of"

Template Amsterdam: Prendre le temps de bien faire les choses Depuis 2017, nous n’avions pas ajouté de nouveaux templates à la solution de panierdachat. Ça pressait d’en ajouter un! Voici […]

Template Amsterdam: Prendre le temps de bien faire les choses

Depuis 2017, nous n’avions pas ajouté de nouveaux templates à la solution de panierdachat. Ça pressait d’en ajouter un! Voici donc le nouveau template né – Amsterdam – dont nous avons accouché ce printemps! Nous sommes très fiers du résultat.  Il est le fruit d’une longue réflexion et d’une longue refonte du code source de l’application web pour arriver à ce résultat.

En effet, certains templates de panierdachat.com datent de près de 10 ans maintenant! Le web va tellement vite, qu’il n’est pas rare de voir certaines boutiques en ligne commencer à prendre de l’âge au niveau du look.

La refonte d’un nouveau template e-commerce nous a demandé beaucoup d’efforts. Premièrement, la manière dont nous devions programmer les templates auparavant prenait énormément de temps. En effet, la lourdeur du code source en arrière demandait des semaines de préparation. D’autant plus que nous nous sentions contraints des limites du système actuel. Deuxièmement, pour y arriver, nous devions en même temps reprogrammer une partie de l’application web pour pouvoir fournir un gabarit design, mais aussi très performant.

Ce qu’un marchand recherche avant tout, c’est une structure visuelle qui lui permet d’être pris au sérieux et d’avoir l’air « plus grand que nature » aux yeux de leurs propres clients.

Ce processus a été long, près de 2 ans, à travers les autres développements, et nous y sommes finalement arrivés.

Les outils utilisés

Le prototypage

Le design d’un nouveau template de boutique en ligne chez panierdachat.com n’est pas une chose facile. Contrairement à un design sur mesure où les besoins sont très spécifiques, la variété des commerces et des domaines dans lesquels nos clients font des affaires demeure très large. Nous nous devions donc de trouver des compromis, afin de ne pas être trop spécifique, mais en même temps, pouvoir livrer un design actuel et pouvant être utilisé par de nombreux marchands en ligne.

Les outils de prototypage tel que Adobe XD, Sketch ou Figma sont arrivés il y a quelques années dans le domaine du design. Depuis quelques mois, nous utilisions déjà la version beta d’Adobe XD pour le prototypage des boutiques en ligne sur mesure à l’interne. Cet outil permet de rapidement d’arriver à une « maquette type » et ensuite pouvoir en discuter avec l’équipe.

 

Un template design, épuré au maximum

Pour le nouveau template de boutique en ligne, nous voulions arriver à un design très épuré. En même temps, y apporter un petit côté organique et peut-être un peu désordonné. (Comme la page affichant une liste de produit). Cependant, nous savions que certains marchands préféreraient une approche plus traditionnelle. Nous avons donc décidé, en discutant avec notre équipe de programmeurs, d’ajouter une page contenant les « options du template ». Cette page servirait dorénavant à personnaliser les templates e-commerce, tout en permettant des options de design différent pour un même template. Enfin, quelque chose pour que nos marchands e-commerce puissent utiliser un template en ayant un look différent de leurs compétiteurs … Vous comprenez ? 😉

Un template design et (surtout) adapté au mobile

Une attention particulière a été apporté à la présentation sur appareil mobile. Par exemple, de ce qu’on constate dans les statistiques de fréquentation, c’est que les visiteurs des boutiques en ligne de nos marchands sont de plus en plus sur mobile (voire la majorité des visites pour certains marchands!). Des maquettes précises et spécifiques ont donc été conçues pour améliorer l’expérience utilisateur (le UX – User Experience, terme communément utilisé dans le web).  Ainsi, cela favorise les ventes de nos marchands ayant un fort pourcentage de visites provenant d’une navigation sur mobile.

Banques photos pour la boutique en ligne

Pour bâtir une maquette visuelle complète et compréhensible pour la direction (qui doit toujours tout approuver!), les banques de photos sont des outils facile d’accès et peu dispendieux. Notre choix s’est arrêté sur bigstockphoto.com et istockphoto.com. Les deux font la paire comme on dit!

Le prototype

Finaliser le prototype fut tout de même assez rapide. Puisque nous avions l’approbation de la direction et des programmeurs, nous avons complété le tout avec les images de banques photos pour ensuite présenter le prototype final.

Évidement, il y a eu quelques petits détails ne pouvant être réalisés. Par exemple, certains textes qui, une fois programmés, ne peuvent être édités et traduits dans le template par le client. Nous devons faire très attention à la manière dont nous nommons les éléments graphiques et textuels. Ainsi apporter une attention particulière à ce que le template, une fois programmé, puisse être utilisé par des dizaines, voire des centaines, de marchands.

Les nouvelles fonctionnalités du template Amsterdam

Tout d’abord, nous en voulions plus. Nous voulions faire mieux et surtout mieux que la compétition! Puisque Panierdachat est la seule solution de commerce électronique 100% fait au Québec, nous nous devions de pousser la machine et se surpasser dans l’objectif des résultats.

L’abonnement à l’infolettre

Certains éléments tel que le « pop-up » en page d’accueil pour la newsletter, se devait d’être amélioré. Le design est peut-être plus restrictif dans l’utilisation (il nécessite une image idéalement carrée), mais au final, le look est beaucoup plus épuré et l’effet est « WoW »!

L’aperçu rapide d’une fiche produit

Élément nouveau (Yé!) sur le gabarit Amsterdam : « l’aperçu rapide ». Cet aperçu permet au visiteur de voir rapidement les détails important affiché dans une fiche produit et ce, directement dans la page d’une catégorie et sans avoir à changer de page. Les informations sont claires, précises et permettent de voir l’image pleine grandeur, de sélectionner une option et d’ajouter l’item au panier, tout en restant sur la même page.

La fonction de recherche

Un redesign était dû de cette partie importante d’une boutique en ligne. En effet, la recherche est maintenant mise de l’avant avec des résultats triés et pertinents.

L’affichage des catégories en page d’accueil

Aussi en nouveauté, il est dorénavant possible d’ajouter des catégories aussi épurées en page d’accueil. Suffit d’utiliser les champs d’édition de « description courte » sous chaque fiche éditable d’une catégorie. Ces dernières s’afficheront en mosaïque sur la page d’accueil de la boutique en ligne.

La page Contact

L’emphase sur le formulaire de contact en haut de la page épure justement cette page contenant beaucoup d’informations. Le client peut donc avec grande facilité contacter le marchand. Il peut aussi facilement trouver ses coordonnées textuelles ou utiliser la carte géographique Google un peu plus bas dans la page web.

Le livrable et les performances

C’est bien beau designer et programmer un nouveau gabarit, mais qu’en est-il des performances? Ou « les perfs » comme l’appelle notre programmeur Charles ?

Avec l’ajout de ce nouveau gabarit, nous avons revu de fond en comble l’utilisation des ressources de l’infrastructure et du code de panierdachat. C’est-à-dire le code qui roule derrière à chaque fois qu’un internaute visite votre boutique en ligne. Auparavant, il n’était pas rare de voir un nombre de requête aux bases de données des dizaines fois plus élevés par un manque d’optimisation du code. Alors que maintenant, nous avons réussi, avec la refonte de plusieurs modules, de diminuer jusqu’à 100 fois le nombre de requêtes sur certaines pages de l’application. Moins de requêtes aux bases de données est un signe d’une meilleure optimisation des ressources. 😉

Quant aux performances globales, nous utilisons maintenant à pleine capacité les systèmes de cache tel que Redis (système de cache pour les bases de données). Sans oublier un CDN (Content Delivery Network) pour les ressources statiques comme les images . Cela assure d’être en mesure de gérer pratiquement n’importe quelle charge de trafic (ou les ventes-éclair de nos marchands).

Le futur des templates de Panierdachat

Grâce à la refonte en profondeur de l’application Panierdachat, nous allons maintenant pouvoir améliorer et ajouter plusieurs autres nouveaux templates. Nous en avons déjà en préparation pour une mise en ligne prochaine d’ailleurs.

Ces derniers seront aussi bien optimisés (pour le SEO) que Amsterdam. Un effort soutenu au design des boutiques en ligne permettra à nos marchands d’améliorer le rendement et leurs ventes en ligne. Du moins, c’est notre souhait!

Et vous, que pensez-vous du template Amsterdam?

Vous aimerez aussi
Comment se démarquer comme entreprise web ?
10 trucs pour vendre en ligne - 1ère partie