Refonte d'une application tablette

Une architecture repensée, et une interface au goût du jour
Client: Géronconsult
Année: 2022
Role: UX+UI Designer

contexte

BIBHOP, accompagner et bien vieillir à domicile

BIBHOP est une application tablette développée par Géronconsult. C'est une offre originale pour accompagner des personnes isolées et/ou des personnes fragiles, en réunissant autour d'elles - grâce au numérique - l'ensemble des proches. Le client m'a demandé de repenser l'application tout en prenant compte ses contraintes techniques.
NOTE: A ce jour, pour des raisons de confidentialités, la tablette ne peut pas être présentée en profondeur.

Site BIBHOP

Le defi

Remettre au goût du jour en s'adaptant aux contraintes

Le client développe l'application, le portail web et toute la base de données depuis des années. L'application tablette est développée en sur-couche afin de limiter la remontée des données sur Google. Cette particularité nous donne des contraintes techniques, et le design ne peut pas être remodelé à 100%.

la Mission

Concevoir une meilleure expérience utilisateur et un nouveau design d'interface

Le client travaille sur le sujet depuis maintenant 10 ans. En sollicitant mon expertise, il a pu obtenir un oeil neuf et mes compétences de designer UX/UI.

Le processus

Etudier tous les services de la tablette, pour redéfinir par ordre d'importance

Mes tâches étaient de m'apprivoiser la tablette, afin de découvrir toutes les possiblités de l'application et de restructurer le tout pour plus de compréhension. J'étais aussi responsable de refondre l'interface. Mon travail a été présenté au client et des choix de modifications ont été apportés ensuite. J'ai pu aussi présenter mon travail auprès d'utilisateurs (professionnels + bénéficiaires).
Le processus est toujours en cours, le client est en phase de test auprès d'utilsateurs. Date visée de fin de test: Fin 2022.

Méthode design thinking

Empathie

L'application proposant de nombreux services, j'ai dû parcourir la tablette et dessiner l'architecture existante pour mieux la comprendre

l'Evaluation de l'application

Une expérience utilisateur compliquée

Le but de l'évaluation était de découvrir la tablette et son fonctionnement. Quels services trouve t'on, et comment sont-ils présentés ? L'architecture est-elle optimale ? Voici les principaux problèmes que j'ai découvert.

Clarté

Une interface dépassée

L'utilisateur reçoit trop d'informations dû aux nombreuses couleurs mélangées et aux icônes.

Compréhension

L'importance du choix des mots

Des sections et des services que l'on ne comprend pas. Que trouve t'on derrière en cliquant ?

Architecture

Où trouver quoi ?

"Notifications" et "Alertes" dans la section "bien-être". Un espace perso avec seulement un service.

Exp. utilisateur

Trop de cliques pour arriver à ses fins

Dû a une mauvaise arborescence et au choix des mots. Ex: Agenda, 3 cliques pour afficher une date.

Accueil tablette avant

test d'utilisabilité

Des doutes confirmés

Le client connaissant déjà sa cible utlisateur, je n'ai pas eu besoin de faire de recherche utilisateurs. Je suis donc directement passer à l'étape de test. J'ai pu faire tester la tablette par 5 personnes. 2 personnes d'environ 60 ans ayant un smartphone et peu connectés, et 3 personnes d'une trentaine d'années, beaucoup plus connectées. Voici quelques retours.

Il serait bien d'avoir mes services favoris en première page.

Beaucoup d'informations non utiles (Ecosysteme, Mes données ...).

Trop de choix derrière chaque service.

L'interface est vieille.

Les explications sont longues et donc non lues.

On ne comprend pas les intitulés des sections

Idéation

Les tests utilisateurs, une étape obligatoirement

Arborescence

Représenter l'arborescence pour mieux la comprendre

Après avoir tester en profondeur la tablette, j'ai mis à plat l'arborescence afin de me donner une vue globale.

Arborescence originale

Faire le tri

En prenant cette arborescence, j'ai décidé de mettre en évidence les services importants, qui pourraient directement être sur la page d'accueil. Et ceux "moins utiles", qui n'intéresse pas l'utilisateur à première vue. Ci-dessous la même arborescence, en jaune les services importants, en gris les moins utiles.

Tri durant l'arborescence

Repenser l'arborescence et le vocabulaire

En plus de supprimer des sections pour réduire le nombre d'informations à l'écran, j'ai opté pour un changement des mots/titre de certaines sections et services car ils n'étaient pas compréhensibles. Les services "moins utiles" seront mis plus loin dans l'arborescence.

Arborescence après
Suppression des sections "Espace perso", "Service" "Bien-être" et "Quotidien". Création de "Réglages", "Mon espace" et "gérer ma tablette". Changement de noms pour d'autres services pour plus de compréhension.

Prototyper

Avec cette nouvelle arborescence et en prenant en compte les contraintes techniques du client, la refonte d'interface peut commencer.

contraintes

Une refonte partielle, seulement

Comme expliqué auparavant, le client ayant lui même programmé son application, il y avait des contraintes à respecter.

Contrainte application BIBHOP

le design

Ne pas modifier les habitudes

Comme le précise la loi de Jacob (Nielsen), les utilisateurs passent plus de temps sur les autres site que sur le notre. Il ne faut donc pas tout ré-inventer. Je suis parti de ce principe pour le choix des mots (Nouveau service "Réglages" par exemple), pour le choix du design d'interface (Agenda, Message ...), ou bien même pour les icônes.

Ancienne icône Réglage
Nouvelle icône Réglages

Icônes BIBHOP. Beaucoup de couleur, d'informations. Pas toujours en rapport avec son nom.

Nouveaux icônes. Design Flat, une couleur (rappel avec le orange du logo) et déjà connu des utilisateurs.

Ancien agenda
Nouvel Agenda

Agenda BIBHOP. Compliqué à la lecture. Beaucoup de couleurs. Choix affichage semaine / mois à faire avant, générant plus de cliques.

Nouvel Agenda. Epuré, choix semaine / mois accessible depuis la même page. Copié de grand groupe comme Google ou Apple.

situation avant

Un environnement complexe

Ne pouvant pas montrer l'intégralité du fonctionnement de la tablette, voici quelques photos de l'interface de l'application au départ.

Section mon bien être avantSection Agenda  avant

Le prototype

Cliquable, plus facile pour le client et les utilisateurs

J'ai proposé au client un prototype haute fidélité cliquable, en ne développant que le 1er et 2ème niveau de l'architecture. Si cela lui convient et qu'il choisit les modifications, je pourrai continuer à developper le reste.

Accueil nouvel interface

Tester

Après la présentation de mon travail au client, il fallait maintenant qu'il décide ce qu'il souhaiter garder ou non.

Des tests concluant

J'ai pu faire tester le prototype aux 5 personnes mentionnées ci-dessus. Tous étaient unanimes: L'interface est plus fluide, dans "l'ère du temps", les services sont compréhensibles. L'expérience utilisateur globale est grandement améliorée.

Section message nouvel interface

Les choix du client

De la V1 à la V2.

Le temps manque

Le client souhaitant commercialiser sa tablette d'ici la fin de l'année, et étant seul pour l'intégration des modifications, elles ne pouvait pas êtes toutes réalisées.
Au jour d'aujourd'hui, l'architecture -point crucial-, les icônes, quelques couleurs et même le portail BIBHOP ont été modifiés

Portail BIBHOP

Nouveau portail, plus épuré, moins de texte et avec les nouveaux icônes.

Tests en cours

la V2 client en test aujourd'hui

Une V3, pour plus tard

Manque de temps, le client test aujourd'hui la V2 mise à jour à 80% avec mes propositions. Il doit commercialiser la tablette pour l'évaluer, pouvoir se projeter plus loin et penser aux futures modifications.
Aujourd'hui, et ceux jusqu'à la fin de l'année 2022, sa tablette sera distribuée pour effectuer des tests et avoir un maximum de retours.

et ensuite ?

Prochaine étape

Je reste régulièrement en contact avec le client afin d'avoir l'avancée de ses travaux. Quand je peux, je participe aussi aux tests de la tablette afin de mieux comprendre les futurs utlisateurs.
L'histoire BIBHOP continue !

Remerciement

Une remise en question

Merci à Christophe, dirigeant de Géronconsult, de m'avoir donné sa confiance. Merci aussi à l'équipe d'avoir pris en compte mes retours, et de remettre en question la solution après tant d'années de travail.

En cliquant sur "Accepter tous les cookies", vous acceptez le stockage de cookies sur votre appareil pour améliorer la navigation sur le site, analyser l'utilisation du site et contribuer à nos efforts de marketing.