Stratégie produit & fonctionnalité - Conception du module actualité 24h pour HaloDestiny

Juan
10 min readJun 30, 2016

--

S’il est bien une chose que j’aime, c’est quand on doit refondre un produit. Ou bien porter un existant sur une nouvelle plateforme. Bref, quand on reprend le chantier à zéro avec quelques contraintes et les enseignements que nous apporte l’expérience connu sur ce même produit.

Oui, on doit souvent faire face à un cadre bien spécifique dans ce genre de cas, qu’il s’agisse de ressources limitées, en matière de temps ou de développement, ou bien de retrouver un chemin que nous semblions avoir perdu lorsque notre produit succomba au “features world” au fil de son existence. C’était un peu notre cas quand chez HaloDestiny, nous avons entamé la conception d’une nouvelle version de notre plateforme afin d’offrir une expérience plus adaptée et agréable à nos utilisateurs (et aussi adopter des technologies répondant à nos besoins, mais c’est un autre sujet).

(Re)connaître son activité

Trop souvent, on ne sait pas vraiment par où commencer on se perd dans les méandres de l’existant. Notre produit dispose de bon nombres de fonctionnalités qui pourraient nous sembler essentielles, mais nous ne pouvons pas tout porter dans l’immédiat. Et dans le fond, est-ce vraiment nécessaire ? C’est dans ces moments là qu’il vaut mieux prendre le temps de regarder en matière, voir ce qui fonctionne ou non, (re)définir notre vision pour être sûr de la destination où nous souhaitons nous rendre afin de concevoir une stratégie produit pertinente.

À mon sens, quand on attaque une telle refonte, on ne parle pas de MVP (minimun viable product), on connaît déjà les besoins auxquels notre service et produit répond, mais on se questionne concernant son coeur de métier afin de recentrer son activité. Parfois, surtout de nos jours, il vaut mieux proposer moins mais de meilleure qualité.

Pour information, HaloDestiny est un site d’actualité autour des univers Halo et Destiny, développés respectivement par 343 Industries et Bungie. Ce dernier existe depuis plus de 10 années à présent et il s’agit du projet qui m’aura le plus appris à ce jour. Et depuis tous ce temps, le projet s’est doté de nombreuses fonctionnalités adjacentes au monde de l’actualité, à savoir des groupes de discussions, une web TV, un explorateur de fichiers et j’en passe. Mais lorsque nous avons attaqué D7, nom de code de notre nouvelle version, avec Alexis Bize et Mathieu Amiot, il était important d’étudier ce qui semblait essentiel à notre service. Quoi de mieux que quelques données sur l’activité actuelle afin de s’y retrouver ?

Pages HaloDestiny.net les plus consultées sur une année

En premier lieu, l’actualité, puis, les ressources communautaires.

Dans un but de générer de l’activité et l’engagement de nos utilisateurs, et à l’échelle qui est la notre, à savoir un site bénévole, nous souhaitions créer un cercle vertueux permettant d’offrir à l’utilisateur le contenu rédactionnel le plus adapté qui soit à sa demande mais aussi les meilleurs outils pour s’accomplir au sein de la communauté et échanger avec d’autres membres.

Créer de l’activité et de l’engagement, tel est le défi que rencontre de nombreuses équipes afin de rendre un produit périn, voir autonome. Dans notre cas, pour répondre à celui-ci, le modèle “Hook” semblait le plus adapté, reposant sur les principes Trigger, Action, Reward, Invest.

Si vous n’avez pas entendu parler de ce modèle, je vous invite le découvrir rapidement grâce à cette petit vidéo: Hooked — How to build habit-forming products

De nombreux produits reposent sur ce même modèle afin de créer un sentiment d’addiction chez ses utilisateurs et les entraîner dans un boucle d’engagement. Cela peut se manifester de différentes façons, chez certains, il s’agira d’un système Hook à base de compteurs et barres de progression, comme c’est le cas pour le jeu vidéo “Destiny” : étude de cas par Digital Telepathy (que je vous recommande de lire !).

Notre vision était de créer un pont entre le virtuel et le réel, permettant de soutenir nos usagers en matière d’actualité tout en leur offrant de rencontrer d’autres joueurs sur ces deux univers.

En plus de l’actualité, les groupes de discussion représentaient un part fort pour l’activité de HaloDestiny, activité que nous souhaitions déporter sur une fonctionnalité plus globale et permettant de répondre à notre vision : un système de rendez-vous où les utilisateurs pourraient décider de se rejoindre sur un jeu précis et inviter d’autres membres, les Waypoints.

Appliquer le système Hook à HaloDestiny

Pour le coup, “Hook” est très souvent utilisé de manière artificielle par des indicateurs visuels. Or, je préférais baser notre principe d’engagement sur un système émotionnel et naturel afin de reposer sur un design plus proche de nos utilisateurs. Au sein de HaloDestiny, le principe “Hook” se serait ainsi traduit de cette façon :

Trigger = Articles & actualité
Action = Création de Waypoint
Reward = Rencontre d’autres utilisateurs lors de ces rendez-vous

Pour que tout le système d’investissement fonctionne, l’actualité était donc la partie de notre service à chouchouter, dans un 1er temps, en offrant à nos lecteurs la meilleure expérience possible.

Et à ce sujet, le constat réalisé après plusieurs années de publication d’article fût que nos lecteurs, de par la mise en page du site présentant les articles sous forme de liste, avaient souvent du mal à discerner si oui ou non de nouveaux articles venaient d’être publiés dans la journée :

HaloDestiny.net, design visuel par Alexis Bize

On a souvent entendu dire que la page d’accueil d’un site était morte de nos jours et serait vouée à disparaître au profit de redirection depuis les réseaux sociaux. Dans un sens, c’est loin d’être faux, mais dans notre cas (et c’est une question à se poser quant à son propre produit), la page d’accueil de HaloDestiny représentait encore une immense portion de nos visites et de l’activité générée par les articles publiés. Il était donc primordial de la comprendre et d’y apporter un grand soin.

Nous nous sommes demandés comment résoudre le problème rencontré par nos lecteurs et quelle pouvait être la meilleure méthode pour les informer de la présence de nouveaux contenus. Nous avons alors opté pour différentes approches misent à l’épreuve lors du développement de D7.

Notification personnelle d’un nouvel article

Lors de la conception globale de D7, nous nous étions lancé dans la réalisation d’un système de notifications personnelles pour l’utilisateur reliées à différents modules du site. La première solution qui nous vînt en tête fût d’y connecter les articles afin de prévenir l’utilisateur qu’un nouveau contenu venait d’être publié par l’équipe de rédaction.

Wireframe du système de notification
Design final du système de notification

Problème: À première vue, nous étions satisfaits de cette solution, mais nous nous sommes vite rendus compte que si cela pouvait aider nos membres, le système de notification n’était pas accessible aux utilisateurs non-enregistrés sur le site, il ne pouvait donc servir à toutes et à tous.

S’ajoutant à cela qu’en cas de nombreuses publications d’articles, nous ne craignions de polluer le fil de notification de nos membres, et cela à de trop nombreuses occasions. Nous avons étudié d’autres solutions.

Compteur de nouveaux articles

Simple mais fonctionnel, déjà éprouvé, et surtout accessible à toutes et à tous, nous avons rapidement planché sur la mise en place d’un compteur d’article affichant le nombres de contenus rédactionnels publiés lors des dernières 24h (plage temporel que nous avons estimé selon les visites de nos membres et lecteurs, revenant sur le site en moyenne toutes les 4h selon Google Analytics et les options de visiteurs uniques).

Problème: Bien que cela permettait de répondre au problème évoque, nous ne pouvions nous empêcher de juger que cet indicateur n’était pas assez marquant et présent pour permettre aux lecteurs de le notifier rapidement et ainsi comprendre quels étaient les nouveaux articles publiés.

Suite à ces deux essais, nous étions en mesure de mieux cerner le module qui était nécessaire pour répondre à nos besoins et problématiques. Il nous fallait un système permettant à la fois de notifier le nombre d’articles publiés sur une plage temporelle de 24h, accessible à tous nos lecteurs et identifiable au premier coup d’oeil sans même avoir à lire un seul texte.

Création d’une mise en page dynamique

Afin de permettre un développement plus aisé, notamment dû à des contraintes de temps et technique (nouvelles technologies de développement, responsive design…), la structure du site reposait sur une mise en page simple :

Structure simple du site

Structure reposant sur :

1- une navigation en haut du site
2- un accès aux outils du membre (notification, recherche & cie) sur la gauche
3- le dernier dossier publié par l’équipe de rédaction sous la navigation (au dessus de la ligne de flottaison)
4- une division en 2 colonnes pour les articles quotidiens et les brèves (actualité rapide en une seule phrase)

Qu’arriverait-il si nous venions à bousculer cette mise en page simple et rapidement identifiable par l’utilisateur lorsque de nouveaux contenus viendraient à être publiés ?

Un bloc modulaire qui s’actualiserait toutes les 24h et qui montrerait ainsi à l’utilisateur d’un simple coup d’oeil que quelque chose de nouveau venait d’arriver sur le site.

Structure modulaire avec le système d’article sur plage de 24h

J’imagine que même vous , en lisant ces lignes, avez ainsi remarqué que la structure du site avait évolué sans même avoir besoin de lire le texte.

Ainsi, le choix fût fait de lancer le développement d’une mise en page dynamique reposant sur la présentation des articles publiés sur une plage temporelle de 24h.

Pour savoir à quoi nous devions faire face, il était essentiel de posséder différentes données, telles que :

1- le nombre d’article moyen publié sur la plateforme HaloDestiny par jour
2- la moyenne haute de ce nombre (en cas de forte activité)
3- la moyenne basse de ce nombre

Référence sur 3 années lors du développement :

Sur l’année 2012, 514 articles étaient publiés, avec une moyenne haute de 5 articles et basse de 0.

Sur l’année 2013, 639 articles étaient publiés, avec une moyenne haute de 7 articles et basse de 0.

Sur l’année 2014, 528 articles étaient publiés, avec une moyenne haute de 4 articles et basse de 0.

Avec en moyenne une publication de 1,53 article par jour, nous devions donc réaliser une mise en page permettant de présenter au minimum 1 article et prête à recevoir 4 à 7 articles sur la même journée.

La mise en page fût développée avec les régles de gestion suivante :

Niveau 1: mise en page pour 1 article publié

Niveau 2: mise en page pour 2 articles publiés

Niveau 3: mise en page pour 3 articles publiés

Retour au niveau 1 après la publication d’un 4éme article tout en conservant le niveau 3.

Règles de gestion du module 24h
Détail d’un bloc article
Mise en page du module pour mobile

Conclusion

Ça n’a rien de facile de retrouver ce qui fait notre coeur de métier quand notre produit commence à avoir de la bouteille, et il n’y a aucune honte à cela.

Souvent, le mieux est de se poser et de redécouvrir la vision qui nous animait lorsque nous travaillions sur ce même produit. Revenir à l’essentiel pour apprendre comment mieux agencer le tout est parfois le chemin le plus dur à suivre mais offrant la plus grande satisfaction.

Afin que notre processus et stratégie fonctionnent, il nous fallait offrir la meilleure expérience à nos usagers concernant le coeur de notre activité.

Ici, il aura été question de développer une fonctionnalité soutenant et répondant à un besoin précis au cours d’un processus itératif. Le système remplissait son rôle à merveille une fois le développement terminé et D7 lancé en Décembre 2015, puisque les 1ers retours utilisateurs confirmaient nos attentes : membres ou simples lecteurs, ces derniers étaient en mesure de découvrir rapidement à chaque visite si de nouveaux contenus venaient d’être publiés sur HaloDestiny.

D’un point de vue ergonomique, ce module permettait de réduire la processus cognitif de l’usager à son stricte minimum tout en apportant une expérience inédite en matière d’actualité pour le site et de nombreux autres qui s’inspirèrent de celui-ci afin de remplacer leur mise en page statique reposant sur de simples grilles.

À mon sens, expliquer un travail est souvent la meilleure façon d’expliquer une idée et un processus. Je sais que parfois, on peut se sentir perdu quand il faut attaquer la conception d’un produit ou d’une fonctionnalité au coeur d’un produit existant, et j’aurais adoré trouver des études de cas précis, car même si on ne m’explique pas la méthode point par point, voir un cas pratique et comprendre comment le Designer a travaillé tout au long de son projet m’est souvent plus parlant qu’un cours magistral.

C’est dans ce but que je partage quelques travaux de conception sur Medium, car à tout designer qui parfois cherche par où débuter, un petit retour d’expérience pour se forger son avis, qu’on soit d’accord ou non avec la méthode de l’auteur, est parfois la meilleure fondation qui puisse être !

--

--

Juan

Anti-hero of the modern days infamously known as “The Bathrobe Designer” in the Design Community — Senior Product Designer — Editor in Chief for HaloDestiny.net