
Voxe
Le média d’empowerment féminin

Dans le cadre d’un projet d’innovation média financé par Google News Initiative en 2022, la start-up française Voxe a fait appel à Kirk pour concevoir un outil de Business Intelligence.
Contexte
Voxe est un média d’actualité et “d’empowerment” féminin qui fonctionne principalement via une newsletter nommée La Quotidienne. En 2022, il franchit un nouveau cap et ambitionne de concevoir un outil de Business Intelligence sur-mesure ayant pour but d’aider les annonceuses de Voxe à monitorer leurs campagnes Display. Ce futur outil a pour objectif de leur permettre de disposer facilement de données pertinentes et fiables afin de prendre des décisions éclairées et maximiser l’efficacité de leurs campagnes publicitaires.
Enjeux
👉 Identifier les besoins, les points d’enchantement/friction des utilisateurs
👉 Prioriser les chantiers fonctionnels
👉 Concevoir une nouvelle expérience de découverte, compréhension et d’aide à la décision mémorable
👉 Créer un socle ergonomique optimal et évolutif
Plan d’actions
1.
Discovery avec 7 participantes dans la cible de Voxe et Research Repository2.
Création d’une Architecture de l’Information3.
Définition du Product Backlog4.
Conception et itérations des Wireframes5.
Création du Visual Design et des maquettes graphiques6.
Conception du Design System
1. Discovery avec 7 participantes dans la cible de Voxe et Research Repository
Cette mission a débuté par une grande phase de Discovery, qui a été décisive pour la suite. Elle a notamment permis de mieux comprendre les enjeux lors d’ateliers sur FigJam et de prendre du recul grâce à la récolte de données très riches, réalisée auprès des clientes de Voxe avec l’outil Odaptos. L’ensemble de ces insights a ensuite été consolidé dans un Research Repository sur Notion et a permis la création d’une User Journey.
➡️ Si vous souhaitez en savoir plus, le process de recherche UX est décrit dans cet article.

Capture d’un entretien restitué après l’analyse émotionnelle de l’IA d’Odaptos
2. Création d’une Architecture de l’Information
S’en est suivi la phase de Priorisation, essentielle car elle permet la création de livrables de référence telles que l’Arborescence et le Product Backlog dont on parlera un peu plus bas. En parallèle de la User Journey, côté design, nous avons ainsi travaillé sur l’Architecture de l’Information du futur produit en créant une Arborescence sur FigJam. Elle permet de montrer les différentes briques du produit à travers des parcours schématisés. Elle permet également de prioriser les fonctionnalités à faire apparaître lors de ce MVP.

Arborescence réalisée sur FigJam
3. Définition du Product Backlog
Toujours dans cet élan de priorisation, nous avons créé une liste de tâches (pages et parcours) à réaliser côté design. Face à chaque tâche, nous avons estimé le temps en heure que cela pourrait nous prendre. Ce livrable permet ainsi de se projeter de manière temporelle et de mesurer la densité de production. C’est également une façon de périmétrer la mission et de mettre de la valeur là où elle est nécessaire. Ce document, réalisé sur Notion, est partagé à l’ensemble de l’équipe car il permet aussi à toutes les parties prenantes de suivre l’état d’avancée des maquettes. C’est la dernière étape avant de passer à la phase de production.

4. Conception et itérations des wireframes
La conception des wireframes marque le début de la phase de Prototype & tests. C’est l’étape durant laquelle les UX & Product Designers commencent à mettre les mains dans le cambouis et mettent en forme les concepts à travers des maquettes dites de basse-fidélité. Ces maquettes permettent ainsi de se concentrer sur le fond et donc les fonctionnalités, et de ne pas parasiter la réflexion avec la forme. Bien évidemment, tout se passe sur Figma !

Wireframes réalisés sur Figma
L’ensemble des revues et présentation ont été réalisées en asynchrone sur l’outil Loom. Cela permet de partager rapidement des mises à jour des maquettes sans avoir à mobiliser l’équipe entière.
Présentation asynchrone des wireframes sur Loom
5. Création du Visual Design et des maquettes graphiques
Une fois les wireframes validés, il est temps d’appliquer la couche graphique à ces maquettes. À partir de leur charte graphique, nous avons ainsi conçu une direction artistique propre au produit. Cette dernière avait pour objectif d’être innovante et différente de ce qu’on peut rencontrer dans des produits SaaS classiques.

6. Conception du Design System
En parallèle, nous avons conçu une librairie UI dans laquelle est rassemblé l’ensemble des couleurs, typographies et composants utilisés dans les maquettes. C’est une façon de systémiser les éléments et d’implémenter un écosystème évolutif du produit. Cela permet également de faciliter la phase de développement.
Conclusion
À la fois ambitieux et innovant, ce projet a été un réel plaisir à réaliser. Le fait de concevoir un produit en se nourrissant de la recherche faite au préalable facilite énormément l’étape d’idéation, notamment car cela aide les UX & Product Designers à orienter leur vision et à faire des choix pertinents. De plus, le produit a une direction artistique qui sort du lot, ce qui nous a permis de nous amuser !