Ideagency

On continue dans la série des articles dédiés au COS Hubspot et au Growth-Driven Design, avec un sujet autour de la création de page. Pour illustrer cet article, je vais m'appuyer sur notre propre refonte de site avec la création du template de page "Article de blog".

Pour mettre en place le projet de refonte de notre site internet, nous l'avons inscrit dans un process Growth-Driven Design (GDD). Lors des premières étapes du GDD, il faut définir les objectifs, les buyer personas (les cibles marketing) et les scénarios de votre stratégie.

Ensuite vient l'élaboration d'une liste d'envie qui contient notamment les pages et les fonctionnalités désirées. Priorisez cette liste suivant l'importance et commencez à travailler page par page. Voici donc la méthode que nous avons appliquée pour créer notre page type "Article de blog", type de page que vous consultez actuellement.

IDEA'LIRE : Les 6 activités de l'étape "STRATEGIE" du Growth-Driven Design

Définir l'objectif de votre page

Première question avant toute chose : quel est l'objectif de cette page ? Est-ce un template pour une page de site, pour une landing page, pour une page de blog ? Cette question est cruciale car elle va conditionner les éléments qui vont la composer. C'est sûr et c'est de nouveau vérifié, l'inbound marketing vous parle d'objectifs et de cibles.

Dans notre exemple, nous sommes en présence d'une page "article de blog" avec les spécificités liées à ce type (date, auteur, commentaires). Nous avons défini trois objectifs principaux pour ce type de page :

  1. Eduquer l'internaute ;
  2. Le rassurer et lui inspirer confiance ;
  3. Proposer une expérience-utliisateur novatrice ;

Choisir les fonctionnalités pour optimiser l'expérience utilisateur

L'internaute étant au coeur des préoccupations actuelles lors de la création ou refonte d'un site (UX Design, Inbound Marketing, GDD), il est important d'offrir à ce dernier une expérience unique. Pour ce faire, nous avons voulu combiner le plaisir de lecture avec des fonctionnalités pratiques. En effet, lors de l'élaboration de notre wishlist ou liste d'envies (étape 5 du processus GDD), plusieurs facteurs importants sont en effet ressortis pour la création de nos pages blog :

  • Avoir des articles de blog épurés pour aller à l'essentiel et permettre à l'internaute une lecture optimale ;
  • Pouvoir partager facilement un article ;
  • Avoir un "menu Hamburger" ;
  • Mettre en avant les éléments clés (titres, citation, texte) ;
  • Respecter les dernières tendances en terme d'ergonomie ;
  • Identifier rapidement les différentes actions possibles ;

A cette étape, nous savons qu'un template "Indus Blog Post" sera créé, qu'il contiendra une liste de fonctionnalités et un design définis. Passons à la partie visible de l'icebert : l'étape DESIGN.

Dessiner le Zoning & Maquette

Une fois l'objectif de la page fixé et les fonctionnalités validées, vous voici à la troisième étape de votre projet : le design. Nous vous conseillons de commencer par le zoning - ou wireframe - qui est un schéma globlal présentant les différents blocs qui composent la page. Voici le wireframe de notre page "Article".

mockup-ideagency-article-blog.jpg

Ensuite, après avoir validé que le zoning répond à la problématique, aux objectifs et comporte les fonctionnalités, il est possible de dessiner les maquettes graphiques qui seront une représentation graphique du rendu final. Voici la maquette de notre page "Article".

maquette-ideagency-article-blog.jpg

Créer le template sur le COS Hubspot

Une fois la maquette réalisée, il faut prendre son costume d'intégrateur et s'amuser avec le Design Manager. Lorsque j'intègre une maquette graphique ou HTML, je m'attache d'abord à distinguer ce qui est fonctionnel, graphique ou animation. Comme j'ai deux structures différentes pour les articles et les listes de blog, j'aurais besoin d'utiliser deux templates différents.

Voici les étapes de création de mon template "Article Blog" :

  • Création du template sur le Designer ;
  • Création et réutilisation des "Global Group" ;
  • Création d'un fichier blog.css pour gérer les styles ;
  • Création d'un fichier blog.js pour gérer le javascript ;

IDEA'STUCE : Pour optimiser le code HTML de mes pages, j'aime bien travailler avec des "Custom Modules" qui me permettent de choisir ma structure, mes champs...

Et voilà, le tour est joué ! C'est fini ! En fait, non et c'est bien là la philosophie du Growth-Driven Design, notre page d'article bouge régulièrement, car nous essayons sans cesse d'améliorer cette dernière afin d'apporter toujours plus dans l'expérience utilisateur que nous proposons.

guide introduction growth driven design (gdd)

AUTEUR
Loïc BURDET
Loïc BURDET Directeur technique Ideagency
Voir les articles du même auteur

Parlons de vous

15 min pour parler de votre projet , de vos objectifs et problématiques et vous donner ma vision. Simple et humain!
Contactez-nous