UX – UI Design

November 7, 2018

En este post muestro lo aprendido durante el curso de UX-UI Designer en NEOLAND Madrid durante el verano de 2018.

Ale-Hop

una cadena de tiendas de regalos nacida en Denia, Alicante, planea su internacionalización y, para ello, quiere comenzar a vender sus productos on-line.

La cadena hace del regalo y el acto de regalar su principal producto.

El trabajo propuesto en la escuela es el diseño de un e-commerce capaz de cumplir con los objetivos de expansión de la compañía.

Sitio Web

www.ale-hop.org

www.ale-hop.org

Service Safari

Tienda ALE-HOP en Madrid

Tienda ALE-HOP en Madrid

Interior de la tienda

UX Research

Utilizando la metodología de Google Design Sprint y Design Thinking, nos acercamos a la compañía con la intención de conocerla mejor. El fin fue conseguir respuestas fidedignas y basar nuestro trabajo en los datos más empíricos posibles, evitando las suposiciones y la contaminación del trabajo con nuestras experiencias personales pasadas.

Utilizando diversas técnicas, reuniremos datos e información que nos ayuden a conocer la compañía y sus productos, así como a sus potenciales usuarios y la competencia. Algunos de los datos recopilados fueron estos:

Planes de expansión

Planes de expansión

Principal Competencia

Principal Competencia

Hábitos de uso

Hábitos de Uso de la Tecnología

Público Objetivo

Público Objetivo

Con la información obtenida tras el UX Research, podemos elaborar los siguientes entregables.

Puedes descargar el documento completo aquí: AleHop_UX_Research.pdf (4.6Mb)

 

Diseño Centrado en el Usuario

User Persona + Empathy Map

Identificamos los principales arquetipos de usuarios de la tienda.
Definimos al usuario digital ideal, con intención de poder tener siempre presente cómo se comporta y qué cosas considera importantes.

Identificación de arquetipos y puntuación

Identificación de arquetipos y puntuación

User Persona

User Persona

Empathy Map

Empathy Map

Customer Journey

Identificamos las tareas a realizar por parte del usuario para conseguir su objetivo. Utilizamos la User Persona y el Empathy Map para identificar los “pain points” o puntos del proceso en los que podemos trabajar para conseguir mejorar la experiencia de usuario.

Customer Journey

Customer Journey

Entre todos ideamos cuatro nuevas funcionalidades. Creemos que estas funcionalidades son capaces de mitigar los aspectos negativos de las tareas a realizar, o enriquecen otros aspectos propios de la marca que interesa resaltar.

Las funcionalidades propuestas son las siguientes:

  • Sugerencias Mágicas: el usuario rellena un pequeño formulario sobre el destinatario del regalo, las respuestas se utilizan para encontrar posibles regalos y ofrecerlas al usuario que busca inspiración.
  • Gestión de Pago en Grupo: una herramienta que ayude al usuario encargado de comprar el regalo. El momento del pago en grupo puede convertirse en una oportunidad de diferenciación de la competencia. La herramienta puede notificar a los integrantes del grupo con la cantidad a pagar y los detalles del regalo.
  • Envíaselo con Mucho Cariño: una herramienta para elegir y personalizar el envoltorio.
  • Comparte el Momento: una galería de imágenes que recoja lo más destacado de los clientes utilizando los productos de la compañía en las redes sociales.

Arquitectura de la Información

User Flow

Decidimos dónde añadir las nuevas funcionalidades en un flujo de compra de un e-commerce internacional habitual.

User Flow

User Flow

Wireframe

Dibujamos diagramas estableciendo las posiciones y tamaños de los distintos contenedores dentro de la pantalla.

Wireframe Lo-Fi a mano alzada

Wireframe Lo-Fi a mano alzada

Taxonomía

Antigua Taxonomía

Antigua Taxonomía

Reagrupamos los productos en una jerarquía con menos niveles, más clara, más coherente e intuitiva.
También trabajamos en el SEO, utilizando términos relevantes, y controlando las cadenas y URLs de los productos.
Taxonomía Propuesta

Taxonomía Propuesta

Work in Progress

Visual Design

Identidad Visual

Evolución Identidad Visual

Ficha de Artículo - Tablet

Propuesta de Pantalla

Prototipado

Propuesta de Interacción para la ficha de producto