Meedika App
Proceso de investigación y diseño
IDENTIFICACIÓN DEL PROBLEMA Y OBJETIVOS INICIALES
El objetivo inicial de Meedika era centralizar y simplificar el acceso a la información médica de los usuarios y sus familias, empoderándolos para administrar y compartir esta información de manera segura y controlada. Para ello:
• Se investigaron las principales frustraciones y necesidades de los usuarios relacionadas con la gestión de información de salud.
• Se identificaron benchmarks de aplicaciones de salud como MyChart, Medisafe y HealthVault, enfocándonos en la experiencia del usuario, accesibilidad y seguridad.
CREACIÓN DE IDENTIDAD VISUAL
• Diseño del logotipo
El logotipo fue conceptualizado considerando el golden ratio de Fibonacci para garantizar armonía visual y transmitir confianza, profesionalismo y accesibilidad. Además se rediseñó un concepto previo generado por los stakeholders que presentaba varias deficiencias de diseño en lo correspondiente a lectura y adaptabilidad.
• Decisión de paleta de colores
Los colores y tipografía se eligieron basados en estudios de percepción, optando por tonos suaves que evocan calma y salud, como verdes y azules.
Todo ello en el marco de la creación de un Sistema de diseño basado en diseño atómico.
• Creación de Manual de marca
Manual de marca puede descargarse libremente aquí
INVESTIGACIÓN DEL USUARIO
• User Personas
Se desarrollaron tres user personas principales con base en entrevistas y encuestas realizadas a potenciales usuarios:
⚬ Usuario Individual: Adulto que desea centralizar su historial médico.
⚬ Administrador Familiar: Persona encargada de la salud de su núcleo familiar.
⚬ Médico: Profesional de la salud que busca acceder rápidamente a información precisa del paciente.
Cada persona incluyó datos como metas, frustraciones, hábitos tecnológicos y contexto de uso, lo que permitió priorizar funcionalidades críticas.
• Mapeo de Empatía y Journeys
Se utilizaron mapas de empatía y journey maps para identificar puntos críticos en la experiencia del usuario. Esto destacó la necesidad de:
⚬ Un diseño intuitivo para navegar entre secciones.
⚬ Acceso sin fricción a datos críticos en emergencias (funcionalidad SOS).
⚬ Opciones claras de personalización y control de datos.
DISEÑO DE ARQUITECTURA DE INFORMACIÓN
El diseño de IA fue iterativo y validado con card-sorting y pruebas de navegación.
Primera Iteración:
Secciones principales: Inicio, Calendario, Exámenes y Familia.
Uso de nomenclaturas claras y familiares para los usuarios.
Agrupación lógica de funcionalidades dentro de cada sección.
Segunda Iteración: Con la incorporación del SOS, la arquitectura fue revisada para permitir acceso inmediato y sin login, optimizando la jerarquía visual y minimizando pasos para emergencias.
DISEÑO DE FLUJOS DE TRABAJO Y WIREFRAMES
Definición de Flujos:
Se diseñaron flujos de onboarding y registro simplificados, permitiendo a los usuarios acceder a funcionalidades básicas antes de completar el perfil.
Flujos específicos para cada persona:
Usuario Individual: Subida y consulta de exámenes.
Administrador Familiar: Gestión de perfiles de miembros del plan.
Médico: Navegación rápida entre pacientes y funcionalidades críticas como historial y emergencias.
Wireframes y Prototipos:
Se crearon wireframes de baja fidelidad para validar con usuarios la navegación y disposición de contenido.
Prototipos interactivos en Figma y Adobe XD facilitaron pruebas de usabilidad con feedback iterativo.
El diseño de IA fue iterativo y validado con card-sorting y pruebas de navegación.
Primera Iteración:
Secciones principales: Inicio, Calendario, Exámenes y Familia.
Uso de nomenclaturas claras y familiares para los usuarios.
Agrupación lógica de funcionalidades dentro de cada sección.
Segunda Iteración: Con la incorporación del SOS, la arquitectura fue revisada para permitir acceso inmediato y sin login, optimizando la jerarquía visual y minimizando pasos para emergencias.
DISEÑO DE FLUJOS DE TRABAJO Y WIREFRAMES
Definición de Flujos:
Se diseñaron flujos de onboarding y registro simplificados, permitiendo a los usuarios acceder a funcionalidades básicas antes de completar el perfil.
Flujos específicos para cada persona:
Usuario Individual: Subida y consulta de exámenes.
Administrador Familiar: Gestión de perfiles de miembros del plan.
Médico: Navegación rápida entre pacientes y funcionalidades críticas como historial y emergencias.
Wireframes y Prototipos:
Se crearon wireframes de baja fidelidad para validar con usuarios la navegación y disposición de contenido.
Prototipos interactivos en Figma facilitaron pruebas de usabilidad con feedback iterativo.
SISTEMA DE DISEÑO
Se desarrolló un Design System basado en Atomic Design, que incluyó:
Paleta de colores accesibles (contrast ratio AA/AAA).
Componentes reutilizables (botones, formularios, iconografía).
Tipografía jerárquica para facilitar la lectura en pantallas pequeñas.
VALIDACIÓN CON USUARIOS E ITERACIÓN
Pruebas de Usabilidad:
Se realizaron sesiones de pruebas con un grupo representativo de usuarios.
Feedback clave: Mejorar la visibilidad de la funcionalidad SOS y simplificar la navegación en emergencias.
Iteraciones Basadas en Resultados:
Incorporación de un modo oscuro en la versión de emergencia.
Rediseño del menú lateral en la plataforma médica para una navegación más eficiente.
ETAPA DE DESARROLLO
Primera Etapa:
Diseño de las secciones básicas (Inicio, Calendario, Exámenes, Familia), priorizando una interfaz limpia e intuitiva.
Segunda Etapa:
Incorporación de la funcionalidad SOS, diseñada para ser accesible desde el home y sin login, con énfasis en usabilidad en situaciones de estrés.
Se puede ver un extracto resumido del flujo de S.O.S en primera etapa aquí
Tercera Etapa:
Extensión de la funcionalidad a una plataforma médica tipo CRM, dividida en menús para pacientes y médicos, garantizando que ambas experiencias fueran coherentes con la aplicación principal.
Cuarta Etapa:
Desarrollo de la versión de emergencia con alto contraste y funcionalidades simplificadas para contextos críticos.
Prototipo/Agregar familiar
SOS información preview
