Product Design / UX Research / UI Systems / CRO / E-commerce Architecture
Doto — Escalando la conversión en un ecosistema de e-commerce VTEX
Diseño de producto, CRO y evolución del sistema UX para Doto, optimizando journeys de compra de alto impacto mediante componentes VTEX escalables y experimentación continua.
Cliente
Doto
Industria
E-commerce / Electrónica de consumo
Ubicación
Ciudad de México, México
Año
2023–2024
Duración
1 año 4 meses
Rol
Lead Product Designer
Modalidad
In-house / Tiempo completo
Plataformas
VTEX Commerce / Responsive Web / Mobile Web / Android App WebView
Herramientas
Figma / FigJam / Jira / VTEX / GA4 / GTM / Google Search Console / Mixpanel / Looker Studio / Clarity / One Signal / Hotjar / MailChimp
Entregables
Liderazgo en Product Design
UX Research y Estrategia
CRO y Experimentación
Design System
Rediseño de PLP y PDP
Flujos de Carrito y Checkout
Experiencias de Autoservicio
Prototipos Responsive
Design Reviews & Critiques
Librería de Componentes VTEX
Resumen del proyecto
Doto no fue un proyecto de rediseño único. Fue una transformación de producto continua dentro de un negocio de e-commerce y electrónica de consumo en constante movimiento.
Como Lead Product Designer, lideré a dos Product Designers mientras coordinaba el trabajo entre diseño visual, UX Research, UX Writing, SEO, marketing, producto e ingeniería.
El objetivo estuvo consistentemente ligado al CRO: identificar fricciones, mejorar la toma de decisiones, probar alternativas y crear soluciones reutilizables capaces de escalar en toda la experiencia de compra.
El trabajo abarcó desde sistemas de interfaz fundacionales hasta funcionalidades comerciales de alto impacto, con decisiones de diseño constantemente puestas a prueba mediante investigación, análisis de comportamiento, Design Reviews, Design Critiques, prototipado y experimentación.
Equipo: 2 Product Designers / 3 Diseñadores / UX Writer / 2 especialistas SEO / UX Researcher / UI & Visual Designer / Coordinación de Proyecto / Producto / Marketing / Ingeniería
Construyendo un sistema de comercio escalable
Uno de los primeros retos fue crear suficiente consistencia para avanzar más rápido sin convertir cada nueva iniciativa en un rediseño aislado.
Reconstruimos la interfaz digital alrededor de un sistema influenciado por los principios de Material Design 3 y tradujimos esas bases a la librería de componentes VTEX interna de Doto.
En lugar de tratar el Design System como un inventario visual, lo usamos como infraestructura de comercio.
Las tarjetas de producto, los patrones de navegación, los filtros, los módulos promocionales, las superficies de merchandising, los componentes transaccionales, los estados de formulario y los comportamientos responsive tenían que soportar cambios constantes de catálogo, campañas y prioridades comerciales.
Esta base nos permitió evolucionar PLPs, PDPs, checkout, experiencias de categoría, campañas y nuevos servicios manteniendo un lenguaje de producto coherente entre desktop y mobile.
Escalando discovery, PLPs y experiencias de marca
Gran parte de la oportunidad de conversión ocurría antes de que el cliente llegara a un Product Detail Page.
Rediseñamos las Product Listing Pages alrededor de un filtrado más claro, jerarquía de merchandising, tarjetas de producto reutilizables, módulos promocionales y layouts responsive.
Las tarjetas de producto tenían que acomodar distintas combinaciones de precio, descuentos, financiamiento, calificaciones, colores, almacenamiento, especificaciones, badges y estados promocionales sin perder consistencia.
También desarrollamos interstitials de categoría para mejorar la navegación entre familias de producto grandes, y experiencias de marca dedicadas que dieron a los fabricantes mayor expresión visual sin romper la arquitectura de comercio de Doto.
El mismo sistema se extendió a promociones destacadas, productos relacionados, más vendidos, descubrimiento de marca, recomendaciones y el minicarrito.
El objetivo fue mejorar el discovery de producto y el merchandising manteniendo una arquitectura lo suficientemente modular para responder a cambios constantes de catálogo y campañas comerciales.
Convirtiendo el PDP en un sistema de toma de decisiones
El Product Detail Page se convirtió en una de las superficies de experimentación más importantes del producto.
En lugar de tratarlo como una descripción de producto estática, lo diseñamos como un sistema de decisión capaz de responder las preguntas que afectan directamente la intención de compra:
• ¿Es este el mejor precio?
• ¿Cuándo llega?
• ¿Hay una alternativa más barata?
• ¿Puedo financiarlo?
• ¿Hay una versión reacondicionada?
• ¿Puedo proteger la compra?
Los nuevos módulos introdujeron histórico de precios, alertas de cambio de precio, estimaciones de entrega, garantías extendidas, productos de protección, alternativas de financiamiento, promociones contextuales, recomendaciones y mecanismos de comparación alrededor de la acción de compra principal.
El objetivo no era agregar información por agregar.
Cada módulo tenía que aclarar valor, reducir incertidumbre o crear un camino comercialmente relevante hacia adelante.
Dando a los usuarios mejores formas de comparar valor
Las compras de electrónica de consumo rara vez se evalúan de forma aislada.
Los clientes comparan precio, especificaciones, financiamiento, marcas, disponibilidad y productos alternativos antes de decidirse.
Introdujimos herramientas de comparación directamente en la experiencia de compra en lugar de obligar al cliente a salir de Doto para hacer esa investigación.
El comparador de precios contextualizó la oferta de Doto frente a otros marketplaces, exponiendo diferencias de precio y métodos de pago soportados.
La comparación de productos tradujo especificaciones técnicas densas a un formato estructurado lado a lado.
"Comprados juntos habitualmente" agregó otra capa de merchandising contextual al conectar productos que tenían sentido como grupo de compra.
En conjunto, estos módulos movieron la experiencia de simplemente presentar productos a apoyar activamente la decisión de compra.
Convirtiendo una restricción logística en una elección del cliente
Doto podía ofrecer productos seleccionados a través de dos modelos de fulfillment distintos.
• Una opción entregaba más rápido a un precio más alto.
• La otra reducía el precio pero requería una espera más larga.
Operativamente, ambas alternativas ya existían.
El reto de Product Design fue traducir esa complejidad logística en una elección que el cliente pudiera entender con confianza.
Exploramos múltiples versiones del componente en desktop y mobile, cambiando jerarquía, terminología, selectores, información de entrega, tooltips, énfasis de precio, comportamiento por código postal, CTAs, cantidades y estados sticky.
El componente no se trató como un rediseño de una sola vez.
Se desarrollaron y probaron distintas representaciones de la misma decisión para entender cuál comunicaba mejor el trade-off entre ahorrar dinero y ahorrar tiempo.
La conversión aumentó 19.48% en productos que usaban el componente Double BuyBox. La interacción con productos generales aumentó 15.27%, la visibilidad del sitio aumentó 27.21%, y las visitas promedio de usuarios recurrentes aumentaron 25.6%. VTEX reportó los resultados de periodos de prueba continuos de entre 6 y 9 días.
Resultados
- +19.48% Conversión en productos con Double BuyBox
- +15.27% Interacción con productos generales
- +27.21% Visibilidad del sitio
- +25.6% Visitas promedio de usuarios recurrentes
Diseñando a través de la experimentación
Nuestro proceso combinó investigación cualitativa, señales cuantitativas, prototipos, validación de usabilidad, análisis de comportamiento y experimentos controlados.
En lugar de limitar la validación a una solución A y B, el equipo exploró frecuentemente alternativas A/B/C/D en paralelo.
Los Design Reviews y Design Critiques se volvieron parte del modelo operativo. Cada iteración se puso a prueba desde la claridad, el valor para el cliente, el impacto de negocio, la viabilidad técnica, el comportamiento responsive, la accesibilidad y el potencial de conversión antes de llegar a experimentación.
El proceso funcionó como un ciclo de retroalimentación continuo:
Investigación → Hipótesis → Variantes → Crítica → Prueba → Medición → Iteración
Esto permitió que decisiones de producto importantes evolucionaran a partir de evidencia y no de preferencias individuales.
Expandiendo el negocio más allá del producto principal
El CRO no se limitó a mejorar la compra del producto principal.
También diseñamos formas de extender el valor para el cliente alrededor de él.
Los productos reacondicionados y seminuevos crearon una alternativa de menor precio dentro del mismo contexto de compra, lo que exigía explicar con claridad la condición del producto, el ahorro, la garantía, las calificaciones y las implicaciones de la compra.
En lugar de separar el inventario reacondicionado de la experiencia principal de comercio, conectamos las alternativas relevantes directamente con los productos nuevos.
Los productos de protección siguieron el mismo principio.
Las garantías extendidas, la protección por daño accidental y otras coberturas necesitaban comunicar servicios complejos sin interrumpir el recorrido de compra ni generar incertidumbre sobre lo que el cliente estaba adquiriendo.
Estos proyectos exigieron un equilibrio entre oportunidad comercial y confianza del cliente.
Un add-on solo genera valor cuando el cliente entiende con claridad qué está comprando y por qué puede ser relevante.
Construyendo confianza en carrito, checkout y pagos
La experiencia de compra tenía que seguir siendo comprensible incluso cuando los pagos, el financiamiento, el fulfillment y los servicios opcionales se volvían más complejos.
Rediseñamos las superficies de carrito y checkout alrededor de resúmenes de pedido más claros, alternativas de entrega, protección opcional, venta cruzada de DotoFon, estados promocionales, financiamiento y distintos métodos de pago.
La plataforma necesitaba soportar múltiples servicios financieros y socios de pago sin que el recorrido se sintiera fragmentado.
Eso exigía comunicar con claridad qué se había seleccionado, cuánto pagaría el cliente, cómo se entregaría la compra y qué pasaría después de continuar.
También trabajamos en experiencias de pago donde parte de la transacción podía continuar a través de ecosistemas financieros externos, incluyendo integraciones relacionadas con Banco Azteca.
El checkout se trató entonces como algo más que un formulario.
Fue la etapa final de un sistema de decisión que había comenzado mucho antes en el recorrido de compra.
Diseñando el ciclo de vida completo del cliente
Una parte importante del trabajo ocurrió fuera de las pantallas tradicionales de compra.
La retroalimentación de clientes reveló fricciones recurrentes en torno a estatus de pedido, cancelaciones, actualizaciones de envío, reembolsos, garantías, devoluciones, facturación, datos personales, DotoCash y gestión de cuenta.
Eran momentos de alta fricción donde la falta de claridad se traducía directamente en dependencia del soporte al cliente.
Rediseñamos estas experiencias alrededor del autoservicio.
El trabajo incluyó comunicación de estatus más clara, próximos pasos explícitos, formularios reutilizables, estados de validación, selección de producto, lógica de elegibilidad, estados de éxito y error, y políticas adaptadas a distintas condiciones de producto.
Las experiencias post-compra también se ampliaron para conectar confirmación de pedido, pago, recolección, envío, entrega, reseñas y recomendaciones.
El objetivo era simple:
Ayudar al cliente a entender qué está pasando y qué puede hacer a continuación, sin obligarlo a preguntarle a alguien más.
Diseñando nuevas experiencias de ingreso dentro del ecosistema
La misma arquitectura de producto también tuvo que soportar líneas de negocio completamente nuevas.
DotoFon introdujo telecomunicaciones dentro de una experiencia de e-commerce originalmente centrada en electrónica de consumo.
Diseñar DotoFon requirió mucho más que crear una landing page.
Planes, plazos de contrato, tarjetas de producto, PDPs, portabilidad, conceptos de activación de SIM, información de recargas, FAQs, módulos promocionales, divulgación progresiva y venta cruzada contextual tenían que coexistir con el recorrido de cliente ya existente en Doto.
Diseñamos el servicio a través de puntos de contacto de adquisición y comercio, dándole una personalidad visual propia y conectándolo con otras partes del ecosistema como DotoCash y DotoExpress.
El proyecto demostró la flexibilidad de la arquitectura de producto subyacente.
Se podía introducir un nuevo modelo de negocio sin reconstruir toda la experiencia de cliente desde cero.
De diseño de interfaces a una práctica de Product Design
El resultado más importante de mi paso por Doto no fue una sola pantalla. Fue ayudar a establecer una forma más sistemática de diseñar comercio.
Conectamos las decisiones de producto con investigación, objetivos de conversión, retroalimentación de clientes, restricciones técnicas, Design Systems, experimentación y crítica continua.
El trabajo abarcó discovery, merchandising, PLPs, PDPs, pagos, checkout, servicios, post-compra y nuevas líneas de negocio, en lugar de optimizar momentos aislados.
Como Lead Product Designer, mi responsabilidad fue crear las condiciones para que ese trabajo sucediera de forma consistente:
liderar a los Product Designers de mi equipo, coordinar con disciplinas especializadas, cuestionar supuestos, priorizar oportunidades de alto impacto y mantener el diseño conectado a objetivos de negocio medibles.
La experiencia reforzó un principio que sigue guiando mi trabajo: un buen diseño de e-commerce no elimina la complejidad del negocio. La traduce en decisiones que el cliente puede entender y sobre las que puede actuar.
El trabajo desarrollado durante este periodo también generó visibilidad más allá de Doto y más tarde se convirtió en una de las razones por las que me buscaron para trabajar en la experiencia de e-commerce de Gandhi.
Agradecimientos
Este trabajo fue posible gracias a un equipo multidisciplinario de Product Design, UX Research, UX Writing, Visual Design, Producto e Ingeniería.
Un agradecimiento especial a:
- Jacobo Sutton (CEO)
- Danilo Smith (Product Designer)
- Teresa Solís y Estefanía Hernández (UX Research)
- Karen Rangel (Branding & Visual Design)
- Catherine Quiróz (UX Writing)
- Marco Hugo Reyes Larios (CTO)
- Eder Hernández Avedaño (Desarrollo Front-End)
por su colaboración a lo largo de la evolución del ecosistema digital de Doto.
Compartir en Linkedin 
Compartir en Threads 
Compartir en X 
Compartir en Facebook 
