Sibra Manager

Gestionnaire de réseau de bus

UX DesignUI Design

Résumé

RôleUI Designer, UX Designer
Année2020

Sibra Manager est un projet d’application dashboard qui vise à améliorer la supervision du réseau de bus d’une ville. J’ai pris inspiration sur la Sibra, le réseau de bus d’Annecy, néanmoins le projet n’est pas une collaboration avec ces derniers.

Sur Sibra Manager, l’utilisateur peut accéder à 4 interfaces principales : une pour surveiller les lignes en activité, une pour voir le listing complet des bus, une pour voir les conducteurs et leurs coordonnées ainsi qu’une dernière, une messagerie pour pouvoir communiquer rapidement.

Utilisateurs& Problématique

Sur ce genre d’application, type dashboard back-office, la simplicité de prise en main n’est pas autant mis en avant que sur une application grand public. En effet, contrairement à ces dernières, on suppose que les utilisateurs de Sibra Manager auront eu une formation à l’outil au préalable. Ainsi, plutôt que de privilégier le côté intuitif et pratique, j’ai préféré privilégier la visibilité des informations, la facilité d’accès à ces dernières et la rapidité pour effectuer des actions réponses.

La problématique était donc : Comment transmettre le maximum d’informations utiles à l’opérateur sans surcharger l’espace visuel et comment lui permettre d’agir rapidement en cas de problème ?

Les utilisateurset leur besoins

Les besoins des opérateurs
Voir l’état global du réseau, où en est chaque bus sur chaque ligne
Savoir quand un bus est en avance ou en retard, et pouvoir prévenir le conducteur
Pouvoir être alerté par un conducteur en cas de soucis et lui répondre
Voir tous les bus, actifs ou non, leurs lignes, leurs derniers conducteurs et leurs capacités
Voir les conducteurs en activité, leurs coordonnées et le planning

Même avec un nombre réduit d’utilisateur formés, ils ont quand même des besoins qu’il ne faut pas ignorer et autour desquels il faut imaginer le design. Ils ont principalement besoin d’être notifié sur tous les écrans et à tout moment des alertes nécessaires. Ils ont aussi besoin d’avoir accès au maximum d’informations sur les bus d’une ligne sans avoir à chercher.

De plus, une grosse partie de l’application repose sur la prise de contact, par les conducteurs ou par l’opérateur, en cas de soucis. Il aura donc besoin d’un espace dédié à la messagerie rapide et facile à utiliser. A partir de là, on peut dresser une liste des besoins la plus exhaustive possible.

Process de design UX classique

Mon process derecherche UX, adapté

Dans le cadre de ce projet, j’ai dû adapter certaines étapes du process UX qui n’étaient pas adéquates pour en privilégier d’autres. Par exemple, vu la spécificité des besoins et du type de projet, il m’était dur de faire une étude de la concurrence car ce genre d’application est souvent développé sur mesure et non en libre accès au grand public. De plus les besoins des autres applications n’auraient pas forcément été les mêmes que les miens.

De même, je n’ai pas imaginé de persona car j’ai jugé qu’il ne fallait pas que l’application s’adapte à la personnalité de l’utilisateur pour qu’il la comprenne. De même, les user-flow n’étaient pas non plus primordiaux au vu de la simplicité de chaque écran. Il n’y a pas d’actions complexes sur plusieurs niveau, il n’est donc pas nécessaire de les visualiser.

Cependant j’ai quand-même opté pour la création de deux scénarios utilisateurs, afin de rester cohérent lors de mon design, par rapport au déroulement des actions utilisateurs.

Scénario : Alerter un conducteur
Scénario : Vérifier le plein d'un bus

Création des wireframes

Ayant le déroulement des actions et les 4 interfaces nécessaires en tête, j’ai rapidement commencé à créer les wireframes. Dans ce genre d’applications un peu plus complexes j’aime bien maquetter l’application rapidement afin de pouvoir tout mettre à plat, ne rien oublier et pouvoir prototyper. Faire trop de schéma peut être superflu pour des interfaces « simples ».

Ce que j’ai pensé en premier dans Sibra Manager, c’est la barre de notification à droite, constamment présente. C’est l’élément le plus important pour l’opérateur et c’est à partir de là qu’il sera averti en cas de soucis sur le réseau, plus ou moins graves.

Wireframes de Sibra Manager

Pour le reste des écrans de l’application j’ai essayé de garder une identité consistante dans le placement des titres, des boutons et des call to actions. J’ai privilégié la visibilité des informations principales (infos des bus, de leurs passagers, de leur taux d’essence etc…) aux actions directes. En effet, bien que les actions soient (comme signalés dans la problématique), une partie primordiale, les avoir toutes affichées rendrait le tout très chargé et difficile à comprendre.

J’ai fait le choix de regrouper les actions dans les menus secondaires (les « … » sur chaque lignes), afin de les présenter sous forme de liste une fois que l’on clique sur ce bouton. C’est souvent l’option préférable quand le nombre d’actions d’une importance identique est élevé.

Design System de Sibra Manager

Rendus haute définitions1 - Les lignes du réseau

Il m’était difficile de conduire des tests utilisateurs puisque c’est un projet personnel, cependant j’ai quand même consulté quelques personnes pour vérifier que mes maquettes étaient lisibles, utilisables et facilement compréhensible. Après avoir fait les retouches nécessaires selon leurs avis, j’ai pu commencer les rendus haute définition, en parallèle du développement d’un petit design system, aux couleurs de l’entreprise.

L’écran le plus important de l’application, celui qui sert de « Homepage », c’est celui où l’opérateur peut visualiser les lignes du réseau ainsi que les bus et leurs positions sur ces dernières. J’ai opté pour une sélection de la ligne en cours sous forme de « radio button » plutôt que de liste déroulante. Néanmoins dans le cas d’un nombre trop important de bus, la seconde option serait à préférer.

Page "Lignes" de Sibra Manager

2 - Les bus du réseau

Un autre écran très important pour l’opérateur est celui des Bus du réseau. Un peu différent de celui des lignes actives, celui-ci répertorie tous les bus, en activité ou non, ainsi que leur dernier conducteur, leurs plein d’essence et leur capacité. J’ai choisi d’organiser celui-ci sous forme de tableau car ce sont des informations nombreuses, identiques, répétitives mais qui peuvent être triées selon des critères.

Il y a aussi la possibilité de faire des actions pour plusieurs bus à la fois, grâce à la case à cocher, ce qui peut faciliter la tâche en cas de nombre important de bus.

Page "Bus du réseau" de Sibra Manager

3 - Les collaborateurs

Les collaborateurs, pour ne pas dire conducteur, sont très important. Un bus ne se conduit pas (encore) tout seul. Cette interface permettra à l’opérateur d’être informé, en temps réel, du statut et de la position des collaborateurs actifs sur le réseau. Leurs coordonnées sont aussi affichées pour permettre d’être facilement contacté et il est aussi possible de leur envoyer un message directement, ce qui ouvre l’interface « Messages ».

Page "Collaborateurs" de Sibra Manager

4 - La messagerie

Le dernier aspect de l’application, l’un des plus important, c’est la messagerie. Interne au réseau, elle permet à l’opérateur d’envoyer facilement des messages aux conducteurs, et inversement. De plus, les nouveaux messages arrivent directement dans la barre de notifications lorsque l’opérateur est en dehors de l’interface messagerie, ce qui permet une réponse facile et instantanée à tout type de problème.

Le design diffère légèrement des autres écrans car j’ai choisi de rester dans les codes visuels des messageries classiques type Mail ou Facebook afin de faciliter son utilisation par les opérateurs.

Page "Messagerie" de Sibra Manager

Conclusion

Après Tasked, un projet de petite application mobile, j’avais envie d’un projet de type « dashboard », sur plus grand écran. J’ai suivi un process UX un peu plus réduit que d’habitude, pour plusieurs raisons expliquées plus haut, comme par exemple le fait qu’il n’y ait pas besoin d’une recherche utilisateur poussée. A l’inverse il fallait mettre l’accent sur les besoins de l’utilisateur, sur la facilité avec laquelle il pourra retrouver les informations utiles, et sur la réductions des étapes nécessaires pour qu’il puisse effectuer des actions.

J’aime beaucoup le résultat final, mais je pense que certains aspects pourraient être approfondi dans un projet à taille réelle. Par exemple la barre des notifications ne laisse pas beaucoup de visibilité si on gère énormément de bus différent, on pourrait peut-être penser à un écran dédié pour ces notifications. De même, peut-être que l’écran Collaborateur pourrait être éclairci et moins encombrés d’informations, selon les réels besoins d’un opérateur réseau.
Néanmoins je pense qu’en l’état c’est une application pratique à utiliser, facile à prendre en main. Elle permet une rapide exécution d’actions diverses.

voir le projet sur behance

projet précédent