Diapositivas presentadas por Juan Arrillaga, UI / UX Designer Onetree en el eCommerce Day Montevideo 2017 el 10 de Agosto 2017.

1. Cómo desarrollar una tienda online
que resuelva la experiencia de compra
en múltiples dispositivos y responda
al concepto mobile first.
Personalización & UX en la práctica
Juan Arrillaga
@arrillagajuan
UI UX Onetree

2. Mobile First

3. Mobile First

4. Arquitectura
de la Información

5. Arquitectura
de la Información
Disciplina que se encarga de organizar
y estructurar los contenidos de un
sitio web, aplicaciones móviles o
medios digitales con el fin de fomentar
la facilidad de uso y la localización de
los elementos (findability).

6. Arquitectura
de la Información
Se convierte en el esqueleto de nuestra tienda y si no está bien construida
y pensada desde un principio nuestro sitio puede fracasar.

7. Con Arquitectura

8. Sin Arquitectura

9. La arquitectura de la información no es más que la
práctica de decidir cómo organizar las partes de algo para
que sea comprensible.

10. Contenido mal estructurado
Mala experiencia de usuario

11. Los elementos visuales, estética,
interacciones y navegación se van a
basar en los principios de la
Arquitectura de la información.

12. Proceso “tipo” de diseño de Ai
Análisis de Contenidos y Servicios
Que tenemos?
Como le damos un órden
Como los usuarios van a interactuar en nuestra tienda
Como se va a etiquetar y nombrar cada producto o servicio.
Organización de la Información
Diseños de los Sistemas de Navegación
Diseños de los Sistemas de Rotulación
1
2
3
4

13. Entender el Flujo
Y todavía aún no hablamos de un Móvil…
¿Que sigue después?
Cómo nuestros usuarios van a llevar a cabo las
tareas en nuestra tienda en base a los
objetivos que el negocio establece

14. Conectar los objetivos del negocio con las necesidades
e intereses del usuario.

15. Entender el flujo implica
De donde viene el usuario antes de llegar a ésta sección?
Donde va a terminar luego de completar la tarea?
Que pasa si la tarea es interrumpida?
Situarse en un contexto

16. Veamos un ejemplo…
Foco en la tarea principal
Evita que el usuario se distraiga de su objetivo
Amazon en el proceso de checkout
elimina el footer y limpia el header

17. Thank you, your order has
been placed
Sugerencias aparecen
una vez concretada la
compra

18. Una tarea a la vez
Pueden haber muchas cosas que se pueden hacer
pero siempre hay una tarea principal.
Concepto

19. ¿Cómo impacta el concepto Mobile First
en nuestro modelo de negocio?
Definir la esencia del Producto

20. Bread Crumbs?

21. Sacar el mayor provecho de cada dispositivo
para mejorar la experiencia de usuario
Pensar en Mobile First...

22. Darle a los usuarios
lo que esperan de su dispositivo móvil

24. El proceso de UX implica mas que decisiones estéticas
Seguir Procesos
Arquitectura de la Información
Entendimiento del Flujo y Contexto

25. GRACIAS!