Tubio Constanza
UX Designer
Diseño UX UI de E-commerce
Iniciamos con la idea de desarrollar un ecommerce especializado en la venta de artículos artísticos para la creación de miniaturas. En colaboración con el cliente, delineamos un conjunto aproximado de pantallas basadas en un listado de funcionalidades esenciales. 🎨🛍️
Como estudiante de psicología, diseñadora UX y artista plástica, este proyecto representa un vínculo directo con mis intereses. La venta y promoción de este tipo de arte sirvieron de fuente de inspiración. 🤓✨
Proceso de diseño
1
Concepción e Investigación
En esta etapa inicial, se genera la idea del proyecto y se realiza una investigación exhaustiva. Se identifican objetivos, se estudia la competencia, y se definen las funcionalidades esenciales. La investigación puede incluir análisis de mercado y tendencias, así como la comprensión de las necesidades y comportamientos de los usuarios.
2
Ideación y Conceptualización
Se traducen las ideas en conceptos visuales y estructurales. Se crean bocetos, mapas mentales y wireframes para definir la arquitectura de la información y la interfaz de usuario. Se busca establecer una base sólida para el diseño final, considerando la usabilidad, la experiencia del usuario y la coherencia visual.
3
Iteración y Pruebas
Esta fase implica la mejora continua basada en la retroalimentación obtenida a través de pruebas y análisis. Se llevan a cabo pruebas de usabilidad, y se identifican y abordan desafíos y problemas específicos. Las iteraciones pueden incluir ajustes en el diseño, la funcionalidad y la experiencia del usuario para lograr un producto final optimizado y efectivo.
Investigación y Descubrimiento
Análisis de la competencia:
En la fase inicial, llevamos a cabo un análisis exhaustivo de Mercadolibre.com.ar con los siguientes objetivos:
-
Mapear las funcionalidades esenciales para un eCommerce.
-
Establecer una estructura de diseño (layout).
-
Definir secciones clave.
Resultado:
-
Landing page / Home con visualización de productos para usuarios registrados y no registrados.
-
Modal para registro/Creación de cuenta.
-
Banner/Carrousel de novedades u ofertas, próximos productos.
-
Galería de productos, categorías, y un buscador con filtros de Búsqueda Avanzada.
-
Pie de página con menú, ubicación, redes sociales y logotipo.
-
Páginas específicas como la de producto con detalles, imágenes, disponibilidad, indicador de poca disponibilidad, opciones como "Agregar a carrito" y "Marcar como favorito", precio, y botón de Pedido anticipado.
-
Notificaciones para productos que vuelven a estar en stock.
-
Seguimiento del pedido con estados como Comprado, en tránsito, en aduana y entregado.
-
Sección de preguntas frecuentes y de Mensajería y ayuda.
-
Página de Checkout (Proceso de Pago) con resumen y modal de Confirmación de Pedido.
-
Página de Historial de Pedidos, Perfil del Usuario, y Políticas (Términos y Condiciones, Política de Privacidad).
-
Página de Contacto.
Ideación y Conceptualización
Realicé bocetos y mapas mentales para definir las secciones del eCommerce, desde la Homepage hasta detalles específicos.
Bocetos y Mindmap (A mano y con Whimsical)
Wireframes en Figma (Alta fidelidad)
Utilicé la librería de componentes de Material Design descargada en Figma UI KIT.
El resultado fueron wireframes detallados para el MVP, incluyendo:
-
HomePage.
-
Carrito.
-
Envío.
-
Pagos.
-
Resumen.
-
Cuenta.
-
Órdenes.
-
Producto Comprado.
-
Seguimiento de pedidos.
-
Búsqueda de productos.
-
Detalles del producto.
-
Favoritos y lista de Favoritos vacía.
-
Error 404.
-
Preguntas frecuentes.
-
Notificaciones.
-
Modal de registro.
-
Modal de inicio de sesión.
Desafíos y Soluciones🚀
Durante esta fase, algunos desafíos se presentaron. Algunos componentes no estaban presentes en el UI KIT de Material Design para aplicaciones webs, etc. La mayoría de los componentes de Figma estaban diseñados para su uso en dispositivos móviles La solución fue crearlos e integrarlos al design system.
🆓 De manera gratuita podés acceder a estos componentes en el Link: https://material.io/blog/material-3-figma-design-kit)
Cards en Material Design UI KIT
Resultado final
Resultado
Pruebas de Usuario (Maze):
Después de completar el prototipo, definí una lista de tareas para pruebas de usabilidad en la herramienta Maze. Las tareas abarcaban desde el inicio de sesión hasta el proceso de devolución. La muestra fue de 6 personas para la primera y segunda prueba.
Resultados y Retroalimentación:
Tareas completadas por la ruta esperada en primera prueba.
66.7%
El éxito promedio en las tareas de usabilidad fue del 66.7%. Se identificaron problemas en las pantallas relacionadas con el proceso de compra, especialmente en la pantalla "Mi carrito". Hubo falta de consistencia entre los botones y confusión en la última pantalla del proceso de compra al colocarle formato de cards a información que no debería ser interactiva solo informativa.
Tareas completadas por la ruta esperada segunda prueba.
83.3%
Las iteraciones incluyeron ajustes en la pantalla "Mi carrito", optimizando el espacio, añadiendo un switch/toggle para el campo de cupón, y mejorando la visibilidad del carrito. Estas mejoras llevaron a un éxito del 83.3% en las pruebas posteriores. 🔄🔧📈
El porcentaje promedio de éxito de las tareas en las pruebas de usabilidad fue de 66.7% del primer grupo. Es decir, el porcentaje de tareas completadas por la ruta esperada. 📊 Este grupo conformado por seis personas, hasta 35 años, tienen manejo fluido de tecnología y se dedican o estan relacionados con ella. Hice una primera prueba de usabilidad con las tareas: registrate, inicia sesión, buscar un producto, comprar un producto, entre otras. En su mayoría los resultados 80% en adelante, excepto en el proceso de compra que fue de 66.7%
La tarea indicaba: "Compra productos del carrito. Dirigete al carrito y compra los productos. Debes pasar por el proceso completo de compra."
Iteración🔄
Realicé otra prueba de usabilidad después de modificar los elementos de la pantalla de Mi carrito.
Esta vez el enfoque fue indentificar patrones de problemas que tenían los usuarios en el proceso de compra. Lancé en Maze la prueba de usabilidad sólo de ese proceso. Encontré que algunos de los usuarios tuvieron inconvenientes para encontrar el carrito. Por lo cual añadí un badge en el ícono de Mi carrito (cart)🛒🏷️
Sección: Mi carrito (Primera prueba)
Sección: Mi carrito (Segunda prueba)
