On boarding

Habiller les pages vides pour accompagner l'utilisateur à ses premières créations de contenu

Type
Cross apps behaviour
Devices
Mobile - Tablet - Desktop
Release
2018
Company
Open Digital Education
Roles
  • Product thinking
  • Sketching
  • Art direction
  • Interaction design
  • Framework specifications
Tools
  • Moqups
  • Adobe Illustrator
  • HTML5
  • SASS
  • Snap SVG

Le contexte

Les portails éducatifs ONE et NEO, dont une application mobile s'apprête à sortir au moment où se dessine ce projet, font face au problème de pénurie de l’information que l’on observe aux premières connexions des utilisateurs.
Il faut concevoir une meilleure expérience pour l’utilisateur dès son accueil, lui fournir une meilleure compréhension des fonctionnalités mises à sa disposition.

Au delà de la problématique de création, que donner à voir à l’utilisateur lorsque celui ci n’a pas accès à un contenu, ou l’a supprimé ?

On liste de nombreux cas et raisons différentes qui conduisent un utilisateur à faire face à un écran vide. Identifier ces situations permet de saisir les opportunités de garder l’attention de l’utilisateur, en l’incitant à créer du contenu, ou bien, selon les cas d’usages, poursuivre sa navigation sur d’autres applications du portail.

Le choix retenu est d'insérer des illustrations accompagnées d’un texte court et légèrement humoristique. Cela renforce l’identité graphique du produit et lui confère un ton propre.

Intégration sur appli mobile

De nombreuses situations à prendre en compte

Dans grand nombre d’applications du portail, les interactions possibles diffèrent selon les profils. Certains utilisateurs ne disposent que du droit de lecture alors que d’autres, des droits de création ou d’édition.
Le texte, différent pour chaque application, doit guider vers le call-to-action. Il ne peut donc être identique et devra être décliné selon ces situations. Il devra aussi convenir aussi bien pour de jeunes enfants que des adultes, ainsi que pour des personnes de cultures différentes, sachant que le portail est adopté dans plus d’une vingtaine de pays. Ceci implique évidemment qu’il soit compatible avec le système multilingue de la solution.

Les images quand à elles seront déclinées selon les applications, mais aussi selon certains cas transverses comme une corbeille vide, ou la survenue d’une erreur. Au total une trentaine d'illustrations originales seront commandées.
Un autre point à prendre impérativement en compte est la multitudes de thèmes habillant les portails. Pour éviter d’avoir à reproduire des images aux couleurs harmonisées à chaque instance de la solution, nous exigeons qu’elles soient produites au format vectoriel (svg) ce qui permet d’en variabiliser les couleurs. De cette manière, les illustrations héritent dynamiquement des couleurs principales du thème, et certains éléments graphiques peuvent même être animés !

Corbeille de la messagerie

La méthode

Pour une collaboration au maximum de son efficacité, des ateliers sont organisés en interne.
Pour chaque situation nous imaginons et croquons les scénettes que nous aimerions voir mises en images par l’illustratrice. Nous lui faisons régulièrement parvenir nos croquis, ainsi que des listes de mots clés, concepts forts de la solution (la collaboration, le réseau...) afin de lui fournir une base de travail et qu’elle ne soit jamais en panne d’inspiration. Nous la briefons aussi sur la méthode d’exportation à suivre pour que ses productions s’accordent à nos prérequis techniques.
À la réception de chaque nouveau lot, les entrants graphiques sont supervisés techniquement afin de vérifier qu’ils soient compatible au processus d'intégration et de déclinaison multithème.

Pas de message - Déclinaison des couleurs - Portail secondaire et portail primaire
Back to projects