QUIEROCOMPRAR.COM · E-commerce · UX / UI Design
Plataforma de comparación y compra para Wondersale S.A. que agrega tiendas, compara precios y centraliza carritos — diseñada para hacer la compra en línea más simple, confiable y accesible en México.
CONTEXTO
Wondersale S.A. es una startup cuyo principal objetivo es ofrecer servicios digitales que potencialicen las ventas de las grandes tiendas y ofrecer a los clientes múltiples opciones de compra. QuieroComprar.com es su propuesta para centralizar la oferta de más de 1,000 tiendas —moda, hogar, electrónica, muebles, electrodomésticos y abarrotes— en un solo sitio, comparando precios y destacando las mejores promociones.
Los usuarios de e-commerce en México enfrentan barreras de desconfianza, dificultad para comparar precios entre múltiples plataformas y falta de claridad en métodos de pago y entrega. Comprar en línea sigue siendo más complicado de lo que debería.
Diseñar una plataforma accesible, funcional y atractiva que facilite el proceso de compra en línea, reuniendo la oferta de más de 1,000 tiendas en un solo lugar y reduciendo la fricción en cada paso del proceso.
DESIGN CHALLENGE
01 · CONOCIENDO AL USUARIO
Síntesis de lo que el usuario dice, hace, piensa y siente al buscar productos en línea, junto con sus esfuerzos y los resultados que espera obtener.
Pierdo demasiado tiempo buscando diferentes productos en diferentes tiendas.
No siempre encuentro buen surtido en tiendas físicas.
Las compras en línea me facilitan poder ahorrar tiempo y ocuparlo en otras actividades.
Cada que tengo oportunidad reviso los sitios de las tiendas en busca de ofertas.
A veces cuento con poco tiempo para acudir a las tiendas a buscar lo que necesito.
Me gusta pasar mi tiempo en las tiendas y buscar nuevos productos.
Acude a sus tiendas favoritas a fin de encontrar productos novedosos.
Compara entre varios sitios el precio de un producto de su interés.
Planea sus compras con anticipación y revisa en sitios la disponibilidad de productos.
Cuando encuentra ofertas interesantes las comparte con familiares y amigos.
Busca ofertas de productos de su interés y los compara con otros similares.
Me gustaría una forma fácil de poder hacer mis compras en línea en un solo lugar.
Tener cuentas en varias tiendas me parece un poco enredado.
Las ofertas en línea son escasas y difíciles de encontrar.
En las tiendas encuentro productos que me interesan y desearía me los enviaran a domicilio.
Es difícil comparar ofertas de productos similares en diferentes tiendas.
Me gustaría que las tiendas en línea aceptaran hacer apartados y pagos diferidos.
Me emociona poder ir a las tiendas y revisar productos novedosos.
Me estresa tener que visitar varias tiendas y perder muchas horas buscando lo que necesito.
Me angustia no saber si pude encontrar un mejor precio en otro lugar.
Me preocupa que las cosas que compro en línea no me queden o no sean de mi agrado.
Me entusiasma recibir mis compras en la puerta de mi casa.
Me frustra cuando el proceso de compra resulta demasiado largo o complicado.
No poder hacer compras en línea de diversas tiendas en un solo sitio.
No poder hacer comparativas de precios para diferentes productos en diferentes sitios a la vez.
Gastar mucho tiempo acudiendo a las tiendas físicas a buscar todos los productos que necesita.
Poder hacer compras de gran variedad de productos y tiendas desde un solo sitio web.
Poder realizar comparativas de precios y ofertas en varias tiendas desde un solo sitio web.
Poder hacer compras en diferentes tiendas y tener diferentes formas de pago y de entrega.
PAIN POINTS
02 · INVESTIGACIÓN DE USUARIOS
Perfiles representativos construidos a partir de la investigación, que guiaron cada decisión de diseño.
"Me gusta ir a las tiendas y descubrir buenos artículos y ofertas."
"Me gusta ir a las tiendas que ofrecen buenas ofertas y pasar algunas horas revisando lo que hay."
USER JOURNEY MAP
| Abrir QuieroComprar | Seleccionar productos | Aplicar filtros | Seleccionar tienda | Apartar productos | |
|---|---|---|---|---|---|
| ACCIÓN | Abrir la página web y revisar novedades | Seleccionar los productos que quiere buscar | Aplicar filtros de precios y ubicaciones | Seleccionar tienda(s) y revisar stock | Apartar productos para ir por ellos |
| TAREAS | A. Abrir la página · B. Acceder con usuario y contraseña · C. Revisar novedades y descuentos | A. Seleccionar los productos que quieres buscar | A. Filtro de precio · B. Filtro de ubicaciones · C. Buscar tiendas | A. Revisar lista de tiendas · B. Seleccionar tienda · C. Revisar stock | A. Seleccionar productos · B. Dar clic en apartar |
| SENTIMIENTO | 😐 Espectante · Tranquilo |
😄 Ansioso · Espectante · Divertido |
😍 Entusiasmado · Espectante · Incrédulo |
😊 Aliviado |
🙄 Espectante · Impaciente |
| OPORTUNIDADES | Ofrecer establecer ubicación favorita | Sugerencias de productos con relación a búsquedas anteriores | Guardar criterios de búsqueda · Crear alertas de búsqueda | Comparativos de precios para productos similares | Opción de compra en línea y entrega a domicilio |
03 · USER FLOW
A partir de los hallazgos de la investigación, se definió el flujo de navegación prioritario: desde el acceso a la plataforma hasta el apartado o compra de productos, pasando por búsqueda, filtrado y selección de tienda.
04 · PROCESO DE DISEÑO
El proceso comenzó con exploración en papel y evolucionó a través de dos rondas de wireframes digitales, separadas por pruebas de usabilidad con usuarios reales.
El proceso comenzó con sketches en papel para explorar rápidamente distintos layouts sin limitaciones técnicas. Esta etapa permitió iterar sobre la estructura de las pantallas principales antes de invertir tiempo en herramientas digitales.
Los sketches se trasladaron a wireframes digitales de baja fidelidad en Figma. Esta primera ruta estableció la estructura base de navegación, que fue sometida a pruebas de usabilidad con usuarios reales.
Tras las pruebas de usabilidad con usuarios reales, se identificaron áreas de mejora que dieron lugar a la Ronda 2: una versión refinada que incorporó el feedback recibido antes de avanzar al prototipo de alta fidelidad. Esta iteración ajustó la arquitectura de navegación, la jerarquía visual y los flujos de filtrado y carrito.
SISTEMA DE DISEÑO
Figma fue la herramienta principal para crear los wireframes de baja fidelidad y el prototipo interactivo de alta fidelidad, permitiendo validar los flujos con usuarios reales antes de la entrega final.
05 · PROTOTIPO
El prototipo de alta fidelidad integra el design system definido y los flujos validados en etapas anteriores. El resultado es una experiencia que funciona de forma coherente en escritorio, tablet y móvil, con los flujos completos de búsqueda, comparación de precios, selección de tienda y gestión del carrito.
PROTOTIPO INTERACTIVO
Navega por el prototipo de alta fidelidad y recorre el journey completo: desde la búsqueda hasta el pago de productos.
Ver prototipo en FigmaRESULTADOS
"El diseño respondió a los objetivos planteados y establece una base sólida para el desarrollo del producto."— Wondersale S.A. · Feedback de entrega
Wondersale S.A. validó positivamente el diseño entregado, reconociendo que la propuesta respondía a los objetivos del brief y establecía una base sólida para el desarrollo del producto.
El cliente identificó como prioridad el desarrollo de micrositios especializados por categoría: moda, electrónica, hogar, muebles y abarrotes, para profundizar la experiencia de búsqueda.
Se definió como prioritaria la incorporación de múltiples métodos de pago para reducir la fricción del checkout y aumentar la confianza del usuario en la plataforma.
La centralización del carrito —sin importar la tienda de origen— fue establecida como el siguiente gran reto de UX y producto, para gestionar envíos desde un solo lugar.
REFLEXIÓN FINAL
"Este proyecto me enseñó que el usuario tiene altas expectativas a la hora de hacer compras en línea. Es importante conocer sus dolores y áreas de oportunidad para ofrecer un sitio atractivo en donde exista claridad y certeza."— Alfredo Jacinto · UX/UI Designer
El usuario de e-commerce en México no confía por defecto. La confianza se diseña: con transparencia en precios, claridad en las opciones de entrega y simplicidad en el proceso de pago.
Las pruebas de usabilidad no son el final del proceso, son su punto de inflexión. La Ruta 2 no existiría sin el feedback de usuarios reales sobre la Ruta 1. El diseño mejora cuando se pone a prueba.
Reunir más de 1,000 tiendas, múltiples carritos y distintos métodos de pago requiere una arquitectura de información que esconda la complejidad al usuario y la haga sentir simple.