Minder
Application de santé mentale et de toxicomanie
Minder est une application de santé mentale et de toxicomanie en ligne en cours de développement par le Mental Health Systems and Services Laboratory de l'Université de Colombie-Britannique. Destinée aux étudiants universitaires canadiens, Minder vise à aider les utilisateurs à acquérir les compétences nécessaires pour gérer les problèmes communs de santé mentale et de toxicomanie, en plus de promouvoir la résilience et la création de liens sociaux. Pour ce faire, l'application fournit des compétences et des infos fondées sur des données scientifiques à tout utilisateur qui a des problèmes de santé mentale ou qui souhaite simplement accroître sa capacité d'adaptation dans sa vie quotidienne.
​
Minder est développé dans le cadre d'une étude de recherche plus vaste financée par Santé Canada, qui vise à déterminer la fréquence des problèmes de santé mentale chez les étudiants universitaires, l'impact de ces problèmes sur le bien-être général des étudiants et les outils qui pourraient être efficaces pour résoudre les problèmes de santé mentale des étudiants. Mon rôle dans ce projet, avec la co-conceptrice Mona Li, était de concevoir l'interface utilisateur (IU) de l'application Minder, ainsi que certains aspects de son expérience utilisateur (EU), en vue du lancement de l'application dans le cadre d'un essai comparatif aléatoire. L'application sera éventuellement disponible gratuitement à tous les étudiants universitaires du Canada.
Client : Dr Daniel Vigo, MD, Lic. Psych, DrPH
Public cible : étudiants universitaires canadiens de premier cycle et de deuxième cycle (population subclinique)
Format : IU et EU pour mobile (iOS et Android)
Médium : Adobe Photoshop, Adobe Illustrator, Figma, InVision
Date : mai 2021
Processus de travail
Lorsque nous nous sommes jointes au projet, le laboratoire Vigo avait déjà mené des recherches sur le public cible de l'application et avait commencé à concevoir l'interface utilisateur (IU) du produit. Nous avons été chargés d'achever la conception de l'IU. Nous avons proposé un processus de conception centré sur l'utilisateur impliquant la compréhension de l'espace du problème, la familiarisation avec la recherche utilisateur existante et la création de la documentation sur l'expérience utilisateur pour guider notre travail de conception de l'IU.
Personas utilisateurs
Avant de nous lancer dans la conception de l'IU, nous avons visé à mieux comprendre les utilisateurs de l'application et à créer des personas d'utilisateurs pour guider notre prise de décision en matière de conception. Nous avons travaillé avec l'équipe du labo Vigo afin d'identifier un total de 4 groupes d'utilisateurs, qui ont ensuite été classés par ordre de priorité en fonction de leur importance relative dans le cadre du projet. Cela nous a donné deux personas principaux et un persona secondaire :
-
Nouveaux étudiants universitaires canadiens de première année qui vivent hors de chez eux pour la première fois (persona principal)
-
Étudiants universitaires de quatrième ou cinquième année désabusés (persona principal)
-
Étudiants internationaux (persona secondaire)
​​
Notre travail de conception s'est ensuite concentré sur la satisfaction des besoins des deux personas principaux, avec quelques ajustements pour répondre aux besoins du persona secondaire.
​
Il est important de noter que nous avons utilisé ces personas pour développer davantage les exigences préliminaires de l'application en matière de fonctions et de contenu (fournies par le labo Vigo), et pour tester et valider des décisions de conception au cours des étapes ultérieures du travail.
Architecture de l'information & wireframes
On nous a fourni une structure préliminaire pour l'application basée sur ses trois fonctionnalités clés (prédéterminées par Vigo Lab, sur la base d'une recherche sur le public cible). Nous avons travaillé avec leurs maquettes d'interface existantes pour déterminer une architecture d'information préliminaire et pour extraire toutes les exigences de conception pertinentes, que nous avons incorporées dans des wireframes de basse fidélité.
En collaboration avec l'équipe du labo, nous avons ensuite abouti au concept d'une carte exploratoire autour de laquelle nous avons basé les itérations suivantes des wireframes, où nous avons capturé les parcours utilisateurs et les éléments clés de l'interface et des interactions pour chaque écran de l'application. De nouvelles itérations des wireframes ont permis d'affiner l'architecture de l'information.
Look Development
Palette de couleurs
Le labo Vigo voulait que l'application Minder sente :
-
Conviviale
-
Positive
-
Chaleureuse
-
Soutenante
-
Invitante
​
Ils ont également identifié Headspace comme une application qu'ils aimaient et qu'ils trouvaient efficace pour atteindre son public. Sur la base de ces informations, nous avons proposé un style d'illustration de dessin animé avec une certaine abstraction et une impression de dessin à la main qui communiquerait l'accessibilité et la fantaisie. Nous avons également proposé plusieurs styles d'imagerie à incorporer dans le concept de la carte exploratoire; le client a choisi une approche centrée sur les personnages.
​
Nous avons conçu deux types principaux de cartes - une pour la page d'accueil et une pour les pages de ressources - qui ont fait l'objet de plusieurs itérations avant de finaliser leur présentation et leur fonctionnalité.
Maquettage d'interface & documentation
Sur la base de nos wireframes et de notre travail de look development, nous avons créé de multiples itérations de maquettes d'interface complètes à des niveaux de fidélité croissants. Cela impliquait la création de tous les éléments et illustrations de l'IU, ainsi qu'une documentation détaillée de parcours utilisateur, étant donné que la création de prototypes fonctionnels n'entrait pas dans le cadre de notre travail. Les personas, ainsi que les commentaires et les exigences du client et des parties prenantes, ont constitué la principale base d'évaluation pour chaque itération de maquettes. Le labo Vigo a sollicité des commentaires du public cible pour des aspects clés des conceptions. Les conceptions finales ont été basées sur les Human Interface Guidelines d'Apple (pour iOS) et sur le Material Design de Google.
Exemples d'itérations de maquettes d'interface : première expérience de l'utilisateur et connexion
.png)
En plus des maquettes de haute-fidélité, nous avons préparé une documentation détaillée sur la conception destinée à l'équipe de développement, qui travaille actuellement à la mise en œuvre de nos conceptions sur iOS et Android. Une fois construites, l'application fera l'objet de tests auprès des utilisateurs finaux ciblés, menés par le labo Vigo. Les commentaires sur l'interface utilisateur et l'expérience utilisateur recueillis pendant cette période devraient permettre d'affiner la conception avant le lancement public de l'application.
Documentation de conception pour l'équipe de développement : iOS (ci-dessus) et Android (ci-dessous)
