Viacare
Viacare | Servicios Médicos | UX & Branding
Viacare es el diseño de una plataforma dedicada a conectar a los médicos profesionales con sus pacientes de forma efectiva, llevando el control de la salud de los usuarios de instituciones médicas privadas y públicas. Esto a través de un historial médico en tiempo real, un control sobre la medicación de los pacientes y la posibilidad de que los usuarios agenden consultas.
El reto fue diseñar una plataforma que funcione tanto para los pacientes como para el personal médico, tomando en cuenta la diversidad de los usuarios objetivo y su accesibilidad. Llevando la complejidad de sus características hacia un diseño claro y fácil de usar.
Objetivos
Diseñar una aplicación móvil.
Desarrollar una experiencia digital simple y accesible para los distintos tipos de pacientes.
Diseñar la identidad visual de Viacare.
Responsabilidades
Conducir entrevistas, wireframes digitales, wireframes en papel, prototipado de baja fidelidad, prototipado de alta fidelidad, estudios de usabilidad e iteración.
Los insights de los usuarios se traducieron a un ejercicio de “How Might We”, y los elementos son los siguientes:
User Personas
Los insights de las entrevistas iniciales me dieron una dirección clara para definir a 3 tipos de user personas diferentes. Estas están pensadas para englobar a los usuarios objetivo de Viacare.
User Journey
User Stories
Fernán es un padre de familia ocupado que necesita una forma de agendar su citas con el doctor de forma remota, con el fin de pasar más tiempo con su familia y no estarlo perdiendo en la zona de espera de los centros médicos.
Novara es una doctora que necesita un historial médico de sus pacientes, con el fin de tomar las mejores decisiones durante la consulta con estos.
Estella es una abogada muy ocupada que necesita una forma de tener seguimiento sobre su medicación, con el fin de tener más orden sobre su salud.
Wireframes en Papel
La prioridad principal del proyecto son los pacientes y su user journey, y este comenzó a ser definido desde los wireframes en papel. Desde esta parte temprana del diseño se comenzó a definir un camino claro para la plataforma de Viacare.
Wireframes de Papel
Me dediqué a plasmar el camino del usuario en papel antes de comenzar con los wireframes digitales, lo cual me dio la flexibilidad de hacer cambios de forma rápida y pasar con mayor claridad a la creación de los wireframes digitales.
Wireframes Digitales – Usuario
Un elemento clave a tener en cuenta fue la claridad de los elementos en la pantalla, especialmente la legibilidad. El botón de “nueva cita” es el protagonista de la pantalla principal, ya que es el inicio del camino del usuario.
La pantallas de citas están hechas para encontrar el centro médico más cercano, esto en base a la ubicación del usuario. Un estudio de usabilidad nos dirá si los usuarios están acostumbrados a ir exáctamente al mismo centro médico, o si por otro lado asisten a su centro médico más cercano.
Los elementos del historial médico y las recomendaciones no son editables por los pacientes, ya que son información importante definida por el personal médico. Solamente los doctores y doctoras podrán modificar estos elementos.
Wireframes Digitales – Personal Médico
La versión de la plataforma para el personal médico es muy similar a la versión de los pacientes, pero esta está enfocada en la interacción durante la consulta y post-consulta.
El escaneo por cámara del código QR que el usuario recibe cuando confirma su cita, será la forma en que el profesional de la salud acceda al historial médico de este. Como forma alternativa se podrá usar el código único del usuario.
Una vez se haya accedido, el doctor tendrá acceso instantáneo a la información clave del paciente desde su propio teléfono.
Los elementos agregados podrán ser editados, siempre y cuando se hayan agregado el mismo día por el mismo doctor. Cada elemento del historial médico estará conectado con la persona que realizó tal diagnóstico, esto con el objetivo de fomentar prácticas responsables sobre la salud de las personas.
Estudio de Usabilidad
Se realizó un estudio de usabilidad con 5 de las 6 personas iniciales. La información se aterrizó en un diagrama de afinidad, el cual fue muy importante para entender las áreas de oportunidad del prototipo de Viacare. Los insights de los 2 principales user journeys son los siguientes:
Kit UI
Me encargué del diseño de la identidad visual de Viacare y sus elementos visuales esenciales.
Mockups Iniciales
El diseño sufrió algunos cambios importantes, los cuales se definieron en base al estudio de usabilidad.
El diseño de las pantallas y su layout están pensados para llevar al usuario de forma intuitiva hacia la consecución de la tarea principal, pero por otro lado fue importante el uso de un menú slider en la barra de navegación, dándole mayor control al usuario sin dañar su experiencia.
Uno de los objetivos de la creación de la pantalla de fecha y hora fue el de hacer este proceso extremadamente rápido, ya que cada segundo cuenta al momento de agendar citas en centros de salud con acceso limitado. También se buscó el que la interacción fuese en la misma pantalla, sin tener que abrir un pop up con calendario o algún elemento de selección complejo.
El historial médico se divide entre los elementos personales y las patologías que se comparten entre miembros de una misma familia. El acceso a estos es a través de un simple toggle, lo que permite al médico poder tomar mejores decisiones de la forma más rápida posible.
La interfaz de Viacare para el personal de la salud tiene algunas diferencias clave, pero comparte la misma identidad visual de marca. Esta está diseñada especialmente para conectar con los pacientes de forma constante.
También se agregó un menú superior para acceder a las distintas secciones de información del paciente, lo cual le permitirá al profesional de la salud conocer más sobre el paciente antes de realizar algún diagnóstico.
Otro elemento importante fue el tener una pantalla de confirmación y edición de diagnóstico o recomendaciones (alertas), evitando de esta forma cualquier tipo de errores al ingresar la información.
Como último paso se diseñó un modo nocturno para Viacare. Este modo facilita el uso de la aplicación en ambientes de muy poca luz o en horas muy altas de la noche.
Uno de los aprendizajes más importantes del proyecto fue el de entender las distintas y a veces disonantes realidades que pueden vivir los usuarios objetivos de un mismo proyecto; lo cual hace evidente la importancia de tener una muestra muy representativa al momento de empatizar y entender a las personas. Cada proyecto me está ayudando a reducir mis segos y a reforzar mis propósitos detrás de cada diseño.
Probar prototipo: https://www.figma.com/proto/fUErMCaamufQxHZ6PLk5LJ/Viacare?page-id=25%3A1347&node-id=28%3A1370&viewport=241%2C48%2C0.17&scaling=scale-down&starting-point-node-id=28%3A1370