Fluid Topics Portal

Fluid Topics est un portail de recherche et de diffusion de documentation technique, possédant une interface riche en features.
Fluid Topics ayant débuté en 2011, mon arrivée sur le projet en 2017 avait plusieur buts: un redesign générale, afin de moderniser l'interface du portail et de le rendre mobile-friendly, tout en améliorant l'experience utilisateur, et de mettre en place une interface modulaire pouvant accueillir un nombre de features configurable par les clients.

Rôle :

Product Designer (solo)

Pour Antidot • 2021

Skills :

Research • Testing • User Experience • Wireframes • Prototyping • User Interface • Mobiles & Desktop • Project Management

fluid-topics-admin

Challenges

La révision de l'interface end-user de Fluid Topics impliquait plusieurs points :

Conduite du projet

Audit de l'existant

Lors de mon arrivée sur ce projet, Fluid Topics possédait déjà un héritage de 5 ans de développement.
Assimiler, comprendre et s'approprier l'existant allait être la première étape, et mon premier challenge.
Je laisse de côté le plus complexe : la partie Administration, le "back-end" du produit.
Pour la partie End-User à laquelle nous nous intéressons ici, elle s'articule principalement autour de 3 écrans : la Homepage, la Search page et la Reader page.

Interview d'utilisateurs et prise de feedback clients

Une fois le projet pris en main, avec la Product Owner de Fluid Topics, nous avons démarré une série d'interviews d'utilisateurs en situation.
Pour guide nos interviewées et nous permettre de comparer les différentes observations, nous avons pris soin d'élaborer un éventail de tâches à résoudres typiques dans le contexte d'un portail de recherche documentaire.

Après la collecte des feedbacks clients auprès de l'équipe Customer Services (support / relation client) et Professional Services (chef de projets / mise en place de l'application dans le contexte du client), nous avons aussi contacté directement les clients dont les feedbacks nous paraissait nécessaire à appronfondir.
Ces informations nous ont aussi permis la conception de personas, nous permettant de nous guider tout au long de la conception.

Recherche de solutions et Design Sprint

Suite à la collecte de ces informations et le partage du CR aussi bien aux stakeholders qu'aux développeurs — afin de confirmer la nécessité et rafermir la volonté des équipes quand à la conduite de ce changement — nous avons entrepris de lancer un Design Sprint pour rapidement déterminer un objectif commun à atteindre.

Un premier prototype (le premier d'une longue série) naquit rapidement. Ce prototype résolvait avec succès les différents pain points précédemment relevés. De plus, c'est avec plaisir que nous percevions aussi un bénéfice "humain" non prévu : le regain de motivation des équipes Produits.

Backlog grooming et gestion du tout-venant

Toutes les étapes préliminaires arrivant à terme et la vision long-terme étant fixé, il fallait encore intégrer petit à petit tout ces changements en production.

De nombreuses itérations commencèrent afin de peaufiner l'UX et l'UI des composants un par un, de travailler chaque détails, tout en absorbant la charge de travaille habituelle et en intégrant les nouvelles demandent de features.

Une forte interaction entre Product Designer et Product Owner fut nécessaire pour organiser et mener à bien ce chantier de longue haleine.

Création des composants

De nombreux composants on été revu ou modifié pour le redesign de Fluid Topics. Plusieurs itérations sont généralement nécessaires pour amener au composant final.

Exemple du composant "rating"

Task flow

Dans un premier temps, un task flow est défini en fonction des besoins fonctionnels, des user stories, et imaginé pour s'intégrer parfaitement à l'existant.

Au cours des itérations suivantes, ce task flow peut-être amené à évoluer pour corriger d'éventuels manques, ou au contraire simplifier les interactions finales.

Task flow préparatoire pour le rating

Prototypes et tests

La plupart des composants ont été révisé, et en fonction de leurs complexités, testé voir suivi de la création de prototype afin de répondre au mieux au besoin des utilisateurs.

Une attention particulière a été apporté aux comportements mobiles, qui jusque là étaient peu élaborés.

J'ai développé de nombreux prototypes sous divers formats (en HTML/JS, via Adobe XD, …), comme celui concernant le choix du comportement que doit avoir le contenu de la Reader page, lors de l'ouverture/fermeture de la sidebar, en fonction du device.

prototype pour le composant rating sur desktop

User flow

L'user flow final est créé en fonction d'après les éléments définis précédement. Il servira de guide pour le développement, afin de prévoir et d'ajuster les comportements du composants.

Évidemment, plus la feature est complexe, plus un user flow peut-être dense (comme dans cette autre exemple : la review pour les features de la search page).

User flow 1 pour le composant rating User flow 2 pour le composant rating User flow 3 pour le composant rating

Composition et Design System

Une fois validés, l'UI des composants est raffiné et ajusté pour être en cohérence avec le Design System.

Une fois les dernières retouches effectuées, un livrable clair et précis est fourni aux développeurs.

Un point sur l'Accessibilité

Fluid Topics devant — contractuellement — être accessible, il était important de mettre en place une structure et un comportement adéquat pour répondre aux normes WCAG AA.
J'ai donc fourni quelques éléments de codes et d'interaction détaillés aux développeurs, peu formés sur le sujet, afin qu'ils puissent mener à bien cette partie. Un exemple de navigation clavier détaillé :

document sur l'accessibilité pour le document rating

Redesign globale

Rapide aperçu avant/après des écrans principaux :

Homepage | AVANT

Homepage | APRÈS

Search page | AVANT

Searchpage | APRÈS

Reader page | AVANT

Reader page | APRÈS

Prévoir la scalabilité : amener un grand nombre de features

ecran du Reader sur laptop

Le nombre de features dépend de la configuration du Portail et des autorisations accordées à l'utilisateur.

ecran du Reader sur mobile

Sur l'interface mobile, l'utilisateurs retrouvent exactement les mêmes features.

Des informations disponibles, mais non intrusives

Informations de la titlebar

De nombreuses metadata peuvent être utilisées pour définir un document.
Elles sont obligatoires et doivent être aisément accessibles, sans gêner l'utilisateur durant la consultation du document.

Une interface qui s'adapte au device et à l'utilisateur

ecran du Reader sur mobile

Sur mobile, l'écran est centré sur le contenu via le modèle des onglets en bas de l'écran ayant été retenu pour offrir une expérience à laquelle les utilisateurs sont habitués.

ecran du Reader sur laptop

Sur tablette et desktop, le contenu peut-être privilégiée d'un simple clique pour permettre aux utilisateurs de se concentrer sur le contenu.

ecran du Reader sur laptop

Sur laptop, la possibilité de resizer chaque zone offre à l'utilisateur la possibilité d'adapter l'interface à sa préférence, et non l'inverse.
Plusieurs features (encore en développement) ont donc été prévu pour venir s'ajuster dans la zone laissée libre à droite.

Jongler avec la customisation

Fluid Topics est une application marque blanche, elle doit donc assimiler le Branding des clients et s'afficher avec leurs couleurs, quelque soit le device.

C'est un axe de travail qu'il faut intégrer dans chaque sprint : quelque soit la feature redesignée ou ajoutée dans le portail, il est nécessaire de l'y ajouter petit à petit, en gardant toujours en vue la cohérence globale, et ne pas surprendre les clients aussi bien que les utilisateurs finaux. J'ai de nombreuses fois procédé à cette exercice de jonglage périlleux main dans la main avec la Product Owner de Fluid Topics.

Pour que chaque nouveau composant soit automatiquement en accord avec le thème choisit par le client, tout une panoplie de variables CSS a été mis en place dans le Design System de l'application.

Exemples de customisation du portail Fluid Topics

Exemples d'intégration clients :

logo client Talend logo client Teradata logo client UEFA logo client Siemens logo client Fluid Topics