Autora: Raquel Amador, diseñadora en UX del Certificado profesional de Diseño de experiencia de usuario (UX) de Google
Resumen del proyecto
El producto:
App y sitio web adaptable para Empatía
Duración del proyecto:
De enero a marzo de 2025.
El problema:
Crear un entorno fácil de usar para los usuarios interesados en el bienestar de niños y adolescentes, responsables de familia o docentes.
El objetivo:
Diseñar una app y sitio web adaptable para Empatía que permita a los usuarios ayudar a que los niños aprendan sobre emociones y empatía.
Mi rol:
Investigador y diseñador en UX.
Desde los bocetos iniciales hasta el prototipo de alta fidelidad.
Diseñador de UI.
Responsabilidades:
Realicé entrevistas para investigación de usuarios, creación de esquemas en papel y digitales, creación de maquetas y prototipos en baja y alta fidelidad para la app y sitio web adaptable de Empatía. Llevé a cabo estudios de facilidad de uso e iteración de diseños.
Entender al Usuario
Investigación sobre los usuarios: resumen
Realicé entrevistas en Boca del Río, Veracruz, México y creé mapas de empatía para entender a los usuarios para quienes diseño, así como sus necesidades. Un grupo de usuarios primario identificado a través de la investigación fueron los padres y madres de niños de primaria y secundaria. Así mismo está el grupo de usuarios dedicados a la docencia que se involucran en la educación de emociones y empatía de grupos de niños.
Persona 1: Ulises
Planteamiento del problema:
Ulises es un comerciante mexicano y padre responsable del bienestar de dos hijas que necesita escuchar historias y poner en practica actividades sobre sentimientos y empatía en familia, porque quiere aprovechar varios momentos del día de convivencia para así reducir la brecha generacional al hablar con sus hijas y tener una comunicación desde el respeto.
Mapa de recorrido del usuario
Persona 2: Vanessa
Planteamiento del problema:
Vanessa es una Docente en Artes de escuela primaria y secundaria pública a tiempo completo que necesita mostrar historias, videos y poner actividades sobre sentimientos, emociones y empatía a grupos de alumnos, para que ellos trabajen con sus emociones a través del arte.
Mapa de recorrido del usuario
Comenzar el diseño
Ideación
Hice ejercicios de ideación rápidos para tener ideas. Mi enfoque se centró específicamente en mostrar listas de reproducción de sesiones, podcast y registro de emociones o pensamientos.
Esquemas de página digitales
Después de idear y crear una versión preliminar de algunos esquemas de página en papel, creé los diseños iniciales para la aplicación de Empatía. Estos diseños se centraron sesiones breves en forma de lista de reproducción.
Fácil acceso a las funciones de la aplicación desde la barra de navegación global
Las sesiones breves recomendadas se muestran directamente en la página de inicio
Al completar un tiempo de uso de la aplicación, ésta recomienda registrar un pensamiento o emoción.
Prototipo de baja fidelidad
Para prepararme para las pruebas de usabilidad, creé un prototipo de baja fidelidad que conectaba el flujo de usuarios desde las sesiones en la página de inicio hasta el registro de pensamientos y emociones.
Prototipo de baja fidelidad en Figma
↓
https://www.figma.com/proto/qfux6XtjnZYWxX2MP7kWHe/Empatia-app?page-id=0:1&node-id=1-5&p=f&viewport=297,170,0.41&t=kCmXUP1bIJu3BVu3-8&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1:5&hide-ui=1
Estudio de usabilidad: Parámetros
Tipo de estudio:
estudio de usabilidad moderado
Ubicación:
Boca del Río, Veracruz, México
Participantes:
5 participantes
Longitud:
10-20 minutos
Estudio de usabilidad: hallazgos
Estos fueron los principales hallazgos del estudio de usabilidad:
Barra de menú
Tuvieron dificultades con la barra de menú, particularmente con los botones ubicados en la parte inferior de la aplicación.
Ventana Emergente
Los usuarios piensan que la ventana emergente que aparece al final de cada sesión o reproducción es molesta y repetitiva, puede confundir o distraer.
Registro de emoción
La gente prefería contar con indicaciones claras de las opciones de personalización, el propósito del seguimiento con notas y las emociones.
Perfeccionamiento del diseño
Maquetas
Con base en las conclusiones de los estudios de usabilidad, apliqué cambios de diseño. En las maquetas de alta fidelidad designé más espacio para la barra de menú inferior. Así mismo hice cambios en los los labels de cada sección. El título de la pantalla de Inicio cambió a Descubro, dejando así los títulos genéricos por unos más específicos y cercanos a lo que los usuarios pueden realizar en la app de Empatía.
Después del primer estudio de usabilidad al diseño de maquetas en alta fidelidad
Descubro es la lista de reproducción de sesiones que abordan temas para trabajar o identificar temas de emociones y empatía. Cada sesión tiene una animación simple con ilustraciones de estilo plano.
Iconografía: Raquel Amador, Material Design 3. Ilustraciones: lummi.ai
Escucho es la lista de reproducción del podcast de Empatía. Está pensado para escuchar a expertos e historias de vida de niños y adolescentes.
Pienso es un espacio para la reflexión. Los usuarios pueden registrar una de las seis emociones básicas y agregar otras más.
En Nota los usuarios tienen la opción de escribir acerca de la emoción que están sintiendo. La iconografía para agregar opciones de personalización se ubica en el espacio inferior de la Nota.
Prototipo de alta fidelidad en Figma
↓
https://www.figma.com/proto/qfux6XtjnZYWxX2MP7kWHe/Empatia-app?page-id=94:2&node-id=94-3&viewport=851,301,0.23&t=rtYPkq9vOvvQKQvR-8&scaling=scale-down&content-scaling=fixed&starting-point-node-id=94:3&hide-ui=1
Consideraciones de accesibilidad
Se tomaron en cuenta los criterios WCAG. Web Content Accessibility Guidelines. Se comprobó que el contraste fuera el óptimo. Para elementos principales 7:1. Objetos inactivos y elementos gráficos 4:1.
Se utilizaron gestos y movimientos sutiles para ayudar e indicar acciones al usuario. Se utilizó Swipe o deslizamiento en las secciones con más de una página. Tap o tocar para acceder a las secciones o cerrar ventanas. Estas interacciones permiten al usuario utilizar la app con una sola mano.
Se considera realizar una versión oscura o modo noche.
Etiquetas transparentes para elementos interactivos que son legibles por los lectores de pantalla.
Diseño adaptable
Mapa del sitio
Una vez terminados los diseños de la aplicación, empecé a trabajar en el diseño del sitio web adaptable. Usé el mapa del sitio de Empatía como guía para la estructura organizativa del diseño de cada pantalla a fin de garantizar una experiencia cohesiva y coherente en todos los dispositivos.
Diseños adaptables
Los diseños, según la variación del tamaño de pantalla, abarcan los dispositivos móviles, las tabletas y las computadoras de escritorio. Optimicé los diseños para adaptarlos a las necesidades específicas del usuario de cada dispositivo y tamaño de pantalla.
Sitio web móvil
Prototipo de alta fidelidad en Figma
↓
https://www.figma.com/proto/qfux6XtjnZYWxX2MP7kWHe/Empatia-app?page-id=282:4&node-id=292-551&viewport=1682,35,0.21&t=qfCks7FOvALOnWFF-8&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=321:56&hide-ui=1
Los diseños adaptados a tabletas y computadoras de escritorio.
Iconografía: Raquel Amador, Material Design 3. Ilustraciones: lummi.ai
Futuro
Conclusiones
Impacto:
La aplicación hace que los usuarios sientan que Empatía realmente piensa en cómo satisfacer sus necesidades.
Una cita de una de las personas entrevistadas:
“Todo lo que deje algún mensaje positivo es bueno. Explorar temas o actividades sobre emociones y registrar habitualmente nuestros pensamientos o emociones pueden hacernos más empáticos”.
Qué aprendí:
Mientras diseñaba la aplicación de Empatía, aprendí que las primeras ideas para la aplicación son solo el comienzo del proceso, alinearme con las necesidades específicas del usuario me ayudó a encontrar soluciones útiles. Los estudios de facilidad de uso y el feedback influyeron en cada iteración de los diseños de la aplicación.
Fue un proceso que disfruté mucho. Repasar los principios de diseño y completar las etapas del framework Design Thinking fue esencial para finalizar este proyecto.
Próximos pasos
Hacer un manual con las guías de estilo, componentes, uso de imágenes, iconografía, paleta de color, tipografía, elevación, animación, ilustración y otros elementos utilizados como visual design system de Empatía app y sitio web adaptable.
Agregar más recursos educativos descargables.
Realizar otra ronda de estudios de facilidad de uso para validar si las dificultades experimentadas por los usuarios se abordaron de manera efectiva.
Iterar los diseños y agregar páginas complementarias.
¡Pongámonos en contacto!
¡Hola, soy Raquel Amador! UX Researcher and Designer → Visual designer
¡Gracias por tomarte el tiempo de revisar mi trabajo con la experiencia de usuario de Empatía! Si quieres ver más de mi trabajo o comunicarte conmigo, esta es mi información de contacto:
+52 22 95 94 00 11
Veracruz, México
¡Gracias!
