Étude de cas - Plateforme d'éducation
Plateforme d'éducation des patients UVA
Ressources pour les patients, la famille et les proches aidants.
Projet
Site Web réactif
Chronologie
Février 2021 - En cours
Client / Opportunité d'affaires
Health Goals est un projet pilote qui vise à élargir nos offres de services au-delà de la formation médicale destinée aux professionnels de la santé. L'objectif de cette initiative est de transférer notre expertise en conception pédagogique et en éducation médicale pour développer des ressources pour les patients qui sont pertinentes, pratiques et visuellement efficaces.
Équipe
Directeur de compte
Chef de projet
Rédacteur médical
Designer UX
Programmeur
Mon rôle
Recherche, architecture de l'information, expérience utilisateur, conception visuelle
Architecture du site
Outil: Cacao
Voici l'évolution de l'architecture du site depuis la première idée et au fur et à mesure que les composants de chaque section ont été définis.
Ce schéma aide l'équipe à visualiser les informations que les utilisateurs recherchent et à lancer l'appel à l'action prévu.
Pour s'attaquer à cette tâche, j'ai divisé l'ensemble du site en morceaux pour comprendre la relation entre toutes les sections, à partir de Maladies et conditions pour demander à un médecin, où l'utilisateur peut consulter un médecin via le lien Visite virtuelle.
Il est très important de créer une structure solide dès le début, car de nouveaux contenus sur d'autres maladies et leurs traitements seront progressivement ajoutés à la plateforme sans changer sa structure.
Workflow utilisateur
Outil: Miró
Le workflow trace le point d'entrée, le point de sortie et chaque pas que l'utilisateur fait le long du plate-forme Health Goals.
Le site propose différentes sections dans lesquelles l'utilisateur peut obtenir des informations précieuses sur les maladies, les traitements et les vaccins. En remplissant la section Évaluation générale de la santé, l'utilisateur reçoit également des résultats de santé personnalisés et est invité à consulter un médecin, via le lien Visite virtuelle.
Persona
Outil: AdobeXD
Permettez-moi de vous présenter Julie Charles. Son utilisateur Persona est construit sur des informations recueillies auprès de divers profil utilisateurs, et sera utilisé comme référence pour réfléchir sur les "pain points" et les aspirations d'un Health Goals l'utilisateur peut rencontrer lors de la navigation dans l'interface.
Customer Journey Map
J'ai créé une customer journey map pour montrer les étapes suivies par nos utilisateurs au cours de leur expérience sur le Health Goals. L'objectif est de schématiser les différentes phases de l'expérience utilisateur, du début à la fin.
Avec ce diagramme, je vise à cartographier chacune des étapes, interactions, canaux et éléments que notre client traverse d'un point à un autre.
Wireframes
Outil: Balsamiq
Au début de la planification, trois zones de contenu étaient prévues pour la page d'accueil ; cependant, lors d'une réunion de suivi, il a été décidé par la suite d'opter pour deux boîtes avec la possibilité de développer la troisième à une date ultérieure.
Mon objectif avec le wireframe est de fournir une compréhension visuelle de la Health Goals site Web pour obtenir l'approbation des parties prenantes et de l'équipe avant le début de la phase de création. C'est une partie essentielle du processus de conception et d'architecture de l'information.
Directives de conception
Le principal défi de conception est d'adapter le contenu produit par les rédacteurs médicaux au style de la marque UVA Health, en assurant non seulement la cohérence avec les couleurs, la typographie et l'utilisation des images de la marque, mais également en assurant la cohérence avec le guide de style appliqué sur les autres pages UVA Health. .
Kit d'interface utilisateur
Outils: Adobe Illustrator / Adobe Photoshop / AdobeXD / Conception matérielle / Conception atomique
J'ai préparé un référentiel de symboles réutilisables que j'utiliserai dans notre interface (boutons, icônes, composants, etc.) Appliquant le principe de conception atomique, ce paquet d'éléments apportera de la vitesse à mon processus de conception, en convertissant chacun des éléments dans les composants de la bibliothèque. En conséquence, les changements deviennent plus rationalisés, m'aidant à me concentrer sur la solution plutôt que sur la construction visuelle des éléments et éliminant les incohérences à mesure que je crée plus d'éléments.
Prototype haute fidélité
Outils: Adobe Illustrator / Adobe Photoshop / AdobeXD
Comme il s'agit d'un projet qui sera présenté comme un outil de démonstration marketing et commercial, un prototype haute fidélité a été utilisé pour représenter des aspects plus précis. Il sert, par exemple, à détailler le processus interactif global d'une ou plusieurs tâches spécifiques.
Prototype interactif
Outils: Adobe Illustrator / Adobe Photoshop / AdobeXD / Conception matérielle
J'ai préparé un prototype interactif pour représenter des aspects plus précis de l'expérience utilisateur.
Il sert à voir en détail le processus interactif global d'une tâche spécifique autour de l'interface, à partir du moment où l'utilisateur se connecte pour obtenir des informations précieuses sur sa santé jusqu'à ce qu'il décide de consulter un médecin via la visite virtuelle à un stade ultérieur. Le prototype interactif donne l'impression aux utilisateurs, aux parties prenantes et aux membres de l'équipe qu'ils utilisent la version finale du produit.
