Ponencia de Luz De-Leon (Directora creativa de Diga33!) en el MeetMagento 2014

1. UX
Responsabilidad creativa
en ecommerce
luz@diga-33.com
www.diga-33.com
@diga33

2. Un poco de (nuestra) historia
www.diga-33.com "
luz@diga-33.com"
@diga33
Año 1999,
Banesto y CAP
Gemini, los
inicios
Año 2009, Ignacio
Riesco nos encarga
el primer comercio
electrónico
Año 2007, nace
Diga33! Pero
llevamos toda la
vida en esto
Buena tardes, soy Luz De-León directora creativa y socia fundadora de Diga33!, una empresa que lleva desde el 2007
dedicada a diseñar experiencias para los usuarios
Llevo toda la vida en esto, como 16 años desde que arrancara un buen día en el gabinete de usabilidad de Banesto en mi
época de CAP Gemini, llevar toda esta vida implica haber visto una gran evolución, muchos cambios, muchas idas y venidas
respecto los que el usuario es, espera o hace en la web.
Cuando hace más de cuatro años, Ignacio Riesco, hoy CEO de interactiv4 contactó conmigo y me propuso hacer la dirección
creativa de un comercio electrónico me pareció divertido e interesante y, por supuesto, un reto.

3. Crear experiencia de usuario en Banca
genera más opinión que resultado
www.diga-33.com "
luz@diga-33.com"
@diga33
El usuario está cautivo del sistema
Mi trayectoria había venido desde sus inicios muy unida a un sector que aunque gris, tenemos que agradecerle el impulso
que ha dado al UX y que es, ni más ni menos, que la Banca y los Seguros.
Crear experiencia de usuario en Banca, a menudo genera más opinión que resultado ya que el usuario está cautivo del
sistema.

4. En el comercio electrónico, la matemática no
miente: o vendes o no vendes.
www.diga-33.com "
luz@diga-33.com"
@diga33
Pero en el caso de un comercio electrónico, la matemática no miente: o vendes o no vendes.

5. Tener un producto
atractivo
Facilitar los
procesos
barrera le
suponen
ENTONCES
el diseñador de
experiencia lo
tiene fácil.
www.diga-33.com "
luz@diga-33.com"
@diga33
Ser fiable
(plazos de
envío y
devolución)
Una política de
precios competitiva
Si el cliente hace su parte: tener un producto atractivo, una política de precios competitiva, ser fiable cumpliendo con los
plazos de envío y devolución y facilitar al cliente los procesos que más barrera le suponen (conocer su talla, comprobar unas
la características técnicas, elegir que producto es el mas adecuado de entre una selección…), a menudo el diseñador de
experiencia lo tiene fácil.

6. Diseñar para ecommerce
www.diga-33.com "
luz@diga-33.com"
@diga33
No consiste en: ganar premios, ni escuchar
literalmente al cliente, ni copiar otras tiendas…
Diseñar para e-commerce no consiste en ganar premios, ni en escuchar a un cliente que unas veces te dice “Queremos ser
como Zara” y otras veces te dice “No, pero sed muy creativos”

7. ZARA
Marca con un recorrido
(desde 1974)
www.diga-33.com "
luz@diga-33.com"
@diga33
Producto con demanda
1808 tiendas en el mundo
a 30 de octubre del
2013…
Sííí, ¡y su tienda on-line mola! ¿pero es usable?
El cliente se olvida a menudo de que Zara vende porque es Zara, es decir, tiene una marca con un recorrido, un producto con
demanda y 1808 tiendas en el mundo a 30 de octubre del 2013… Siii, y su tienda on-line mola pero desde los que vivimos el
UX cada día le encontramos sus problemas obvios de usabilidad.

8. Sed muy creativos = 3 insatisfechos
www.diga-33.com "
luz@diga-33.com"
@diga33
Y el “pero sed muy creativos” es un pozo sin fondo de insatisfacción para tres implicados: el cliente, que en el fondo quiere
una tienda que venda, el usuario, que el pobre no se entera de nada y el propio diseñador que se ha vuelto loco siendo muy
creativo y va a terminar haciendo lo de siempre pero en la séptima versión

9. Momentos clave en el diseño de UX
de una tienda on-line:
1. LA APROXIMACIÓN
www.diga-33.com "
luz@diga-33.com"
@diga33
1. LA APROXIMACIÓN
2. EL PROCESO DE COMPRA
3. E
El diseñador es claramente responsable de tres momentos clave en el diseño de UX de una tienda on-line:
- La aproximación: el cliente ha llegado a esta tienda para comprar, aunque si un cyberdependiente se le acercara a
preguntar “puedo ayudarle?”, siempre contestaría “no, estoy mirando”,

10. 1. LA APROXIMACIÓN
Necesidades de la aproximación
www.diga-33.com "
luz@diga-33.com"
@diga33
moverse con libertad
por la tienda
encontrar
aquello que se
esta buscando
mirar:
producto y
precio
por lo tanto debemos permitirle mirar: mirar el producto y mirar el precio, ambos son los reyes de nuestro comercio
electrónico, y deben ser los protagonistas de nuestro trabajo. Aproximarse al producto significa moverse con libertad por la
tienda y encontrar aquello que se esta buscando,

11. 1. LA APROXIMACIÓN
Las herramientas
✓
Buscadores
✓
Filtros (LAYERED de Magento)
✓
Comparadores
✓
www.diga-33.com "
luz@diga-33.com"
@diga33
Opiniones verificadas de otros usuarios que
han comparado el producto
buscadores semánticos, filtros como el LAYERED de magento donde podemos limpiar los listados de lo que no nos interesa,
comparadores que nos ayuden a decidirnos entre un numero reducido de productos, opiniones de otros usuarios
compradores que tienen este producto (opiniones verificadas)… Ayudas que nos van a llevar a la toma de decisión de
compra “quiero este producto”

12. 1. LA APROXIMACIÓN
Las herramientas
Buscadores
www.diga-33.com "
luz@diga-33.com"
@diga33

13. 1. LA APROXIMACIÓN
Las herramientas
Filtros (LAYERED de Magento)
www.diga-33.com "
luz@diga-33.com"
@diga33
filtros como el LAYERED de magento donde podemos limpiar los listados de lo que no nos interesa

14. 1. LA APROXIMACIÓN
Las herramientas
Comparadores
comparadores que nos ayuden a decidirnos entre un numero reducido de productos,
www.diga-33.com "
luz@diga-33.com"
@diga33

15. 1. LA APROXIMACIÓN
Las herramientas
Opiniones verificadas
www.diga-33.com "
luz@diga-33.com"
@diga33
opiniones de otros usuarios compradores que tienen este producto (opiniones verificadas)…

16. 1. LA APROXIMACIÓN
Necesidades de la aproximación
Toma de decisión
de compra: “quiero
este producto”
moverse con libertad por la
tienda
Buscadores
Filtros
Comparadores
Opiniones verificadas
encontrar aquello
que se esta
buscando
mirar: producto y
precio
Ayudas que nos van a llevar a la toma de decisión de compra “quiero este producto”
www.diga-33.com "
luz@diga-33.com"
@diga33

17. Momentos clave en el diseño de UX
de una tienda on-line:
2. EL PROCESO DE COMPRA
www.diga-33.com "
luz@diga-33.com"
@diga33
1. LA APROXIMACIÓN
2. EL PROCESO DE COMPRA
3. E
El proceso de compra: Ya esta, lo quiero, venga ¿qué tengo que hacer? envíamelo enviamelo, quiero pagar este producto y
tenerlo YA…

18. 2. EL PROCESO DE COMPRA
Necesidades del proceso de compra
www.diga-33.com "
luz@diga-33.com"
@diga33
AÑADIR AL
CARRITO
REVISAR EL
CARRITO
COMPLETAR
LA COMPRA
PAGAR

19. 2. EL PROCESO DE COMPRA
Necesidades del proceso de compra
www.diga-33.com "
luz@diga-33.com"
@diga33
AÑADIR AL
CARRITO
Ya esta, lo quiero, venga ¿qué tengo
que hacer? envíamelo envíamelo,
quiero pagar este producto y tenerlo
YA…
REVISAR EL
CARRITO
COMPLETAR
LA COMPRA
COMPRABILIDAD
PAGAR
Bien, el comprador esta decidido, ahora vamos a hablar de USABILIDAD con mayúsculas o lo que Juan Alcántara bautizó
hace ya dos años como “Comprabilidad”.

20. 2. EL PROCESO DE COMPRA
Necesidades del proceso de compra
Elegir el producto (talla, u
otra configuración) y
añadirlo al carro
www.diga-33.com "
luz@diga-33.com"
@diga33
na tienda on-line debe poner el máximo empeño en facilitar la compra al usuario desde el momento en que elige el
producto, indica la talla que desea (u otra configuración) y añade el producto al carrito,

21. 2. EL PROCESO DE COMPRA
Necesidades del proceso de compra
Revisar mi compra
de ahí en adelante, revisar su compra,
www.diga-33.com "
luz@diga-33.com"
@diga33

22. 2. EL PROCESO DE COMPRA
Necesidades del proceso de compra
Completar mi
compra
www.diga-33.com "
luz@diga-33.com"
@diga33
Pagar
proceder al checkout y finalmente pagar es un recorrido con numerosos puntos de abandono que tenemos que contemplar y
sellar.

23. Momentos clave en el diseño de UX
de una tienda on-line:
3. EL RECUERDO
www.diga-33.com "
luz@diga-33.com"
@diga33
1. LA APROXIMACIÓN
2. EL PROCESO DE COMPRA
3. EL RECUERDO
El recuerdo: ¿hemos hecho el proceso de compra satisfactorio? ¿el usuario esta contento?

24. 3. EL RECUERDO
Necesidades para ser recordados
¿Hemos hecho el proceso de compra
satisfactorio?
¿El usuario esta contento?
¿La compra respira marca?
www.diga-33.com "
luz@diga-33.com"
@diga33
bien, el proceso debe estar cubierto por el paraguas de una marca, que presenta durante todo el proceso haya impregnado
con su identidad la compra, colores logotipos, elementos visuales propios de la marca, deben ser usados con inteligencia
para que la compra se asocie inevitablemente a la marca sin haber sido invadida por la marca.

25. 3. EL RECUERDO
El nuevo paradigma del diseñador
www.diga-33.com "
luz@diga-33.com"
@diga33
Quiero el
logotipo mas
grande
VS
Quiero el botón
“comprar” más
grande
El proceso creativo del diseñador tradicional se ha roto y de aquella famosa frase del cliente sobre a que tanto hemos
bromeado “quiero el logotipo más grande” pasamos a un nuevo paradigma “quiero el botón de compra más grande”

26. 3. EL RECUERDO
El nuevo paradigma del diseñador
www.diga-33.com "
luz@diga-33.com"
@diga33
Los proyectos ya
NO empiezan en
el Photoshop
"
Y para garantizar el éxito en esos tres momentos, la realización de prototipos es nuestra clave, ninguno de nuestro proyectos
empieza ya en el Photoshop

27. 3. EL RECUERDO
La realización
de prototipos
www.diga-33.com "
luz@diga-33.com"
@diga33
La clave para no
“pintar” sino diseñar
interacción
y los mas importantes ni siquiera comienzan en un ordenador, empezamos sentándonos con el cliente, preguntándoles
cuáles son sus objetivos, quiénes son sus compradores, y de esta mesa pasamos a la mesa del consultor de ecommerce,
generalmente Nacho o Juan, con quienes debatimos rotulador en mano si vamos a implementar una u otra funcionalidad y
cómo vamos a hacerlo.

28. 3. EL RECUERDO
Y ¿Dónde queda el papel del
diseñador de UX?
Una nueva
responsabilidad:
trabajar la
funcionalidad
El papel del diseñador de experiencia es Innovar en la funcionalidad
www.diga-33.com "
luz@diga-33.com"
@diga33

29. 3. EL RECUERDO
Y ¿las guidelines?
1 Omnicanal
www.diga-33.com "
luz@diga-33.com"
@diga33
Pero si tengo que extraer diez claves / tendencias o puntos clave que yo considero para una tienda on line, serían:
1. Omnicanalidad: experiencias sin costuras (seamless)

30. 3. EL RECUERDO
Y ¿las guidelines?
2 Fotos más grandes
2. Grandes fotos: protagonismo del producto, emocional!
www.diga-33.com "
luz@diga-33.com"
@diga33

31. 3. EL RECUERDO
Y ¿las guidelines?
3 Social
www.diga-33.com "
luz@diga-33.com"
@diga33
3. Social: reseñas de compradores verificados, personalities, expertos reconocidos que ayudan a tomar decisiones basadas
en la confianza

32. 3. EL RECUERDO
Y ¿las guidelines?
4 Megamenus
www.diga-33.com "
luz@diga-33.com"
@diga33
4. Megamenús: con navegación interna, promociones, banners, producto… Podemos reducir hasta tres clics en la
navegación a niveles internos!

33. 3. EL RECUERDO
Y ¿las guidelines?
5 Fidelización: puntos y cupones
www.diga-33.com "
luz@diga-33.com"
@diga33
5. Fidelización; puntos que promuevan la viralizacón, mejora en el ticket de compra, preferencia sobre unos productos u otra
(para obtenerlos) y cupones que favorezcan el retorno (para redención)

34. 3. EL RECUERDO
Y ¿las guidelines?
6 Checkout sencillos
www.diga-33.com "
luz@diga-33.com"
@diga33
6. Facilitar los puntos barrera y de abandono: checkout sencillos y con el menor numero de campos posible

35. 3. EL RECUERDO
Y ¿las guidelines?
7 Funcionalidades sorprendentes
www.diga-33.com "
luz@diga-33.com"
@diga33
7. Funcionalidades sorprendentes: aquí hay que ser creativo, ¿quien no ha hecho una prueba de color pequeña en una pared
y le ha encantado el resultado pero se ha sentido horrorizado al pintar la pared entera? bajo esa premisa en esta tienda de
pinturas, pintábamos el fondo completo de la pantalla con el color en rollover

36. 3. EL RECUERDO
Y ¿las guidelines?
8 Minicarts funcionales
www.diga-33.com "
luz@diga-33.com"
@diga33
8. Minicarts funcionales: cada tienda tiene un estilo de compra distinto, no es lo mismo una tienda de joyas que un
supermercado, el carrito es el exponente más importante de esta diferencia, debemos exprimir su utilidad por encima de
almacenar producto (aconsejar? completar?, sustituir producto? entender qué quiere el cliente?)

37. 3. EL RECUERDO
Y ¿las guidelines?
9 Registros sencillos y atractivos
www.diga-33.com "
luz@diga-33.com"
@diga33
9. Registros atractivos y sencillos: capturemos, mostremos las ventajas y simplifiquemos, qué hay mejor para le usuario que
un registro con tan sólo autentificarse en sus redes sociales favoritas?

38. 3. EL RECUERDO
Y ¿las guidelines?
10 Test A/B
www.diga-33.com "
luz@diga-33.com"
@diga33
10. Test A/B: en este recorrido hay muy pocas cosas que inventar, los diseñadores de experiencia tenemos por lo general
duda entre dos opciones que funcionan o entre una que funciona y una muy nueva. El mejor test de usuario en un comercio
electrónico ágil es el test A/B, navegación real, resultados reales, y evitamos perder con un teste estándar hasta una media
de tres semanas en la puesta en producción.

39. www.diga-33.com "
luz@diga-33.com"
@diga33
¡MUCHAS GRACIAS!
Diga33! creando experiencias desde el 2007