Concevoir et implémenter le site marketing de notre entreprise : Mon parcours du contenu à la mise en œuvre

Si vous êtes un utilisateur de Logto, vous avez peut-être remarqué que le site de notre entreprise a été récemment rafraîchi. Si ce n'est pas le cas, consultez notre site, logto.io, et devinez combien de ressources nous avons investies pour que cela se réalise.

Vous pourriez penser, est-ce que vous allez vous auto-promouvoir en disant que cela demande beaucoup de travail, d'efforts, et un design soigné juste pour montrer votre excellence dans l'exécution ?

Non !

Au contraire, nous voulons montrer comment nous utilisons intelligemment des outils et des méthodes pour améliorer la qualité de notre produit et offrir les meilleurs produits et services à nos utilisateurs.

Nous avons reçu des retours positifs de notre communauté et nous nous demandons comment nous avons fait cela. Cette série de mises à jour est différente car nous avons totalement réinventé un nouveau flux de travail dans un environnement en évolution rapide. Nous aimerions présenter nos meilleures pratiques et également jeter un coup d'œil sur notre culture de travail en équipe et de collaboration.

Le contexte#

Nous sommes une équipe technique spécialisée dans une large gamme de services de développement liés à l'identité des clients et de travaux d'infrastructure. La pression pour livrer est significative. En même temps, nous devons soutenir diverses tâches de narration et opérationnelles, telles que la création de sites web de marketing de marque, la rédaction de blogs, la promotion de nos projets, et l'engagement avec nos utilisateurs.

Un site d'atterrissage convaincant est crucial car il forme souvent la première impression que votre public a de votre produit, l'aidant à comprendre les problèmes que votre produit vise à résoudre, y compris les prix et d'éventuels clients notables pour une preuve sociale.

En outre, il peut répondre à plusieurs objectifs commerciaux :

• Mettre en valeur la marque et la proposition de valeur de votre produit.
• Générer des prospects.
• Servir de hub de contenu, particulièrement important pour une entreprise axée sur la croissance dirigée par le produit ou le développeur.
• Fournir un espace pour optimiser le SEO, acquérir des utilisateurs, et suivre le trafic régulier.

Dans mon travail précédent, j'étais impliqué dans un projet de site web. Voyons ce qu'implique un flux de travail typique :

1. Tout d'abord, les responsables marketing produit et les chefs de produit définissent le contenu et les exigences.
2. Les designers de produits et un rédacteur UX affinent le contenu.
3. Nous transférons le travail en cours, généralement une version basse fidélité, aux designers visuels et de marque pour les dernières retouches avant la production.
4. Les ingénieurs et les chefs de produit commencent ensuite la mise en œuvre, en se concentrant sur l'animation et la conception web réactive.

Ce processus est fastidieux et implique de nombreuses personnes et parties prenantes, le rendant inadapté à un environnement évoluant rapidement.

Même si, au départ, nous ne sommes que deux à maintenir cela — un designer produit et un ingénieur — les tâches de gestion des performances web, de téléchargement des images, d'assurance de la conception réactive, de gestion des formats d'image, et de mise à jour du contenu nécessitent encore beaucoup d'allers-retours en termes de communication.

Ce flux de travail est inefficace. Je pense constamment à comment libérer des ressources d'ingénierie pour qu'elles se concentrent sur le travail de base du produit pendant que je gère le reste.

Utiliser des outils pour améliorer la productivité est une philosophie clé de notre équipe. Par conséquent, j'ai commencé à rechercher des outils qui peuvent aider à simplifier ces processus.

Décomposer les besoins#

Pour développer un site marketing SaaS réussi, décomposons les éléments essentiels nécessaires :

1. Contenu : Le fondement de tout site marketing est de savoir exactement quoi afficher. Cela nécessite une compréhension approfondie de vos clients cibles, de leurs cas d'utilisation typiques, et de la proposition de valeur de votre produit. Aucun outil ne peut se substituer à cette compréhension. Heureusement, ma participation à la conception du produit et aux stratégies de mise en marché me permet de créer du contenu répondant aux besoins des utilisateurs.
2. Conception : Le site doit avoir un attrait visuel poli et élégant. Mon expérience en conception UX/produit, bien que moins étendue que celle d'un designer créatif dédié, me permet de gérer cet aspect de manière compétente.
3. Ingénierie : Les considérations techniques clés incluent l'hébergement du site, l'assurance de la conception réactive, et la fluidité des micro-interactions. Il est également crucial d'intégrer le site de manière transparente avec d'autres composants, tels que les redirections de liens et la page d'authentification du produit.

Après avoir mené quelques recherches, voici la trousse d'outils que je prévois d'utiliser pour les aspects de conception :

Contenu de produit et marketing#

ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper, ou des applications d'IA similaires comme copilote.

Cela sert à affiner et optimiser mon contenu marketing et mes messages. Il est important d'être clair sur l'objectif et l'intention de ces derniers. L'IA n'est qu'un copilote, pas un décideur. Avant d'écrire un message marketing, je me pose quelques questions :

1. Qui lira le message ?
2. Ont-ils besoin d'un contexte supplémentaire ?
3. Quel est le point clé que vous voulez aborder dans le message ?
4. Que voulez-vous que l'utilisateur fasse comme prochaine étape ?
5. Ce message est-il destiné à éduquer ou à encourager une action spécifique ?
6. Cela a-t-il le potentiel d'être trompeur ou exagéré ?

Ensuite, j'écris un premier brouillon des points que je veux communiquer.

Parfois, l'IA peut introduire des mots qui semblent démodés ou déformer votre intention originale pour la rendre logiquement correcte. Vous devez cependant réinsister sur votre intention et vous en tenir à vos objectifs. Vous devez établir des normes pour vous assurer que les mots livrés à l'audience sont clairs, simples, concis, et transparents. Cela est particulièrement important dans notre domaine de produit, qui sert de nombreuses entreprises et développeurs.

Conception#

Figma, Framer pour l'interaction et la conception visuelle, ainsi que l'animation et le prototypage

J'ai une expérience en conception, principalement axée sur la conception de produits, qui implique de créer des interfaces utilisateurs (UI) et des expériences utilisateurs (UX). Bien que la conception UI polie ne soit pas un défi pour moi, mon travail n'est pas aussi élégant que celui d'un professionnel. Cependant, avec quelques compétences de base en conception visuelle et illustration, et en choisissant les bons outils, vous pouvez améliorer la qualité de votre travail. J'utilise Framer et Figma dans ce processus créatif.

Ceci est notre ancien design, entièrement créé avec Figma

Notre conception originale a été réalisée dans Figma. J'ai utilisé le plugin officiel de Framer, "Framer to HTML", pour copier et coller le design de base dans Framer, ce qui a donné un bon point de départ.

L'étape suivante est de concevoir. Si vous avez déjà utilisé Figma, la transition vers Framer est un processus fluide puisque l'expérience utilisateur globale est assez similaire. Je vais mettre en évidence quelques interactions intéressantes qui améliorent significativement la productivité.

Mise en page#

Les utilisateurs de Figma apprécient l'auto-layout car cela fait gagner beaucoup de temps dans la mise en page et le positionnement des éléments. Cependant, les fonctions de mise en page de Framer sont encore plus intelligentes, s'alignant davantage sur une mentalité front-end. Dans Framer, vous pouvez choisir si vous souhaitez utiliser une mise en page par grille ou par pile, définir les colonnes, régler une largeur maximale, et cela se réorganisera automatiquement en une autre rangée si nécessaire. Cette fonctionnalité améliore le processus de conception en reflétant la manière dont les éléments se comporteront dans un environnement web en direct。

Points de rupture pour la conception réactive#

En s'appuyant intelligemment sur la configuration des points de rupture et des paramètres de largeur (tels que remplir, fixer, relatif, et ajuster au contenu) et en définissant différents canevas, vous pouvez facilement et précisément réaliser diverses conceptions réactives. Cette approche vous permet de personnaliser la mise en page pour différentes tailles d'écran et appareils de manière efficace.

Animation#

Framer offre une variété d'animations pré-construites, y compris une animation de ticker que nous utilisons largement sur notre site web pour mettre en valeur notre travail. Vous pouvez configurer le composant et l'intégrer dans ce widget. Il vous permet de définir diverses configurations telles que la vitesse, la direction, le padding, et plus encore, vous offrant flexibilité et contrôle sur le comportement de l'animation sur votre site.

Une autre fonctionnalité utile dans Framer est la possibilité de personnaliser les animations de défilement. Par exemple, vous pouvez spécifier comment les éléments apparaissent lorsqu'ils entrent en vue pendant le défilement. Configurer votre animation de défilement vous permet de contrôler le timing et le style de la manière dont les éléments sont affichés, améliorant l'expérience utilisateur et l'engagement avec votre contenu.

Publier rapidement#

L'un de mes principaux besoins est la possibilité de :

1. Concevoir rapidement plusieurs pages d'atterrissage pour l'optimisation SEO et les campagnes marketing. La rapidité est indispensable.
2. Mettre à jour fréquemment le contenu par moi-même. Votre page d'atterrissage produit reflète les dernières évolutions et votre positionnement produit actuel. Un contenu obsolète signifie des opportunités de marché manquées et ne pas répondre aux besoins actuels de vos clients.

Dans mon flux de travail précédent, chaque fois que je devais mettre à jour du contenu, je devais soit demander à un ingénieur de le faire, soit soumettre une pull request moi-même. Notre équipe d'ingénierie suit un processus rigoureux pour assurer la qualité du code, ce qui peut être chronophage et limite ma capacité à effectuer des changements rapides.

Framer a résolu ce problème pour moi. Maintenant, chaque fois que je fais un changement et que je clique sur publier, il est immédiatement reflété en direct en production. Cette capacité a considérablement facilité le processus, permettant des mises à jour rapides et une plus grande autonomie dans la gestion du contenu.

Ingénierie#

Puisque c'est hébergé par Framer, il n'y a pas besoin de mettre en œuvre ou de travailler techniquement de notre côté. Nos ingénieurs n'ont eu besoin que d'environ 10 minutes pour l'intégrer avec le reste de notre site web.

Notre site actuel comprend 20-30 pages ; certaines sont développées en utilisant Framer, tandis que d'autres sont créées par des méthodes de développement logiciel traditionnelles. Nous sommes en train de choisir les meilleurs outils pour maintenir nos pages. Par exemple, pour la documentation développeur, qui est difficile à gérer avec Framer, utiliser un cadre de documentation convivial pour les développeurs pour héberger votre contenu est le choix optimal. À l'avenir, nous évaluerons nos besoins et déciderons si nous continuons à héberger nous-mêmes ou si nous passons complètement à Framer.

Comment cela a changé notre flux de travail#

Nous avons complètement transformé notre flux de travail, rendant la production de sites marketing totalement sans effort. C'est fiable, maintenable, et très efficace.

J'ai écrit ce blog pour partager les meilleures pratiques. Si vous avez des expériences avec Framer et la conception de sites web magnifiques, j'aimerais en entendre parler. Parlons-en et apprenons les uns des autres.

Maintenant, il est temps de découvrir notre produit ! Visitez-nous sur logto.io.