Pour se faire une idée de mon travail et surtout des démarches que je peux suivre et des méthodes que j’utilise, voici quelques réalisations.

1. Bibliothèque virtuelle de médias

Dans le cadre de mon travail à BEEBUZZINESS, j’ai conçu et dirigé la production (rôle de Product Owner) d’une médiathèque virtuelle.

Très en amont du projet et avec des besoins changeant, j’ai réalisé un benchmark des applications de ce type qui m’a aidé à maquetter un premier concept de bibliothèque numérique.

Maquette1 — Maquette tablette : affichage de tous les documents

Maquette tablette : affichage par dossier

Maquette tablette : panier d'impression à la demande — Maquette tablette : Panier d’impression à la demande

Besoins

Quelques mois plus tard, quand le projet a réellement démarré, les besoins s’étaient précisés :

une médiathèque pouvant accueillir les documents virtuels que mon entreprise produit, mais également des vidéos, des images, des bandes sons, etc,
des options de partage et d’impression à la demande par un imprimeur certifié pour une livraison à domicile,
la possibilité d’organiser les médias, mais également de donner une impression de volume même sur les plus petites quantités,
une importance particulière sur la notion d’administration et de droits.

Cible : à court terme des clients grands comptes, mais à long terme des plus petites entreprises et même le mass-market.

Vision

L’objectif est de produire un logiciel web très intuitif en WYSIWYG, accessible à tous et depuis toutes les plateformes. Pour cela, les micro-interactions sont fondamentales, permettant à l’utilisateur de toujours savoir d’où il vient, où il est et comment revenir en arrière ou continuer son parcours.

Malgré les nombreuses options disponibles, le besoin utilisateur principal reste la consultation. J’ai donc mis un point d’honneur à faciliter celle-ci, ainsi que la recherche de médias.

Pour répondre aux besoins et aux contraintes d’organisation des médias et de volume, j’ai fait le choix d’organiser les médias au sein de « Collections », sortes de tags pouvant s’imbriquer les unes dans les autres et contenir des éléments communs (plus de détail sur ce point dans cet article de blog).

A plus long terme, j’aimerais intégrer des éléments de game design comme des informations sur le pourcentage de médias consultés, le nombre de pages lues, etc, afin d’encourager les utilisateurs à lire davantage.

Méthodes

Une mind map puis une story map m’ont aidé à prioriser les fonctionnalités à concevoir et à développer. Avec des contraintes temporelles fortes, nous avons fait le choix de développer en priorité la version desktop de ce produit, tout en gardant en tête l’objectif d’en faire un produit multi-plateformes lors de la conception. J’ai travaillé en équipe et en cycles courts avec un UI designer et un développeur. Dans un soucis de grande réactivité, j’ai fait beaucoup de maquettes papier et powerpoint que je testais auprès de mes collaborateurs pour valider le fonctionnement.

Résultat

Après quelques mois, une première version de la médiathèque a été montré lors d’un salon en février 2016.

Captures d’écrans de la bibliothèque virtuelle de Konica-Minolta (mars 2016) :

Bibliothèque virtuelle mars 2016 : vue par défaut

Bibliothèque virtuelle mars 2016 : scroll

Bibliothèque virtuelle mars 2016 : sélection

Bibliothèque virtuelle mars 2016 : choix du panier de partage ou d'impression — Bibliothèque virtuelle mars 2016 : choix du panier de partage ou d’impression

Bibliothèque virtuelle mars 2016 : choix de la quantité et de la langue

Pour en savoir plus sur le déroulement de ce projet, consultez cet article de blog.

Version mobile

Je travaille actuellement (juillet 2016) sur le maquettage des écrans mobiles. Voici la première version de ce travail, intégrant certaines micro-interactions et transitions entre les écrans :

Crédits

UI designer : Grégory Costa
Développeurs : Thach Mai, Johan Girard et Pierre Odin

2. Studio de création des documents enrichis

Dans le cadre de mon travail à BEEBUZZINESS, j’ai conçu le logiciel web de création des documents virtuels enrichis que mon entreprise produit.

Besoins

Ce logiciel doit être capable de :

zoner des parties du document et les associer à une action (lien, zoom sur le texte, ouverture d’une fiche produit, etc),
insérer des enrichissements (vidéos, animations, etc)
définir des sections de documents, permettant au lecteur final de choisir les sections qui l’intéressent et de réordonner le document
choisir un thème visuel en fonction du client : fond d’interface, logo et couleurs
activer / désactiver des fonctionnalités
ajouter, supprimer, mettre à jour des pages
gérer différentes langues et variantes (qui seront affichées selon la localisation du lecteur par exemple) du même document

A court terme, la cible de ce produit est une équipe interne à l’entreprise, mais à long terme une version simplifiée pourra être distribuée aux clients de BEEBUZZINESS qui possèdent une bibliothèque virtuelle.

Vision

L’équipe qui génère les documents a besoin d’être particulièrement efficiente. C’est un outil de travail complexe sur lequel ces personnes sont formées, et qu’elles utiliseront à longueur de journée. Par conséquent, l’accent a davantage été mis sur la réduction du nombre d’étapes et la simplification des actions que sur la compréhensibilité de l’interface.

L’idée est de centrer l’interface sur l’activité principale de son utilisateur, c’est à dire le zonage et l’insertion de médias. Les autres activités représentant une très faible part du temps passé à générer un document, leur accès peut être moins visible, cachés dans des menus d’options et de paramétrage.

Méthodes

Pour ce projet, j’ai fait de l’analyse de l’activité en situation de travail en observant plusieurs jours le travail de l’équipe afin de m’imprégner de leurs contraintes, besoins, et freins actuels. J’ai ensuite animé un atelier de co-conception avec l’équipe, pour balayer le maximum de leurs besoins et les intégrer à un ensemble cohérent.

Résultats

Après divers aller-retour, j’ai produit les maquettes suivantes (le développement n’a pas encore été réalisé) :

Maquette de l'interface générale — Interface générale

Maquette du panneau d'options — Panneau d’options

Maquette de l'écran de gestion des médias — Écran de gestion des médias

Maquette de l'écran de gestion des médias lors de la sélection d'un média — Écran de gestion des médias lors de la sélection d’un média

3. Catalogues retail virtuels

Dans le cadre de mon travail à BEEBUZZINESS, j’ai conçu les interfaces des versions retail et corporate des documents virtuels produits par l’entreprise. Voici quelques détails sur la partie retail.

Besoins

Les besoins exprimés par notre client principal sont les suivants :

Pour les utilisateurs finaux :

Parcourir le catalogue
Consulter le détail d’un produit, le partager
Faire une liste de courses, la partager, l’imprimer
Être localisé dans le magasin le plus proche de chez soi
Avoir un catalogue personnalisé en fonction de ses centres d’intérêt

Pour le client :

Faire du push de publicité
Augmenter la consultation des articles de leur magazine web en le valorisant dans le catalogue

Vision

L’objectif ici est vraiment de concevoir un produit compréhensible par tous, instantanément. Nos utilisateurs finaux étant pour beaucoup retraités, la taille des boutons et la clarté des libellés deviennent des éléments encore plus importants. Par rapport à l’existant, je souhaitais surtout faciliter la découvrabilité et l’usage des fonctions essentielles comme la recherche, et réduire les éléments qui distraient l’utilisateur de son objectif.

Méthodes

En parallèle, j’ai produit des maquettes pour les premiers éléments de l’interface en m’appuyant sur un benchmark des catalogues concurrents et sur des tests utilisateurs réalisés au préalable sur les catalogues actuels, et j’ai mis en place un questionnaire utilisateur accessible depuis les catalogues actuels.

Pour le cas particulier de la fiche produit, j’ai animé un atelier de tri de cartes afin d’identifier les éléments à regrouper et ceux à mettre en évidence.

Mes questionnaires, contenant des questions démographiques, deux questionnaires standardisés (UX et utilisabilité), un exercice de complétion de phrase et des questions personnelles, m’ont permis d’affiner les besoins et problématiques des utilisateurs finaux, et de créer des personas.

Persona principal : la retraitée connectée

Persona secondaire : le jeune sportif rêveur

Après une première passe créa sur mes maquettes par un UI designer, les maquettes graphiques ont été montrées aux clientes. Plusieurs allers-retours ont eu lieu, j’ai alors travaillé de manière très réactive en étroite collaboration avec l’UI designer responsable des maquettes pour trouver le meilleur compromis entre l’expérience utilisateur et les exigences des clientes.

Résultats

Voici la dernière version des maquettes graphiques :

Crédit

UI designer : Dewan Suh