La meilleure expérience utilisateur possible…

…associé au plus grand nombre de produits disponibles

Plateforme e-commerce ultra rapide avec React.js et Next.js

C’est l’histoire d’un grossite japonais 🇯🇵
qui achète à un fabricant danois 🇩🇰
sur un site français 🇫🇷
écris en anglais 🇬🇧. Fabriks

Pain point : Il n’existe pas de moyen simple de contacter n’importe quel fabricant pour lui acheter ses produits.

Aujourd’hui, pour rentrer en contact avec un fabricant, il faut se déplacer dans un salon physique ou à une foire commerciale. Problème : ça coûte cher, n’a lieu qu’une fois par an et demande du temps.

Face à ce constat, Karl et Alexis ont lancé Fabriks.net : une plateforme qui liste les produits des fabricants et qui permet de les contacter directement.

La manière la plus simple possible de contacter un fabricant sans intermédiaire

Taille de police de base

Dans cette étude de cas, je vais vous partager comment ils ont eu l’idée de la création de cette plateforme, où nous avons trouvé l’inspiration, comment nous avons tout développé, comment est-ce utilisé chez leurs clients comme outil interne et comment seront financés les futures fonctionnalités.

Voici une présentation de l’article :

  1. Structure de base et fonctionnalités
  2. Création du design
  3. Developpé à partir de projets open source
  4. Lancement
  5. Business model du produit
  6. Backlog des dévelopements futurs

Bien sur, ce ne sera plus un secret car je vais partager notre méthode avec vous. 🙈

Structure de base et fonctionnalités

Si vous mettez de côté les sites en flash — dans 80% des cas — les sites internets des fabricants ne sont pas trop à la pointe en matière de technologies web moderne.

Ce sont souvent des sites basiques Prestashop, Magento ou Wordpress sans aucune stratédie de contenu, ni hiérachie dans le catalogue. À cela, on a rajouté tout les plugins de partage sur les réseaux sociaux et les 1001 fonctionnalités inutiles pour avoir un site super lent.

L’équipe de Fabriks a décidé de résoudre ces problèmes. Voici nos contraintes :

  • Hiérarchiser l’information
  • Créer le meilleur design responsive pour une interface de recherche
  • Simplifier l’expérience utilisateur au maximum malgré un grand nombre de datas
  • Environnement JavaScript moderne, modulable et évolutif

Fabriks Find quality products from global manufacturers and suppliers

Après plusieurs itérations sur différentes technologies fabriks.net est en ligne et nous sommes fiers du résultat.

  • Une interface soignée
  • Une plateforme rapide (Il ne faut pas oublier les fabricants du Népal en 56k)
  • Plus de 1000 produits indexés chaque jour

Les fonctionnalités spécifiques sont :

  • Notifications de nouveaux catalogues
  • Newsletter pour les professionnels
  • Un call-to-action simplissime sur chaque produit

Aujourd’hui le focus est mis sur l’univers du meuble au sens large (Immobilier, décoration, outdoor, professionnel, hôtels, restaurants, entreprises, hôpitaux). Il y déjà beaucoup de travail à faire là-dessus.

Création du design

Ne réinventez pas la roue, regardez autour des entreprises qui créent de bons produits pour obtenir de l’inspiration (comme Heroku, Slack, Mailchimp, Stripe). Regardez aussi vos concurrents. Vous obtiendrez énormement d’informations.

Si j’avais 6 heures pour couper un arbre,
je passerai les 4 premières heures à aiguiser ma hache. Abraham Lincoln

Quand vous commencerez l’étape du design, cela sera plus facile de développer votre produit car vous aurez fait vos devoirs. Vous devez aiguiser votre hache avant de vous lancer.

e-commerce Product page list A list of curated store pages

Vous avez maintenant une bonne liste d’inspiration, avec beaucoup de couleurs, d’animations, des icônes magnifiques, une mise en page avec une sidebar fixe ou non et encore des centaines d’autres fonctionnalités.

Comment savoir quelles sont les meilleures pour votre audience ?

Comme nous ne savions pas ce que les gens voulaient, nous avons décidé d’écrire toutes les fonctionnalités contenues dans ces sites et d’utiliser uniquement les plus répandues.

Sketch ecommerce template

Nous avons réalisé que les fonctionnalités principales résolvent environ 95% des cas. Les 5% restants résolvent des problèmes très spécifiques.

Les éléments de bases sont :

  • colors
  • buttons
  • icons
  • typography
  • sidebar
  • callout
  • navbars
  • dropdowns

À partir de ces éléments, j’ai créé un styleguide — grâce à mon template middleman — qui permet de générer des sites statiques vitesse lumière.

Styleguide gif previw

https://fabriks.github.io/styleguide/

Développé à partir de projets open source

Middleman pour le design

Je suis développeur front-end. Ce qui signifie que mon monde se limite à HTML, CSS et JavaScript. Dans la vraie vie c’est plus compliqué que cela et je mets quiconque au défi de coder 80% d’une interface de site web en 2 jours.

En utilisant le générateur de site statique middleman cela devient beaucoup plus facile et rapide. Vous trouverez ici la source des feuilles de style.

Découverte de Next.js — la combinaison réussie entre SSR et SPA

Sur un projet tel que fabriks.net, le server-side-rendering (SSR) n’est pas une option à cause du référencement sur Google. Les pages qui sont traditionnellement générées par le navigateur de l’utilisateur sont compilées par le serveur et envoyés par la suite au client.

Next.js est un framework basé sur React.js et qui permet de faire simplement du server-side-rendering. Contrairement à React.js — qui est une librairie — Next.js est un framework complet. De base, il y a des règles, il faut les suivre car il est difficile de changer ensuite.

Par exemple, les pages sont dans un dossier /pages, les styles dans /styles, etc… Le gain est la simplicité du build et de la config. Fini les prises de tête pour configurer Webpack version X avec Babel version Y, la compilation des assets, et la plomberie en général.

La principale complexité vient de la gestion du routeur, ou devrais-je dire, des routeurs.

Il y a un routeur côté serveur qui route / vers la page index.js, /products vers la page products.js etc…

On a aussi un routeur côté client qui charge les composants de la page suivante. C’est dans le lien entre ces deux routeurs que réside le bénéfice de Next.js :

  1. Bénéfice du server-side-rendering : Première page chargée rapidement, crawlabilité par Google
  2. Bénéfice de la Single Page Application : transition fluide car on ne charge que des morceaux d’interface (absence de blink à la PHP)

Ce lien se manifeste au travers de la méthode getInitialProps() qui s’éxécute au moment du routage.

Pour en savoir plus je vous conseille le site learnnextjs.com

Les feuilles de style

Le choix de Foundation s’est imposé car ce framework possède une meilleure sémantique et évolutivité que Bootstrap. Le build basé sur Sass avec des variables globales pour les couleurs, la typographie et le look’n’fell général.

Un problème rencontré : les styles globaux ne s’accordent pas bien avec la philosophie “component” de React.js. Karl a donc passé une demi-journée pour faire un peu de plomberie pour que le build fonctionne. Lors de cette étape nous avons abandonné notre styleguide construit en ruby pour passer avec du 100% JavaScript en JSX pour les vues.

Foundation est toujours utile pour construire l’application shell. Je n’ai inclus que 30% du framework avec des composants comme la grille, la typographie, et les différents call to action.

Nous utilisons aussi des styled-components qui permettent d’inclure facilement du style dans chaque composant.

Ce n’est évidemment pas si simple que cela. Nous utilisons beaucoup d’autres services comme Redis, RabbitMQ, Elasticsearch, yarn… Vous trouverez la liste complète des technologies utilisées par fabriks sur stackshare.

Lancement

Scoop : Il n’y aura pas de lancement. La plateforme est en ligne depuis Juillet.

Nous itérons sur le produit depuis le début d’année. Grâce à une excellente stratégie de déploiement continu nous pouvons mettre en production la plateforme des dizaines de fois par jour.

L’infra principale est chez hebergée sur stackhero.io et nous avons quelques parties sur clever-cloud.com et AWS.

Aujourd’hui l’accent est mis pour faire connaître cette plateforme e-commerce de fabricants

Le business model

Le business model de la plateforme est un freemium basé sur le nombre de demandes client.

Il n’est pas nécessaire de payer avant d’avoir la garantie d’un certain retour sur investissement. La friction est réduite au minimum et il devient faciler de passer rapidement à l’action.

Backlog des développements futurs

  1. Dynamiser la homepage. Mettre en avant les derniers produits ajoutés, naviguer par catégorie, par pays, etc
  2. Un autocomplete dans la barre de recherche
  3. Multiplier par 10 nombre de produits pour atteindre 1 000 000 de références
  4. Définir des alertes (Pour le nurturing des utilisateurs)
  5. S’abonner à un fabricant (Recevoir ses nouveaux produits en exclusivité)
  6. Un chat afin de négocier plus facilement et en direct avec le fabricant

Les utilisateurs apprécient le plus la fonctionnalté de contact direct avec le fabricant (simple et efficace) ainsi que le “similar products”.

La barre de recherche est par contre assez peu utilisée. Ceci nous donne des billes pour prioriser les futures développements 😉

Si vous vouhaitez rencontrer la team de Fabriks.net c'est à Euratechnologie que ça se passe ou sur le slack de weblille pour un accès avec le designer depuis Londres.

Plateforme e-commerce ultra rapide avec React.js et Next.js