Ontel - alexandra-webdesign

Après ma formation de Webdesigner, j’ai choisi de continuer à me former seule. J’ai donc commencé par une formation de Product Designer via Udacity avant de m’intéresser davantage à l’UX Design. Le rôle du Product Designer est plus proche de l’entreprise, du business, alors que l’UX s’intéresse plus à l’utilisateur. Pourtant, les deux rôles me semblent bien similaires en objectif : réaliser le meilleur design possible pour qu’un produit soit « parfait » pour son futur utilisateur, qu’il soit une société ou un simple consommateur.

J’ai donc décidé de me lancer un défi, concevoir une application en une journée sur un thème qui m’est cher : venir en aide aux autres. Pour cela, quoi de mieux que de commencer par une application pour les personnes âgées, plus particulièrement celles vivant en EHPAD. En effet, si la plupart des gens ont souffert de l’isolement périodique durant la Covid, que dire de ceux qui n’ont pas d’autre choix que d’être placés dans un milieu inconnu, isolés de tout ce qu’ils connaissent ?

Mon processus de réflexion

J’ai commencé par écrire le contexte pour lequel l’application serait créée. Ensuite j’ai résumé mon rôle en tant qu’UX/UI Designer et j’ai créé le nom de l’application : Ontel.

Selon les nombreux ouvrages que j’ai pu lire et les formations que j’ai suivies, mon travail devrait se dérouler en 6 étapes :

comprendre
définir
diverger
décider
prototyper
valider

Bien évidemment, en une journée et seule je ne peux réaliser véritablement toutes ces étapes. Cependant, j’ai poussé mes recherches sur la partie compréhension puisqu’elle est la principale source d’inspiration lors d’un projet.

La compréhension des utilisateurs d'Ontel

J’ai découpé ma phase de compréhension des futurs utilisateurs en 2 grands axes :

le benchmark
les recherches ethnographiques

Pour la première partie, j’ai fait une courte étude du marché. Il me fallait des informations sur les personnes vivant en EHPAD en France (leur âge, nombre…). Ensuite, il me fallait faire une analyse des concurrents. Bon nombre d’applications et services existent pour aider à communiquer. J’ai donc fait une brève liste des applications d’échange que je connaissais.

Si j’avais eu plus de temps j’aurais poussé l’analyse sur chacune des applications avec une personne âgée pour voir quels étaient les points négatifs et positifs de chacune. Ainsi j’aurais pu voir ce qu’il me fallait garder et modifier afin que cela soit simple d’utilisation.

Avec ces premiers éléments, j’ai réalisé une étude ethnographique de potentiels utilisateurs. J’ai donc défini quels seraient les futurs utilisateurs et pourquoi ils l’utiliseraient. J’ai ensuite réalisé une analyse des états d’esprit de chaque « cible » avant de penser à réaliser des interviews. Pour cela j’ai pensé à plusieurs options. La première serait les interviews. Rencontrer directement des personnes en EHPAD et leur famille/amis pour mieux les comprendre me semble la meilleure des options. Cependant, si les rencontres physiques sont parfois difficile voire impossible, je pourrais également disposer de formulaires à remplir. Une fois les interviews/questionnaires terminés, des personas se révèlent.

Création de l'application

J’ai commencé par définir les différents éléments qui devraient être présents dans l’application :

messages
appels
visio
partage de souvenirs
jeux

En effet, même si l’application est à la base prévue pour continuer de faire du lien entre les personnes placées en EHPAD et leur famille, les points 4 et 5 me semblent essentiels.

Lorsque l’on se retrouve seul, dans un milieu que l’on ne connait pas, on a besoin de s’occuper et de se raccrocher à quelque chose. Les personnes placées en EHPAD sont généralement dépendantes, voire très dépendantes. Les souvenirs et moments vécus par leurs proches peuvent leur redonner le sourire à n’importe quel moment. De plus, il est bien connu que les jeux sont un excellent moyen de rapprocher les gens mais aussi de faire travailler son cerveau. Cela peut donc aider les personnes atteintes de troubles à faire des progrès en s’amusant.

Par la suite, j’ai créé plusieurs zonings (low fidelity) sur papier de ce que pourrait être l’application. Dans le premier j’aurais aimé retrouver les 5 points les uns après les autres, afin que cela soit simple et clair pour les personnes les plus en difficulté. Cependant, je me suis vite rendue compte que messages, appels et visio étaient trop similaires. Il fallait à chaque fois choisir son destinataire dans la liste des contacts…

J’ai donc décidé de n’avoir que 3 choix sur la page d’accueil. Le premier choix est réservé aux contacts, le second aux souvenirs et le dernier aux jeux.

Visuels sur Figma

Après avoir décidé de ce qui apparaîtrait sur l’application, j’ai décidé de pousser le principe sur l’aide des personnes vivant en EHPAD. Puisque la moyenne d’âge des EHPAD est d’environ 85 ans, je pars du principe qu’une plus grande interface leur sera préférable. C’est pourquoi j’ai réalisé mon wireframe sur une version tablette et non pas mobile. Les personnes âgées étant mon cœur de cible cela me semble légitime. L’application sera bien sûr également utilisable sur mobile, mais en une journée de travail, il me fallait faire un choix.

Recherche de fonts

Puisque je souhaitais réaliser un wireframe et non un zoning plus propre sur figma, il me fallait le premier élément : la police d’écriture.

J’ai donc décidé de chercher différentes polices bien spécifiques. Pour répondre aux besoins des personnes âgées, il me fallait des fonts sans-sérif. En effet, cela les rend plus simple à la lecture. Des fonts variables permettent d’avoir des textes en medium ou gras, ce qui peut être très pratique pour également aider à la lecture. En dernier critère, l’épaisseur de la font, car trop fine elle peut être illisible.

J’ai choisi d’analyser 4 fonts :

Segoe UI
Nunito
Heebo
Merriweather sans

La première, Segoe UI, est utilisée dans la plupart des applications de communication comme whatsapp et messenger. Ils ont choisi cette font parce que les « o » et « a » se distinguent facilement et qu’elle est sans-sérif. Cette font m’a alors confirmée dans mon analyse.

Pour me distinguer, il me fallait donc choisir l’une des 3 autres fonts que j’avais sélectionnées. Pour cela, j’ai écrit chaque lettre en minuscule, puis en majuscule dans chaque police. Afin de rendre la compréhension plus claire, j’ai choisi une phrase contenant toutes les lettres de l’alphabet et je l’ai écrite en majuscule et en minuscule également. En les plaçant les unes à côté des autres, mon choix a été évident. Puisque je souhaitais une police épaisse, je devais prendre la Merriweather sans.

Pour réaliser mon wireframe, j’ai choisi différentes teintes dans les noirs et blancs afin de distinguer plus aisément chaque élément. Cela me permet également de connaître le futur nombre de couleurs dont j’aurais besoin pour les prototypes.

L'application Ontel

J’ai choisi de m’intéresser directement à la réalisation des contenus plutôt que de réaliser également la création du profile de l’utilisateur n’ayant que peu de temps pour tout réaliser. En page d’accueil, on retrouve ainsi les 3 éléments essentiels : les contacts, le partage de souvenirs et les jeux, mais aussi le profil de l’utilisateur. J’ai choisi d’utiliser des icônes qui parlent facilement aux personnes âgées. En effet, bon nombre ont un carnet dans lequel tous leurs numéros et adresses de contacts sont inscrits. Pour les souvenirs, ils sont quelques rayons de soleils dans la vie de chacun, rare sont les personnes qui partagent de mauvais souvenirs avec les autres. Et pour les jeux… Pacman me semblait être la meilleure option…

Mon choix de séparer ces 3 éléments peut sembler étrange, pourtant, il y a une bonne raison. Combien de personnes passent leur temps à scroll pour atteindre une photo partagée dans une conversation ? Un film ou une musique ? Beaucoup trop, et les personnes âgées peuvent avoir des difficultés à effectuer cette action. Ce qui les fera abandonner leur recherche ou même pire, l’application en elle-même. De plus, cela me permettait de concevoir un classement par date dans les souvenirs. Ainsi il est plus simple de retrouver un souvenir précis.

Pour les jeux, on peut retrouver le fait de se téléphoner ou se voir en visio en même temps que l’on joue, selon le jeu. Mais pour rendre l’application plus simple, je n’ai pas conçu un bouton spécial de jeu dans les appels et visio. Cela évite les accidents de clic selon la taille du média utilisé.

Une fois le wireframe réalisé, il m’aurait fallu le tester. Pour cela, j’aurais choisi de le faire avec des utilisateurs en temps réel pour avoir leurs ressentis. Cette étape m’aurait permis de savoir ce qu’il y avait à modifier et à conserver dans mon design. Si les rencontres et tests n’étaient pas possible en présence d’utilisateurs (pour raison de Covid ou autre) j’aurais choisi de la faire tester sur Maze. En effet, Maze permet de savoir en combien de temps chaque étape de test a été effectuée, où se trouvent les zones de clics et d’erreurs mais aussi d’enregistrer les personnes en direct si elles l’acceptent.

Charte graphique d'Ontel

Ayant déjà choisi les différentes polices d’écriture et les différents icones de l’application, il ne me restait plus qu’à trouver les couleurs les plus adaptées. Pour cela, j’ai choisi d’utiliser les couleurs de plusieurs entreprises liées au milieu.

Afin de rendre l’application utilisable aussi bien en mode jour que nuit, il me fallait choisir des couleurs reconnaissables et modifiables. En effet, certaines couleurs pour être utilisées sur fond clair et sombre doivent être radicalement modifiées au point de ne plus reconnaître la couleur de base.

Pour éviter cela, j’ai choisi une première couleur dans ma liste qui est utilisée partout : le bleu. Il me fallait alors prendre 2 autres couleurs allant avec le bleu et très distinctes de cette dernière : le orange et le violet. Ces trois couleurs vont très bien ensemble et les modifier n’est pas très complexe.

Pour pousser encore plus loin mon choix de couleurs, j’ai voulu vérifier leur compatibilité avec les problèmes de vue. En effet, j’ai eu la possibilité, dans mon précédent métier, d’être confrontée à quelqu’un ne voyant pas les couleurs. Cette personne voyait tout en teintes de gris, et certaines teintes sont bien trop proches les unes des autres pour être distinguables. Imaginer que cette personne ne puisse profiter d’internet à cause de ce handicap me rend triste, c’est pourquoi je pousse toujours mes recherches sur les couleurs un peu plus loin. Pour cette application, il en va de même.

J’ai donc testé différentes pathologies visuelles pour m’assurer que mes choix seraient évidents à reconnaître. Et ce, aussi bien dans les teintes claires que les teintes sombres. J’ai donc testé 8 pathologies visuelles différentes, et tout semble correcte.

La charte graphique définitive d'Ontel et un premier visuel

Pour terminer la charte graphique, il me fallait regrouper la font, les couleurs et les icones que je souhaitais utiliser. Pour terminer ma journée de défis, j’ai réalisé un prototype de la page d’accueil en light mode, et un autre en dark mode. Afin de rendre le tout plus réaliste, j’ai réalisé un mockup d’une personne âgée tenant une tablette avec l’application et un montage des deux modes.