# Doto — Escalando la conversión en un ecosistema de e-commerce VTEX

> Liderazgo en product design para el e-commerce VTEX de Doto: CRO, UX research, PLP/PDP, Double BuyBox, checkout, autoservicio y DotoFon.

Product Design / UX Research / UI Systems / CRO / E-commerce Architecture

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.

Lideré la evolución de e-commerce de Doto en discovery, PDPs, checkout, autoservicio y nuevos servicios de negocio—combinando CRO, investigación UX, experimentación y sistemas VTEX escalables.

- **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

**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

## 01 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.

## 02 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.

## 03 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.

## 04 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.

## 05 Convirtiendo una restricción logística en una elección del cliente

**El Double BuyBox se convirtió en una de las iniciativas de conversión más importantes del proyecto.**

**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.

## 06 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.

## 07 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.

## 08 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.

## 09 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.

## 10 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.

Website: https://doto.com.mx/

HTML: https://www.giovidaurri.com/es/casos-de-estudio/doto/