Aperçu du projet
Défi personnel de conception d’une application pour les personnes âgées, leurs familles et proches en une journée.
Contexte
En tant que webdesigner débutante, j’ai choisi de continuer à me former seule, dans un premier temps à l’aide de vidéos et lectures, afin de mieux comprendre l’UX/UI design. Pour cela, j’ai choisi de me lancer un défi qui regrouperait au maximum ce que j’avais pu apprendre, le tout en une seule journée.
« Une compagnie souhaite apporter un nouveau produit sur le marché, une application pour aider les personnes âgées placées en EHPAD à interagir, garder le contact avec leurs proches. Le projet n’est encore qu’à son balbutiement et l’entreprise a besoin de connaître ses potentiels utilisateurs et leurs besoins. »
Quand était-ce ?
Octobre 2021
Mon rôle
concepteur d’expérience ; webdesigner ; graphiste
Les défis du projet
- temps limité à 1 journée
- concevoir une identité visuelle
- concevoir une application optimisée pour les personnes âgées et leurs proches
- optimiser l’accessibilité pour tous les utilisateurs
Mes solutions
- se concentrer sur la conception de l’application en wireframes
- réaliser un logo et une charte graphique
- être dans le minimalisme au maximum pour faciliter l’appréhension de l’outil
- tester différentes couleurs en terme de visibilité et adapter les fonts utilisées
Responsabilité de conception
- concevoir une identité visuelle pour l’application
- réaliser un benchmark et des recherches ethnographiques
- concevoir des wireframes de différents niveaux
- réaliser la maquette de l’accueil
Mon approche
Pour cette création complète, je vais utiliser les 6 étapes de gestion de projet de l’UX/UI design autant que possible, que ce soit pour la phase de création d’identité de marque ou celle de l’application. Cependant, avec la contrainte de temps, il ne m’était pas possible de tester le prototype avec des utilisateurs pour validation. Les seuls tests effectués ont été ceux pour l’identité visuelle.
Comprendre
Etape 1
- benchmarks
- étude ethnographique
Définir
Etape 2
- vision du produit
- cas d’utilisation
Diverger
Etape 3
- identité visuelle
- zoning/wireframing low-fi
Décider
Etape 4
- wireframing mid-fi
- maquettes
Prototyper
Etape 5
- prototype figma
Valider
Etape 6
- tests de l’identité visuelle
Comprendre
Etape 1
- benchmarks
- étude ethnographique
Définir
Etape 2
- vision du produit
- cas d’utilisation
Diverger
Etape 3
- identité visuelle
- zoning/wireframing low-fi
Décider
Etape 4
- wireframing mid-fi
- maquettes
Prototyper
Etape 5
- prototype figma
Valider
Etape 6
- tests de l’identité visuelle
Etape 1 : Comprendre
Objectif
Comprendre le milieu dans lequel se situe l’application, connaître ses concurrents, ses utilisateurs.
Au cours de la phase de recherche, j’ai commencé par une étude de marché et une courte analyse concurrentielle. Pour comprendre au mieux les besoins des futurs utilisateurs il faudrait également réaliser une enquête, des interviews…
Les défis du projet
Pour réaliser un benchmark, j’ai dû chercher des informations sur les EHPAD et leurs habitants. Cependant, on ne trouve que peu d’informations sur les occupations de ces habitants, uniquement des statistiques sur leur âge et leur nombre.
Ainsi, les EHPAD ne prennent comme résidents que des personnes à partir de 60 ans. De plus, la majorité sont atteintes de grandes dépendances, ne pouvant pas rester au quotidien en hôpital car trop demandant pour le personnel, ou avec leurs proches.
La majorité des résidents sont des femmes, ce qui peut également s’expliquer puisque les femmes vivent plus longtemps que les hommes. 90% des résidents d’EHPAD en France ont 75 ans ou plus.
Etape 2 : Définir
Objectif
Définir qui sont les utilisateurs, ce qui pourrait améliorer leur expérience au quotidien.
Afin de mieux définir les besoins des utilisateurs et comment les aider au mieux, il faut commencer par définir qui sont les cibles. Qui va se servir de l’application, pourquoi et comment. Une fois avoir défini qui sont les utilisateurs, on peut se concentrer sur ce qu’ils attendent en priorité.
La définition des cibles
A l’aide des précédentes recherches, j’ai pu définir une liste de cibles potentielles pour l’application. Je me suis par la suite concentrée sur la réalisation de deux personae. Ces deux personae me permettent de me concentrer à tout moment sur les besoins des utilisateurs et comment ils pourraient réagir face à mes futures réalisations pour Waze.
Les interviews utilisateurs
Afin de rester dans les temps impartis du défi, je n’ai pas pu réaliser d’interviews. Cependant, j’ai créé un début de recherche utilisateurs. Pour cela, je commencerait par rechercher de potentiels utilisateurs, environ 10 participants pour chaque catégorie ciblée. Cela pourrait être une interview physique ou un simple questionnaire envoyé via Google form par exemple. Ces deux types d’interviews présentent chacune des points forts comme des points faibles et dépendent de la disponibilité des participants. Je verrai bien également des interviews d’une famille entière afin de recueillir divers avis proposés simultanément comme lors d’un débat. Je diviserai ces interviews/questionnaires en 4 phases :
- introduction (courte présentation du projet)
- présentation des personnes interrogées (identité, utilisation d’internet et des médias sociaux, équipements utilisés, est-ce que les participants croient aux avis publiés sur internet, quels outils utilisent-ils pour communiquer…)
- questions sur le projet (quels seraient leurs besoins par rapport au projet, est-ce qu’ils connaissent une application ou autre qui pourrait déjà convenir à ces besoins, questions sur le contenu, les informations nécessaires, les fonctionnalités proposées ou celles qu’ils souhaiteraient voir…)
- questions ouvertes (qu’est-ce que l’entreprise pourrait proposer que les autres n’ont pas, qu’est ce qu’ils voudraient, s’ils ont des éléments supplémentaires à partager…)
Les conclusions du test
En demandant rapidement à des membres de ma propre famille, j’ai pu noter pourquoi ils pourraient utiliser cette application :
- avoir des nouvelles (de leurs amis, de leur famille)
- avoir des contacts de l’extérieur (en période de Covid les proches ne peuvent visiter les personnes en EHPAD)
- regagner de l’autonomie (application utilisable seul)
- s’amuser (avoir des activités en ligne avec des amis, des proches lorsqu’ils n’ont rien d’autre de prévu)
Par la même occasion, ils m’ont rappelé quelques besoins qui pourraient être un plus dans l’application :
- une police d’écriture épaisse
- distinguer les différentes fonctionnalités d’un coup d’œil
- faire des recherches rapidement
- avoir des icones larges et simple à reconnaître/comprendre
- avoir un control vocal
Etape 3 : Diverger
Objectif
Noter un maximum d’informations et d’idées, concevoir des zonings de pages, crayonner des idées de logo…
Lors de l’étape de divergence, je note tout ce qui me vient sur la fonctionnalité que je vais mettre en place. Que ce soit sous forme de listes, de définitions, de directions ou de modules que j’ai pu voir ailleurs. Je réalise également des zonings ou wireframes lo-fi selon ces idées. Il en va de même pour la conception d’une identité visuelle.
Premières idées
Dans ces exemples de divergences on retrouve quelques idées et explications de chacun des éléments. On peut également voir plusieurs cheminements représentant les interactions entre les pages et les divers éléments envisagés.
C’est également à cette étape que plusieurs noms d’application me sont apparus. Je me suis laissée le choix entre :
- EHPADial
- Ontel
- ViesLiées
- FamUnity
- ConnectFam
Quant au logo, j’ai noté plusieurs éléments pouvant être utilisés en lien avec l’application :
- téléphone
- famille
- personnes âgées
- amour
- communication
- foyer
Etape 4 : Décider
Objectif
Décider quelles idées sont celles à suivre selon les besoins des utilisateurs, lesquelles sont les plus simples à comprendre et suivre.
Pour cette étape de décision, il faut peser le pour et le contre de chaque idée envisagée précédemment. Certaines peuvent être un bon début, d’autres trop complexes ou redondantes par exemples. Il faut également vérifier que les idées de logo puissent fonctionner dans diverses situations et être compréhensibles pour tous. Cette phase est décisive pour la bonne continuation de la suite du projet.
Identité de marque
Pour concevoir l’identité de marque de l’application il me fallait un nom, j’ai décidé de choisir Ontel. En effet, ce nom peut aussi bien se lire en français qu’en anglais, ce qui permettrait à l’application de trouver sa place à l’international.
Pour les couleurs, j’ai décidé de me baser sur celles dune compagnie s’occupant de personnes âgées. En partant de ces diverses couleurs j’ai pu concevoir une palette de couleurs limitées fonctionnant aussi bien en mode clair que sombre.
Pour les fonts, j’ai fait le choix de n’en prendre qu’une seule, ce qui permet de rester dans la minimalité. Pour avoir un design minimaliste, il me fallait une font simple à lire. Dans mon précédent métier d’enseignante j’avais pour spécialisation les besoins éducatifs particuliers. Je me suis donc familiarisée avec les polices d’écriture afin de savoir lesquelles sont les plus lisibles selon différents troubles. Je me suis servie de ces connaissances ainsi que des cibles de l’application pour concevoir une liste de 4 propositions :
- Segoe UI
- Nunito
- Heebo
- Merriweather sans
Chacune pouvait correspondre aux besoins de l’application. Néanmoins, j’ai choisi de me concentrer sur la Merriweather sans car elle a l’avantage d’être déjà assez épaisse. Ainsi, cette spécificité permet aux personnes âgées de n’avoir aucun mal à lire les différents textes envoyés par des proches comme ceux appartenant de base à l’application.
Pour le logo, j’ai choisi de représenter un ancien téléphone fixe. Celui-ci a pour élément de composition des numéros un cœur représentant la famille et les proches. De plus, toutes les générations connaissent le symbole du combiné téléphonique. J’ai repris 2 des couleurs de la palette faisant un plus grand contraste. Pour la police utilisée, j’ai choisi Rokkitt car ses lettres pouvaient aisément se faire remplacer par des éléments du logo.
Premiers choix de fonctionnalité
Pour mes wireframes, j’ai choisi de les concevoir sous forme de tablette. En effet, les personnes âgées sont plus enclines à se servir de tablettes car plus grandes que de téléphones portables bien souvent trop petits et difficiles à manipuler. Dans ces wireframes on peut voir la homepage qui mènera à 3 chemins spécifiques ainsi qu’au profil de l’utilisateur. J’ai choisi de rester dans des éléments très simples, limités, sans fioritures afin de permettre aux utilisateurs de rapidement repérer les différentes fonctionnalités :
- les contacts (pour pouvoir échanger avec eux par messages, téléphone ou même visio)
- les partages (de photos, vidéos ou sons, sur lesquels les utilisateurs peuvent également mettre un commentaire)
- des jeux (à faire seul ou avec ses contacts selon les disponibilités afin de s’occuper)
Je n’ai réalisé en maquette avec couleurs que la première page de l’application à cause du temps. J’ai néanmoins pu le faire en utilisant les couleurs pour un thème sombre comme pour un thème clair. Ainsi, les utilisateurs auraient le choix, voire on pourrait imaginer que l’application réagirait selon la luminosité ambiante.
Etape 5 : Prototyper
Objectif
Rendre ses choix plus concrets, réels, concevoir les maquettes finales des fonctionnalités avec leurs interactions.
Lors de l’étape de prototypage, les designs précédents ont été suffisamment réfléchis et analysés pour vouloir les tester. Dans cette étape, il faut réaliser toutes les interactions que rencontrera l’utilisateur, aussi bien les mouvements de boutons, les hovers, les changements de page…
Prototype rapide
Avec la contrainte de temps que je m’étais imposée, je n’ai pu que rendre interactifs le wireframe déjà effectué sur Figma.
Etape 6 : Valider
Objectif
Valider, modifier ou invalider les choix effectués précédemment lors de tests utilisateurs ou travaux d’équipe.
Cette dernière étape de validation est cruciale. En effet, selon les résultats des tests effectués seuls 3 choix sont possibles :
- test validé : la fonctionnalité est transmise aux équipes de productions
- test à modifier : de légers changements sont à effectuer
- test non validé : la fonctionnalité est à revoir partiellement ou entièrement et il faut refaire toutes les étapes
Analyse visuelle
N’ayant encore pas le temps pour contacter des testeurs et avoir leurs avis sur le prototype, le seul test que j’ai pu effectuer a été réalisé sur les couleurs de l’application. En effet, il ne faut pas oublier que les personnes âgées sont aussi celles qui ont statistiquement le plus difficultés pour voir. Il faut donc que les couleurs soient assez contrastées et différentes selon diverses pathologies.
