Diseñando la confianza después de la compra

ROL
Diseño UX/UI en equipo: Valentina Sponton, María Camila Arias, Daniel Felipe Correa
CONTEXTO
Trabajo Final de Máster · UNIR
MERCADO
España · e-commerce móvil
Tres pantallas de la app de Cecotec: seguimiento del pedido, inicio con el envío destacado y Centro de Experiencia

01 / RESUMEN

El caso en 30 segundos

Si tenés poco tiempo, esto es lo esencial: el desafío, lo que hicimos y qué quedó.

El desafío

Cecotec no tenía app. Diseñamos una desde cero para una marca que el 92,9% no reconocía y donde el 89,3% abandonaba el carrito.

El enfoque

Si la marca no genera confianza sola, la app tiene que ganársela: diseñamos el recorrido completo, con un Centro de Experiencia post-compra como diferencial.

El resultado

Un prototipo navegable de punta a punta para dos perfiles opuestos: Ana, que necesita ser acompañada, y Marcos, que va directo al grano.

02 / CONTEXTO

Una marca casi desconocida y una app que había que construir de cero

Cecotec es una marca española de electrodomésticos. Para el usuario final de Argentina y Colombia era casi desconocida y no tenía app propia. Nuestro TFM propuso diseñarla desde cero con una premisa: en una marca nueva, la confianza se diseña, y no termina en el pago.

92,9%

no reconocía la marca

89,3%

de los carritos se abandonaba antes de completar la compra

Mapa de Empatía Marcos Ruiz

Perfil orientado a la eficiencia · Bogotá · 29 años

Ilustración de Marcos

¿Qué piensa y siente?

Valora su tiempo por encima de todo. Llega con una decisión tomada y solo necesita confirmar precio y completar el pago rápidamente.

¿Qué oye?

Contenido técnico de canales especializados. Opiniones de usuarios con perfil similar al suyo.

¿Qué ve?

Reseñas en YouTube. Comparativas de precio en Amazon. Apps con errores en el carrito que interrumpen su flujo.

¿Qué dice y hace?

Busca directamente por nombre o modelo. Compara con Amazon. Verifica si puede pagar con billetera digital. No lee descripciones largas.

¿Qué le duele?

Buscadores que no reconocen modelos exactos. Precios que cambian al añadir envío. Checkout con demasiados pasos.

¿A qué aspira?

Buscador predictivo. Precio total visible desde la ficha. Pago con wallet en un solo toque.

Mapa de Empatía Ana García

Perfil orientado a la seguridad · Buenos Aires · 48 años

Ilustración de Ana

¿Qué piensa y siente?

Experimenta incertidumbre ante compras de mayor inversión. Teme tomar una mala decisión y que el proceso de devolución sea complicado.

¿Qué oye?

Opiniones de su entorno cercano. Recomendaciones sobre marcas confiables. Contenido de comparativas online.

¿Qué ve?

Gran cantidad de productos similares sin diferencias claras. Tiendas cuya oficialidad no puede verificar fácilmente.

¿Qué dice y hace?

Revisa opiniones y garantías antes de decidir. Busca desde el móvil en momentos muertos. Abandona si el checkout es complicado.

¿Qué le duele?

Falta de transparencia en precios. Ausencia de info sobre devoluciones antes del pago. Formularios extensos.

¿A qué aspira?

Filtros claros. Reseñas verificadas desde la ficha de producto. Seguimiento del envío sin salir de la app.

“Dos personas compran el mismo producto y lo necesitan de formas opuestas.”

03 / NUESTRO ROL

Un TFM recorrido de punta a punta

Desarrollamos el proyecto como Trabajo Final del Máster en Diseño de Experiencia de Usuario (UNIR), recorriendo el proceso completo de Design Thinking: de entender a las personas a validar el prototipo.

Investigación

Entendimos cómo compran las personas y qué les pasa después de comprar, y lo sintetizamos en dos arquetipos: Ana y Marcos.

Diseño

Pasamos de la arquitectura de información y los flujos a un prototipo móvil en Figma, con el Centro de Experiencia como eje.

Validación

Probamos el prototipo con personas y ajustamos el diseño según lo observado, justificando cada decisión.

  • Figma
  • Design Thinking
  • UX Research
  • Arquetipos
  • User Flows
  • Prototipado
  • UX Writing

04 / PROCESO

Design Thinking en cinco fases

El TFM siguió un proceso de Design Thinking completo. Acá lo traducimos a lo que pasó en cada fase y a las decisiones que dejó.

Design Thinking en cinco fases: empatizar, definir, idear, prototipar y testear, unidas por un proceso iterativo
  1. 1

    Empatizar

    Investigación para entender cómo compran las personas y qué necesitan después de comprar.

  2. 2

    Definir

    Síntesis de hallazgos en arquetipos Ana y Marcos y en el problema a resolver.

  3. 3

    Idear

    Ideas y priorización de funcionalidades, con el Centro de Experiencia como eje.

  4. 4

    Prototipar

    Wireframes, flujos y prototipo navegable en Figma.

  5. 5

    Testear

    Probar con usuarios, obtener feedback y realizar mejoras.

05 / INVESTIGACIÓN

Entender dónde se pierde la confianza

Antes de dibujar pantallas, mapeamos la compra completa de punta a punta: nueve fases, de descubrir a recomprar, y qué siente la persona en cada una.

CUSTOMER JOURNEY MAP AS-IS · CURVA EMOCIONAL (CUALITATIVA)

F1Descubrimiento

POSITIVA

F2Investigación

NEUTRAL

F3Selección del producto

NEGATIVA

F4Compra / Checkout

NEUTRAL

F5Entrega / Recepción

POSITIVA

F6Entrega / Espera

NEGATIVA

F7Uso del producto

NEUTRAL

F8Posventa

NEGATIVA

F9Fidelización

NEUTRAL

FASE 3 · SELECCIÓN DEL PRODUCTO

“¿Este será realmente bueno? ¿Por qué este es más caro que el otro?”

EMOCIÓN: NEGATIVA / DUDA

FASE 6 · ENTREGA / ESPERA

“¿Dónde está mi pedido? ¿Cuándo llega? ¿Hay atención al cliente si algo no llega bien?”

EMOCIÓN: NEGATIVA

FASE 8 · POSVENTA

“No entiendo bien cómo usar esto. Espero que respondan rápido si necesito ayuda.”

EMOCIÓN: NEGATIVA

INSIGHT

“Dos de los tres momentos más bajos de la experiencia ocurren después de pagar.”

BENCHMARK COMPETITIVO

Comparamos plataformas líderes de e-commerce con foco en UX. Lo que tienen en común: reducen fricción, aumentan la confianza y acompañan durante toda la compra y la posventa. De ahí salieron siete oportunidades de diseño:

  • Reducir carga cognitiva
  • Optimizar experiencia móvil
  • Fortalecer confianza
  • Mejorar descubrimiento
  • Reducir fricción en checkout
  • Funcionalidades diferenciales
  • Reforzar ecosistema

06 / DEFINICIÓN

Del hallazgo a la decisión

Cada decisión de la app responde a un momento concreto del journey. Esta es la conexión entre lo que encontramos y lo que construimos.

LO QUE ENCONTRAMOS LA OPORTUNIDAD LA DECISIÓN EN LA APP

FASE 2–3 · INVESTIGACIÓN Y SELECCIÓN

“Hay demasiadas opciones. No entiendo la diferencia entre modelos.”

Filtros por necesidad y explicaciones en lenguaje simple.
Explorar y colecciones con filtros (mascotas, mapeo, WiFi) y specs clave en chips.

FASE 4 · COMPRA / CHECKOUT

“¿Estoy segura de esta compra? ¿Incluye todo? ¿Hay costos adicionales?”

Checkout en pocos pasos, costos visibles y medios de pago alternativos.
Checkout en 3 pasos con resumen y envío explícito.

FASE 6 · ENTREGA / ESPERA

“¿Dónde está mi pedido? ¿Cuándo llega?”

Tracking en tiempo real y notificaciones claras.
Seguimiento con próximo paso y banner persistente en la Home.

FASE 7 · USO DEL PRODUCTO

“No quiero perder mi tiempo configurando esto.”

Onboarding guiado y tutoriales paso a paso.
Centro de Experiencia: guía rápida, videos y checklist.

FASE 8 · POSVENTA

“No entiendo bien cómo usar esto. Espero que respondan rápido si necesito ayuda.”

Soporte integrado en la app, chat rápido y guías simples.
Soporte y chat dentro de la app, con el pedido a mano.

07 / IDEACIÓN

Ideas que valían la pena prototipar

Generamos ideas con Brainstorming, Seis Sombreros para Pensar y SCAMPER, y las ordenamos con una matriz de impacto y viabilidad antes de empezar con el wireframing.

  1. Brainstorming
  2. Seis Sombreros para Pensar
  3. SCAMPER
  4. Votación
  5. Matriz de impacto y viabilidad
MATRIZ DE IMPACTO Y VIABILIDAD FILAS: IMPACTO (ALTO → BAJO) · COLUMNAS: VIABILIDAD (ALTA → MEDIA / BAJA)

ALTO IMPACTO · ALTA VIABILIDAD

  • Modo simple vs técnico
  • Reseñas + videos de uso

ALTO IMPACTO · VIABILIDAD MEDIA

  • IA + comparador inteligente
  • Reseñas resumidas por IA
  • Asistente IA explicativo

IMPACTO MEDIO-ALTO · ALTA VIABILIDAD

  • Home posventa dinámica

BAJO IMPACTO · VIABILIDAD MEDIA / BAJA

Sin propuestas en este cuadrante.

    IMPACTO

    Qué tan bien la propuesta resuelve los problemas detectados en las personas y mejora la experiencia de compra.

    VIABILIDAD

    Qué tan realizable es dentro del alcance, la complejidad y los recursos del proyecto.

    08 / ARQUITECTURA Y USER FLOWS

    Dos perfiles, dos caminos después de comprar

    Armamos user flows por arquetipo para decidir qué ve cada persona, en qué orden y cuánto necesita leer. Ana recorre el Centro de Experiencia paso a paso; Marcos va directo a lo que necesita.

    ANA · POST-COMPRA

    Acompañada

    1. Recibe el producto
    2. Abre el Centro de Experiencia
    3. Guía rápida
    4. Videos de instalación
    5. Checklist de mantenimiento

    MARCOS · POST-COMPRA

    Directo al grano

    1. Recibe el producto
    2. Guía rápida
    3. Manual y accesorios
    4. Resuelve y lo usa

    COMPRADOR · COMPRA

    Del interés al pago

    1. Busca o explora
    2. Ficha de producto
    3. Carrito
    4. Pago
    5. Confirmación y seguimiento
    Sitemap con la arquitectura de la información de la app de Cecotec

    CAPÍTULO 01

    Centro de Experiencia post-compra

    • Post-compra
    • Arquetipos
    • Contenido guiado

    EL PROBLEMA

    Una marca desconocida, un producto con tecnología (robots, conectividad, app propia) y una persona que, después de pagar, queda sola con una caja. Ahí se decide si confía, si recomienda o si devuelve.

    INSIGHT

    “La confianza no termina en el pago: se construye cuando el producto llega.”

    DECISIONES DE DISEÑO

    1. 1 Un Centro de Experiencia dentro de la app, personalizado con el producto que compraste y con prioridades visibles (Esencial, Popular, Recomendado).
    2. 2 Guía rápida de inicio en 4 pasos, con progreso visible y pasos ya completados.
    3. 3 Videos de instalación para quienes necesitan ver cómo se hace.
    4. 4 Checklist de mantenimiento con frecuencia por tarea y avance, que acompaña el uso.
    5. 5 Manual digital y accesorios compatibles a mano para quien busca el detalle.

    RESULTADO

    Un espacio que acompaña después de la compra: reduce la incertidumbre para Ana y la fricción para Marcos.

    PANTALLAS DEL PROTOTIPO · CENTRO DE EXPERIENCIA
    Pantalla del prototipo: Centro de Experiencia

    Un punto de entrada con todo para empezar

    Pantalla del prototipo: Guía de conexión con la app

    Paso 3 de 4: una cosa por vez

    Pantalla del prototipo: Mantenimiento

    Un checklist útil meses después

    Pantalla del prototipo: Manual digital

    El detalle, para quien lo busca

    CAPÍTULO 02

    Seguimiento y soporte: acompañar mientras llega

    • Seguimiento
    • Notificaciones
    • Soporte

    EL PROBLEMA

    Entre el pago y la entrega hay días de incertidumbre. Sin información clara, la persona escribe a soporte por las dudas o pierde la confianza que acababa de ganar.

    INSIGHT

    “Si la app responde antes de que preguntes, no hace falta preguntar.”

    DECISIONES DE DISEÑO

    1. 1 Estado actual destacado, con origen, destino y próximo paso en lenguaje simple.
    2. 2 Historial de eventos con el último paso resaltado y número de seguimiento copiable.
    3. 3 Banner persistente en la Home para llegar al seguimiento sin buscarlo.
    4. 4 Notificaciones que avisan cada cambio de estado sin obligar a abrir la app.
    5. 5 Soporte a un toque desde la cuenta: reclamo y chat de ayuda con el pedido a mano.

    RESULTADO

    Menos incertidumbre durante la espera y un canal claro si algo sale mal.

    PANTALLAS DEL PROTOTIPO · SEGUIMIENTO Y SOPORTE
    Pantalla del prototipo: Mis compras

    Todos tus pedidos en un lugar

    Pantalla del prototipo: Seguimiento del pedido

    Dónde está y qué sigue

    Pantalla del prototipo: Home con seguimiento fijo

    La Home recuerda tu pedido

    Pantalla del prototipo: Chat de soporte

    Ayuda sin salir de la app

    CAPÍTULO 03

    Del carrito al pago sin dudas

    • Checkout
    • Abandono de carrito
    • Confianza

    EL PROBLEMA

    El 89,3% de los carritos se abandonaba antes de completar la compra. Cada duda sin resolver -costos, plazos, medios de pago- era una razón para irse.

    INSIGHT

    “Cada paso extra es una razón para dudar.”

    DECISIONES DE DISEÑO

    1. 1 Checkout en 3 pasos (Datos, Envío, Pago) con el progreso siempre visible.
    2. 2 Datos de envío cargados una sola vez y confirmados antes de pagar.
    3. 3 Medios de pago conocidos (tarjeta, PayPal, Google Pay, Apple Pay) en un toque.
    4. 4 Resumen siempre a la vista, con el costo de envío explícito y sin sorpresas.
    5. 5 Revisión final y confirmación que ya orienta a lo que sigue: seguimiento y Centro.

    RESULTADO

    Un recorrido de compra más corto y claro que ayuda a reducir las dudas antes de pagar.

    PANTALLAS DEL PROTOTIPO · CARRITO Y CHECKOUT
    Pantalla del prototipo: Mi carrito

    Lo que llevás, sin sorpresas

    Pantalla del prototipo: Datos de envío

    Una sola carga de datos

    Pantalla del prototipo: Checkout

    Pago con medios que ya usás

    Pantalla del prototipo: Compra exitosa

    Y después de pagar, la app sigue

    CAPÍTULO 04

    Encontrar y confiar: buscador y fichas de producto

    • Búsqueda
    • Fichas de producto
    • Reconocimiento de marca

    EL PROBLEMA

    Con una marca que el 92,9% no reconocía, el catálogo tenía que hacer doble trabajo: ayudar a encontrar y, al mismo tiempo, dar motivos para confiar.

    INSIGHT

    “Cuando la marca no se conoce, el producto tiene que explicarse solo.”

    DECISIONES DE DISEÑO

    1. 1 Home con promociones, categorías y destacados para entrar sin tener que buscar.
    2. 2 Explorar con tendencias y colecciones (ej. Línea Conga) para quien no sabe el modelo.
    3. 3 Filtros por necesidad (mascotas, mapeo, potencia) en lugar de fichas técnicas frías.
    4. 4 Ficha con precio y descuento a la vista, specs clave en chips y acceso a reseñas.
    5. 5 Reseñas, preguntas frecuentes y productos relacionados como capas de confianza.

    RESULTADO

    Un descubrimiento más simple y fichas que construyen confianza antes de la compra.

    PANTALLAS DEL PROTOTIPO · BUSCADOR Y FICHAS
    Pantalla del prototipo: Home

    Entrar sin saber qué buscás

    Pantalla del prototipo: Explorar

    Búsquedas y colecciones guiadas

    Pantalla del prototipo: Detalle de producto

    Precio y specs en el primer pantallazo

    Pantalla del prototipo: Reseñas

    Opiniones antes de decidir

    09 / LO QUE APRENDÍ

    “Es importante acompañar después de la compra, con todo a la mano en un solo lugar.”

    “Entre tres miradas, cada decisión se defendía mejor: trabajar en equipo hizo mejor el diseño.”

    “Escuchar a las personas antes de dibujar pantallas cambia lo que uno cree que hay que resolver.”

    ¿Hablamos?

    Si buscás una diseñadora de producto con foco en e-commerce y experiencias móviles, me encantaría contarte más de este caso.