Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Alexandra Mendes

25 février 2024

Min Read

Comment créer un site Web de précommande

L'un des principaux défis liés à la sortie d'un nouveau produit est de créer un site Web de précommande pour commencer à lui donner une certaine visibilité. Si vous lisez ceci, il y a de fortes chances que vous sachiez déjà par où commencer, mais vous ne savez pas vraiment comment vous y prendre.

Si tel est le cas, asseyez-vous et continuez à lire, car cet article abordera les étapes que nous avons suivies et les défis associés à la planification, à la conception et à la mise en œuvre de notre propre site Web de précommande pour le livre Product Design Process.

Comment en sommes-nous arrivés là ?
Avant d'entrer dans la partie technique et de commencer à expliquer comment nous avons lancé notre campagne, voici un peu de contexte.

Nous travaillions d'arrache-pied sur notre premier livre et les commentaires étaient si bons que nous avons décidé de lancer une campagne de précommande. La décision logique a été de manger notre propre nourriture pour chiens et d'appliquer le processus de conception du produit à cet exercice.

Comme cela a déjà été mentionné ici deux fois et que vous serez peut-être curieux, le Livre sur le processus de conception de produits est un manuel pour la conception de produits numériques, basé sur une approche multidisciplinaire qui réunit les propriétaires de produits, les concepteurs, les développeurs et les gestionnaires.

Il met l'accent sur une conception UI/UX exceptionnelle, mais également sur le maintien de l'équilibre entre les coûts et les avantages, en évitant le gaspillage de ressources et en pariant sur un lancement rapide sur le marché.

Pour faire court, c'est le Google Design Sprint sur les stéroïdes.

blue arrow to the left
Imaginary Cloud logo

Planification

La stratégie consiste à faire des choix, à faire des compromis ; il s'agit de choisir délibérément d'être différent.
Michael Porter

Suite à l'engouement que suscitait déjà notre processus de conception de produits, le développement d'un site Web de précommande était la prochaine étape logique. Cela permettrait de :

  • Les premiers utilisateurs pourront obtenir le livre à un prix spécial
  • Créer une communauté autour du produit
  • Recevoir des commentaires dès les premières étapes

Image de marque
Le premier défi que nous avons dû relever concernait l'image de marque. Le livre a sa propre image de marque, mais le contenu est lié à Imaginary Cloud Processus de conception. Nous avons dû évaluer ce qui était logique en termes de marque pour le site de précommande. Doit-il utiliser la marque d'Imaginary Cloud ? Le nouveau site devrait-il utiliser la marque du livre ?

Notre première hypothèse était d'appliquer l'image de marque du livre sur le site de précommande, mais dès le début, il était clair que nous avions besoin de la présence sociale d'Imaginary Cloud pour faire passer le message. La création de comptes sur les réseaux sociaux et d'une newsletter pour le livre à elle seule était trop exigeante et constituait un véritable cauchemar opérationnel pour une si petite équipe.

Après une séance de réflexion, nous avons décidé que suivre l'image de marque du livre était la meilleure option, mais nous avons également dû souligner que les réseaux sociaux et la newsletter auxquels ils étaient abonnés concernaient les créateurs du livre et non le produit lui-même.

Bâtir une communauté
Après l'étape de l'image de marque, mais toujours en phase de planification, l'un de nos principaux objectifs était de créer une communauté autour du livre.
Nos réseaux sociaux sont très actifs et couvrent de nombreux détails sur le travail d'Imaginary Cloud, y compris le livre lui-même. Cependant, le type de public qui nous suit parce que le livre n'est peut-être pas aussi intéressé par les autres activités quotidiennes.

Nous avons dû concentrer notre contenu le plus pertinent du processus de conception de produits sur l'un des canaux disponibles et faire clairement comprendre aux visiteurs du site Web que c'était le bon canal à suivre. C'est dans cette optique que nous avons choisi notre newsletter comme canal préféré.

La raison principale de ce choix était que nous pouvions inciter les utilisateurs à s'abonner à la newsletter via d'autres réseaux sociaux et nous pouvions également les inciter à le faire, quelque chose de pertinent dans le contexte du livre qu'ils apprécieraient.

À cette fin, nous avons conçu un aide-mémoire sur le processus de conception de produits qui n'est disponible qu'en vous inscrivant à notre newsletter.

Gestion des paiements
À ce stade, notre image de marque a été définie et nous avons trouvé les moyens de nous engager auprès de la communauté. Il ne reste plus qu'à planifier la gestion des paiements et le principal défi était la gestion de la TVA, qui a un impact sur le traitement automatique des factures.

Notre idée de les traiter automatiquement sur le site Web a été abandonnée après un examen plus approfondi de la législation de l'UE. Comme le pourcentage de TVA à facturer dépend de l'adresse de l'acheteur, nous avons conclu que la meilleure solution serait de traiter la TVA et d'émettre les factures manuellement.

Bien que le nombre de précommandes soit élevé, nous disposons d'une capacité installée pour gérer la génération manuelle de ces documents. Et une fois le livre en ligne, la plupart des ventes se feront via Amazon, Book Depository et d'autres détaillants en ligne.

blue arrow to the left
Imaginary Cloud logo

Conception

Nous avons terminé la première phase et notre site de précommande est prévu. Quelques problèmes ont été résolus à ce jour. Il est temps de commencer le processus de conception, avec des objectifs clairs :

  • Le site Web devait être aussi simple que possible
  • Le temps de mise en œuvre doit être réduit au minimum

Le squelette
La première étape a consisté à créer les wireframes (guide visuel qui représente la structure squelettique du site Web), créant ainsi une page et une structure uniques offrant la meilleure expérience de navigation sur le site Web.

Nous avons divisé la page en trois sections : une brève description du livre en haut, suivie d'un formulaire de précommande et enfin du formulaire d'inscription à la newsletter. Les informations les plus pertinentes, à savoir le livre et la réduction de précommande, sont mises en évidence pour attirer l'attention de l'utilisateur sur le sujet principal.

Problèmes de marque (rechargé)
À ce stade, nous n'en avions pas encore terminé avec l'image de marque, qui apparaît ici comme un défi de notre projet pour la deuxième fois.

Alors que nous utilisions l'image de marque du livre, le matériel visuel avait déjà une bonne base de référence. Le plus grand défi visuel a été d'utiliser la marque d'Imaginary Cloud dans la section newsletter sans remplacer l'image de marque du site de précommande.

Pour résoudre ce problème, nous avons intégré de manière fluide les détails de l'image de marque d'Imaginary Cloud à la page Web. La solution semble simple : une grille en arrière-plan de la section newsletter, qui est également l'arrière-plan utilisé sur la page d'Imaginary Cloud.

Et comme le diable se cache dans les détails, nous avons conçu une animation pour vous informer de la fin de l'abonnement à la newsletter :

Newsletter Animation
blue arrow to the left
Imaginary Cloud logo

Mise en œuvre

Nous avons planifié et conçu notre site Web de précommande et il n'en était qu'à une étape de son achèvement. Il ne restait plus qu'à mettre en œuvre.

Au cours de cette phase finale, nous avons dû identifier les exigences non fonctionnelles et vérifier s'il manquait autre chose dans les matériaux de conception (un tableau de bord de précommande, par exemple). Pour un site de précommande complet, les fonctionnalités suivantes étaient essentielles :

  • Passerelle de paiement - pour traiter les paiements
  • Passerelle de courrier électronique - pour nous informer lorsque les commandes sont passées
  • Système de gestion de newsletter - intuitif
  • Back-office - avec les détails de la commande

Faire des recherches et prendre des mesures
Avant de passer à l'étape suivante, nous devions faire nos devoirs et faire des recherches sur les solutions de commerce électronique existantes qui fournissent toutes les fonctionnalités nécessaires. Ces plateformes fonctionnent généralement selon un modèle SaaS et facturent une somme modique pour chaque article vendu, ce qui n'était pas notre scénario idéal.

Il n'a pas fallu longtemps pour nous rendre compte que les coûts liés à l'utilisation de ce type de plateformes ne compensaient pas un si petit site Web. Nous l'avons donc construit dans Ruby on Rails, car nous connaissons assez bien le framework et il offre un ensemble d'outils robuste pour développer des applications Web.

Réaliser la transaction
Pour la passerelle de paiement, nous sommes allés Rayure car il a un faible impact sur chaque vente et dispose d'une API bien documentée. Il dispose également d'un widget qui couvre toutes les validations nécessaires et les données ne transitent pas par nos serveurs.
De cette façon, nous ne traitons pas les cartes de crédit, ce qui rend notre site Web sécurisé et PCI conforme en même temps. Nous étions à la recherche de la solution idéale à notre problème.

Pour les e-mails transactionnels, nous avons choisi Envoyer Grid, un fournisseur fiable et facile à configurer que nous avions déjà utilisé par le passé. Nous en avions besoin pour informer notre équipe lorsqu'une vente était réalisée et le niveau gratuit de Sendgrid était suffisant pour ce site Web.

Abonnement à la newsletter
Mailchimp était notre outil de référence pour la gestion des newsletters. Ce système était déjà utilisé pour la newsletter d'Imaginary Cloud et la décision était simple. Le prix est bon et il propose une grande variété de fonctionnalités faciles à configurer.

Back-office
En ce qui concerne le back-office, nous avons décidé de créer le nôtre, en utilisant une bibliothèque open source appelée administrateur des rails. De cette façon, nous sommes en mesure de voir les détails de chaque commande et d'exporter les données au format Excel, ce qui facilite l'expédition du livre.

Et comme nous avons un contrôle total sur la base de code, nous informons l'équipe via Slack chaque fois qu'une précommande est effectuée. Ce n'était pas une exigence, mais c'est cool et il n'a pas fallu beaucoup de temps pour y parvenir.

blue arrow to the left
Imaginary Cloud logo

Conclusion

Un site de précommande est un excellent moyen de commencer à promouvoir un produit, en permettant à la communauté d'en prendre connaissance et de bénéficier d'une offre spéciale avant son lancement. Comme nous l'avons vu, le processus lui-même (planification, conception et développement) présente certaines particularités, mais il n'est pas difficile à réaliser.

Les objectifs que nous avions définis pour cette phase ont été atteints avec succès et nous adorons le résultat final. Il semble également que nous ne soyons pas seuls, car les précommandes sont nombreuses et les gens semblent très désireux de profiter de la réduction.

N'hésitez pas à regarder le résultat final et à nous dire ce que vous en pensez : https://www.productdesignprocess.com

À Imaginary Cloud notre objectif est de réaliser de grands projets numériques grâce au travail fantastique de nos équipes de développement de logiciels et de conception UI/UX. Si vous pensez avoir besoin d'aide dans votre projet numérique, écrivez-nous ici!

Ready for a UX Audit? Book a free call

Vous avez trouvé cet article utile ? Ceux-ci vous plairont peut-être aussi !

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Alexandra Mendes
Alexandra Mendes

Rédacteur de contenu curieux de l'impact de la technologie sur la société. Toujours entouré de livres et de musique.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon