Autora: Raquel Amador, diseñadora en UX del Certificado profesional de Diseño de experiencia de usuario (UX) de Google
Iconografía: Raquel Amador, Font Awesome. Fotos: Pexels, Unsplash
Resumen del proyecto
El producto:
Sitio web adaptable para Makeup tuto.
Duración del proyecto:
De octubre a noviembre de 2024.
El problema:
Crear un entorno fácil de usar para los usuarios que desean encontrar tutoriales para maquillarse de acuerdo a sus necesidades e intereses.
El objetivo:
Diseñar un sitio web adaptable para Makeup tuto que permita a los usuarios buscar, visualizar y guardar tutoriales para maquillarse.
Mi rol:
Investigador y diseñador en experiencia de usuario (UX).
Desde los bocetos iniciales hasta el prototipo de alta fidelidad.
Diseñador de UI del sitio web Makeup tuto.
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 el sitio web adaptable de Makeup tuto. 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 las jóvenes universitarias o que recién inician la vida profesional. Un segundo grupo de usuarios integrado por mujeres mayores de treinta que conbinan la maternidad con la vida profesional.
Persona 1: Marisol
Planteamiento del problema:
Marisol es una joven chef mexicana y emprendedora que necesita visualizar y guardar tutoriales de maquillaje fácilmente, porque tiene poco tiempo para encontrar y reproducir videos que se adecúen a sus necesidades como: tipo de piel, tipo de evento o tipo de productos.
Persona 2: Jessica
Planteamiento del problema:
Jessica es madre y docente de escuela secundaria que necesita un sitio web intuitivo donde pueda visualizar y guardar tutoriales de maquillaje facilmente, porque quiere tener disponible tutoriales para ocasiones especiales como festividades y eventos formales.
Mapa de recorrido del usuario
Auditoría Competitiva
Al realizar una auditoría de algunos sitios web de la competencia, se obtuvo más información de guía sobre las oportunidades para abordar con Makeup tuto.
Comenzar el diseño
Ideación
Hice ejercicios de ideación rápidos para tener ideas. Mi enfoque se centró específicamente en mostrar galerías de video-tutoriales, visualización de tutorial y las opciones de guardado en una lista.
Mapa del sitio
Una vez terminados los ejercicios de ideación, empecé a trabajar en el diseño del sitio web adaptable. Usé el mapa del sitio de Makeup tuto como guía para la estructura organizativa del diseño de cada página. La estructura jerárquica que elegí fue diseñada para simplificar y facilitar la navegación general del sitio web.
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 interfaz de usuario de Makeup tuto. Estos diseños se centraron en mostrar galerías de video-tutoriales, visualización de tutorial y las opciones de guardado en una lista.
Prototipo de baja fidelidad
Para prepararme para las pruebas de usabilidad, creé un prototipo de baja fidelidad en Figma que conectaba el flujo de usuarios desde la página de inicio hasta el guardado del video-tutorial en una lista.
Prototipo de baja fidelidad
↓
Copia y pega en el navegador el siguiente enlace que te llevará al prototipo en Figma.
https://www.figma.com/proto/a7BBkEQzY8a76HwsPf6UlD/Makeup-tuto?page-id=25%3A2&node-id=25-143&p=f&viewport=224%2C124%2C0.1&t=scu3Z3O9XFFNl8Tk-8&scaling=contain&content-scaling=fixed&starting-point-node-id=40%3A2311&hide-ui=1
Estudio de usabilidad: parámetros
Tipo de estudio:
Estudio de usabilidad no moderado (a distancia)
Ubicación:
México
Participantes:
6 participantes
Longitud:
10-20 minutos
Estudio de usabilidad: hallazgos
Estos fueron los principales hallazgos del estudio de usabilidad:
Barra de menú y sub-categorías
Tuvieron dificultades con las sub-categorías del menú principal, particularmente con los botones ubicados en la parte inferior del menú principal.
Página Maquillaje
Los usuarios piensan que la página de Maquillaje hace un poco lenta la experiencia al tener que dirigirse a esa página para seguir viendo otras tres características de maquillaje, que a su vez se subdividen en más categorías.
Navegación
Los usuarios piensan que la navegación del prototipo podría ser más simple. Los cuatro temas principales como Maquillaje, Skincare, Looks y Ocasión, son de los intereses esenciales para los usuarios, aunque podrían organizarse mejor.
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 integré los cuatro categorías principales en la barra de menú. Así mismo eliminé la página de la sección Maquillaje y la sustituí por una de sus tres categorías: Rostro.
Después del primer estudio de usabilidad al diseño de maquetas en alta fidelidad
En el layout de las páginas de Makeup tuto realicé la diagramación basada en el tiered layer cake layout. Creando capas individuales de elementos con diferentes números de columnas.
Organicé las miniaturas de video-tutoriales largos en grupos de seis, con una relación de aspecto 16:9. Así mismo, las miniaturas de videos cortos las organicé en una capa de 4 columnas, con una relación de aspecto 9:16.
Iconografía: Raquel Amador, Font Awesome. Fotos: Pexels, Unsplash
Continuando con los cuatro temas principales Maquillaje, Skincare, Looks y Ocasión, seguí el flujo de usuario que este tomaría para uno de los temas: Maquillaje.
Diseñé la navegación del sitio web priorizando la exploración de los usuarios por las páginas.
Las categorías de Maquillaje abarcan tres zonas de interés especial para los usuarios: Rostro, Ojos y Labios. Al mismo tiempo cada zona tiene tutoriales específicos por sub-tema. Delineados, Cejas, Pestañas, Sombras y Efectos forman parte de Maquillaje: Ojos
Iconografía: Raquel Amador, Font Awesome. Fotos: Pexels, Unsplash
En la reproducción del video-tutorial incluí el título, descripción y etiquetas acompañadas de iconografía, con el fin de que los usuarios puedan encontrarlo fácilmente.
Así mismo, en el márgen derecho del video tutoríal integré los botones que los usuarios pueden accionar: Gustar, Guardar, Compartir y Regresar. Al guardar el video-tutorial en una lista, completan el flujo de usuario y pueden regresar al Inicio o continuar explorando Temas similares.
Iconografía: Raquel Amador, Font Awesome. Fotos: Pexels, Unsplash
Prototipo de alta fidelidad
Realicé un prototipo de alta fidelidad en Adobe XD y siguió el mismo flujo del usuario que el prototipo de baja fidelidad, incluidos los cambios de diseño aplicados después del estudio de usabilidad.
Iconografía: Raquel Amador, Font Awesome. Fotos: Pexels, Unsplash
Prototipo de alta fidelidad en XD
↓
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 considera el uso de texto alternativo.
Los subtítulos para personas con discapacidad auditiva, Closed Caption para contenido en video.
Etiquetas transparentes para elementos interactivos que son legibles por los lectores de pantalla.
Diseños adaptables
Los diseños, según la variación del tamaño de pantalla, abarcan las computadoras de escritorio y los dispositivos móviles. Optimicé los diseños según el enfoque Graceful degradation o degradación correcta, que se centra en diseñar desde la pantalla más grande hasta el tamaño de pantalla más pequeño.
Sitio web móvil
Futuro
Conclusiones
Impacto:
El sitio web de Makeup tuto hace que los usuarios sientan la confianza de encontrar video-tutoriales enfocados en sus necesidades específicas.
Una cita de una de las personas entrevistadas:
“El look general de Makeup tuto me recuerda a las revistas con consejos de expertos, se ve clásico y elegante. Me hace pensar que es el lugar donde estarán estas guías de maquillaje sin perder tiempo buscando, lo cual es bastante útil”.
Qué aprendí:
Mientras diseñaba para Makeup tuto, aprendí que alinearme con las necesidades específicas del usuario me ayudó a entenderlos y encontrar soluciones útiles. Los métodos de ideación y los primeros diseños fueron el punto de partida para crear soluciones rápidas. Los estudios de facilidad de uso y el feedback influyeron en cada iteración de los diseños del sitio web.
Un proceso agradable e inspirador. Repasar los principios Gestalt de diseño y completar las etapas del framework Design Thinking fue esencial y edificante en mi camino como UX designer.
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 y otros elementos utilizados como visual design system del sitio web adaptable de Makeup tuto.
Se considera realizar una versión oscura o modo noche.
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.
¡Gracias!
