AlloDocteurs est un site internet créé à la suite du succès de l’émission « Le Magazine de la santé » diffusée du lundi au vendredi sur France 5. Ce site décrypte l’actualité santé à travers des articles, des vidéos et répond aux questions des téléspectateurs.
Nous voilà mandatés pour refondre le site entièrement, côté SEO (référencement gratuit) et au niveau du design également qui méritait un rafraîchissement. Il existait alors un site web France et un autre Afrique. Ce dernier était le plus récent mais il était nécessaire, dans un souci d’harmonie, de créer une nouvelle base commune qui rallie les deux.
Les deux sites sont alors identiques MAIS ne posent pas forcément les mêmes contraintes et n’ont pas les mêmes cibles.
Exemple très concret : la cible Afrique est très mobile first, il fallait donc absolument adapter le design est l’UX/UI du site à ce besoin responsive.
Ce qu’il fallait, c’était créer un pont intéressant et surtout très accessible entre le format télévision et le format web. Aujourd’hui la vidéo sur le web est largement mise en avant et AlloDocteurs voulait s’imposer sur internet comme étant un véritable média vidéo orienté santé.
Notre mission était donc non seulement de refondre le design mais aussi et surtout de rendre le tout agréable à regarder, sur mobile comme sur ordinateur. Des contenus de qualité sur un site inadapté ou obsolète sont très rapidement mis de côté par les internautes. Nous devions donc valoriser ces contenus en leur offrant un « écrin » web ergonomique et fonctionnel.
Lorsque l’on découvre un nouveau projet comme celui-ci, la première étape est de savoir dans quoi on s’embarque ! Il a été important pour nous de nous imprégner de ce qui existait pour savoir ce qu’il allait falloir changer, faire évoluer et l’ampleur de la tâche dans laquelle nous nous lancions.
Grâce à un benchmark, nous avons mieux appréhendé la façon dont étaient construits les sites média. Cette étape nous a permis d’évaluer les meilleurs usages et les systèmes de navigation privilégiés par les concurrents, d’identifer les bonnes pratiques à appliquer et les mauvaises à proscrire et assimiler les codes de cet univers.
Grâce à des études réalisées en amont de la mission sur les analytics existants, nous avons appris que le trafic sur mobile était bien plus important que celui sur ordinateur. Alors que d’habitude, sur d’autres projets, nous nous occupions de l’UX mobile dans un second temps, nous avons pris le parti de la faire passer en priorité sur ce projet. Si l’audience est mobile avant tout, notre préoccupation devait se centrer autour de ce besoin en priorité.
Au bout d’une semaine, le temps de lancer la mission, nous avons commencé à créer des wireframes (des maquettes low-fidelity des pages web) pour le mobile donc, et en français. Grâce au logiciel Marvel, nous avons monté un prototype qui nous permettait, grâce à un accès directement en ligne, de simuler l’utilisation des maquettes. C’est une méthode efficace pour se projeter réellement dans l’expérience que va vivre l’utilisateur final en visitant le site depuis son téléphone.
De plus, comme le trafic de ce type de sites-médias vient du SEO, donc du référencement sur les moteurs de recherche des contenus qui s’y trouvent, c’est une dimension que nous avons été obligés de prendre en compte. Ici, on parle d’arborescence du site. Il faut alors découper le site à la manière d’un entonnoir et classer les contenus dans les bonnes « cases ». Les grands sujets mènent à des catégories qui elles-mêmes mènent à des sous-catégories, dans lesquelles se trouvent les vidéos/articles correspondants. Ce découpage permet aux moteurs de recherche comme Google de « s’y retrouver » dans le site et de proposer aux internautes les bons contenus en fonction de leurs recherches.
La dernière étape concernant l’UX au sens large de ce nouveau site AlloDocteurs a été de traiter la question des publicités. En effet, c’est un site qui, comme beaucoup d’autres aujourd’hui, intègre des bandeaux publicitaires. En travaillant donc cette partie main dans la main avec eux, nous
- Les publicités ne doivent en aucun cas gêner la bonne utilisation du site ou la consommation des contenus qui s’y trouvent… Elles sont acceptées par le public du moment qu’elles ne sont pas trop intrusives.
- Les emplacements de ces publicités doivent être intéressants afin que les annonceurs/partenaires soient motivés à investir et que cela puisse augmenter les revenus publicitaires d’AlloDocteurs.
Il s’agit ici d’un équilibre important à trouver entre le business et une expérience utilisateur agréable !
Ça bien sûr, c’est au niveau du design pur ; il a fallu dans un second temps gérer le développement du site. Cette partie concentrée sur l’UX a duré 5 semaines puis, une fois les wireframes terminés, nous avons pu repartir sur 5 nouvelles semaines de travail, cette fois ciblées UI.
Ce qui a été primordial lors de cette phase c’est la mise en place d’un design system. Il s’agit en fait d’une grande bibliothèque de composants réutilisables pour les interfaces afin de concevoir et développer des produits digitaux comme des sites web ou des applications mobiles.
Comme c’est un site-média, ils avaient peu d’éléments concernant leur identité visuelle et entre les versions française et africaine, très peu de changements à noter mis à part le logo et les couleurs choisies. En revanche, les mises à jour se font sur le texte, les photos et bien entendu les vidéos.
Ce design system a été très important car il nous a permis de pouvoir mettre très facilement à jour les maquettes au fur et à mesure de l’avancement du projet. Avec cela, nous avons pu effectuer les mises à jour sur un seul et même fichier et gagner du temps grâce à la synchronisation que nous offrait le design system.
Cette partie UI a été relativement rapide comparée à celle effectuée sur d’autres projets mais les véritables challenges étaient de travailler sur un site-média pour la première fois ET de valoriser la vidéo pour que l’utilisateur en consomme ensuite le plus possible. Pour cela, nous nous sommes inspirés de Youtube qui encourage toujours l’internaute à passer d’une vidéo à l’autre.
Une fois cette partie UI validée par les clients, nous avons passé le relais à l’équipe technique/développement.
Durant une semaine, nous avons étroitement collaboré avec l’équipe technique afin que le rendu corresponde parfaitement aux maquettes que nos clients avaient validées en amont. Ainsi, pas de mauvaise surprise possible à la livraison !
C’est un projet qui nous a demandé beaucoup d’adaptation. Nous avons trouvé que ce secteur avait ses propres codes, besoins et enjeux qu’il a fallu prendre en compte. En effet, comme il s’agit de consommation de contenus, c’était à nous de penser comme l’utilisateur final, de comprendre sa psychologie et ses usages, afin d’adapter l’accessibilité aux contenus.
Plus le site est agréable et accessible et ergonomique, plus l’internaute y passe du temps pour y consommer des contenus (ici de la vidéo par exemple) et plus il est exposé aux publicités qui rémunèrent le site.
C’était pour nous un nouveau défi à relever que de réaliser le site d’AlloDocteurs qui reçoit des millions de visiteurs tous les mois.