Menu

Outils, Design

[COS Hubspot] Créer une nouvelle page dans un process GDD

Loïc BURDET le 08 février 2017
Loïc BURDET
2min

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

1- 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 ;

2- 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.

3- 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

4- 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.

Lecture sans distraction

Découvrez le Growth-Driven Design

(eBook gratuit)

Industrialiser ses processus est devenu une étape incontournable de l'amélioration des performances de l'entreprise.

 

Le Growth-Driven Design propose une méthodologie basée sur l'amélioration continue qui permet de mettre l'expérience utilisateur au coeur du projet.

 

Alors pour créer ou refondre un site de manière régulière, agile et performante, optez pour le GDD.

Oui, je veux le guide !

COMMENTAIRES

Rejoignez la communauté Ideagency

Découvrez chaque semaine de nouveaux articles sur l'industrie spécialisée (robotique, aéronautique, automobile, bâtiment)