CroKi

Fluid Topics Admin

Le portail Fluid Topics étant un portail SaaS en marque blanche, la gestion de celui-ci peut s'avérer extrêmement complexe du côté des clients (configuration des features métiers, personnalisation de l'interface, analyse des interactions avec le contenu,…).
Le but de ce projet est donc double : simplifier les interfaces pour réduire le nombre d'appels/tickets au support du portail et la création d'un Design System pour uniformiser l'interface et améliorer la rapidité d'exécution apr les développeurs.

Rôle :

Product Designer (solo)

Pour Antidot • 2021

Skills :

Research • Testing • User Experience • Wireframes • Prototyping • User Interface • Design System • Dev tech • Project Management

Challenges

Plusieurs axes d'améliorations ont été défini pour l'élaboration de l'interface back-end de Fluid Topics :

Teams
- •Deux Product Owners à satisfaire
- •Quatre équipes de développeurs (pour un total de 16) à alimenter
Technos
- •Quatre technos différentes (une par équipe)
- •Stabilité et maintenance à travers les technos
User Centric
- •Améliorer l'ergonomie, rendre l'usage plus intuitif
- •Faciliter la configuration des nombreuses features du Portail
Scalabilité
- •Fluidifer l’amélioration itérative des écrans
- •Supporter l’ajout fréquent de nouvelles features

En prenant en compte les contraintes fortes dirigeant le projet, la solution la plus véloceet pérenne fut de se baser sur un Design System existant et déjà largement répandu etconnu des utilisateurs : Material Design, avec un thème personnaliser pour rendre les écrans de Fluid Topics plus facilement identifiables.

Atomic Design System

Pour ammener peu à peu les évolutions et respecter un ensemble cohérent, le modèle de Design System "atomique" a été adopté.

Design Tokens

Afin de s’assurer de l’uniformité du style des composants à travers les différents frameworks de développement employés, une bibliothèque de Design Tokens a été mis en place.

Grilles de mise en page

Pour s’assurer que la structure des écrans reste logique et fluide quel que soit le device de l’utilisateur, une structure solide, mais souple (comme le roseau : il faut se plier à toutes les situations, sans se rompre pour autant) a été élaboré en mettant en place des grilles de mise en pages.

Composants

Chaque composant a été finement détaillé, chaques références au Design Tokens recensées, puis définie dans des composants Adobe XD côté designer, ainsi que dans un Storybook côté développeurs.
Le but était de rester agnostique de tout framework de développement pour permettre aux développeurs de procéder à l’intégration uniforme de tous les éléments, quel que soit la techno utilisés (certaines équipes pouvant utiliser comme base des frameworks ou des Web Components Material Design, d’autres non), et de rester conforme aux maquettes soumises.

Les écrans

Basés sur ce Design System, de nombreux écrans d’administration furent créésou mis à jour pour moderniser l’application et rendre son usage plus fluide et agréable au quotidien pour ses utilisateurs à travers le monde.

Création et gestion des landing pages

Le Page designer est l'écran permettant d'accéder aux différentes homepages et landing pages (pages non-générées automatiquement) de Fluid Topics. Le brief en bref:

Utilisable par des petits clients ayant peu de Pages comme des gros clients ayant 100+ pages,
Pouvoir ajouter différents éléments petit à petit (personnalisation des Header et Footer, conception de la page de Search, etc.),
Pouvoir être utilisé pour créer des pages ayant des conditions d'accès spécifiques (langues, groupes d'utilisateurs).

Affichage en Cards pour une visualisation et un accès rapide aux pages

Filtrages par statut, language ou groupe associé

Filtrages par tag

Gestion des tags

L’affichage Table pour une gestion fine et organisée des Pages

La création des pages est possible via un éditeur no code pour permettre à tous de créer et modifier ces pages

Des composants partagés entre plusieurs pages peuvent être mis en place, pour faciliter la mise à jours des pages

Content processing

La publication de documents est un moment extrêmement sensible dans le workflow des clients de Fluid Topics. La variété de formats acceptés, le grand nombre de techwriters pouvant publiés, tous les assets joints, les problèmes de serveurs, …
Une multitude de sources peuvent ralentir le processus de publication, ces écrans sont donc un point névralgique de l'administration du portail.

Dashboard présentant l'état des documents entrain d'être uploadés
Via une API, chaque nouvelle erreur peut être signalé au client par mail, Slack, ou tout autre système tiers

L'historique permet de checker l'état des différentes publications
Le dashboard permet un accès rapide (pré-filtrage du tableau) aux publications en erreur, aux publications d'une date particulière, etc…

Analytics

Une panoplie d'outils d'Analytics ont été mis en place pour suivre au plus près l'utilisation du portail.

Suivi de l'affichage des documents et de leurs topics

Visualisation des typologies d'utilisateurs