Casos de estudio

Una Historia de UX(Mi veldá)

Selene Castilla@soylarojaselene.castilla@the-cocktail.com

¿Cuál era el reto?

Diseño de experiencias digitalesHemos definido 3 fases para el desarrollo de este proyecto:

4UX NIGHTS XI

A. User ResearchB. Customer JourneyC. Impact Map

A. Arquitectura de información

B. PrototiposC. Interfaz de usuario

A. Front endB. Back end

FASE IDEFINICIÓN

FASE IIDISEÑO

FASE IIIDESARROLLO

1. Definición

2. Diseño

3. Desarrollo

Contenido

5

A. User ResearchB. Customer JourneyC. Impact Map

A. Arquitectura de información

B. PrototiposC. Interfaz de usuario

A. Front endB. Back end

FASE IDEFINICIÓN

FASE IIDISEÑO

FASE IIIDESARROLLO

Diseño de experiencias digitalesHemos definido 3 fases para el desarrollo de este proyecto:

6UX NIGHTS XI

¿Qué hicimos?

Preguntar . . .

Personas

9

Personas

10

Definimos los usuarios….Tanto los actuales como el nuevo mercado al que queremos acceder a través del rediseño y sus objetivos y necesidades de un sitio como el nuestro.

11

Partimos de un manifiesto de UX…1. Facilitar una experiencia coherente y adaptada a dispositivos y pantallas

2. Ser diseñada para un uso a través de distintos dispositivos

3. Dotar de información relevante para la toma de decisiones

4. Evidenciar los controles y opciones

5. Evitar formularios demasiado largos

6. Eliminar distracciones innecesarias

7. En caso de ecommerce, permitir la compra sin estar registrado

8. Indicar siempre el progreso del usuario en el proceso de compra o avance

9. Retroalimentar cualquier acción del usuario

10.Fomentar la credibilidad y confianza del usuario

11. Permitir métodos de pago o transacciones cómodos desde cualquier dispositivo

12.Aprovechar características propias de dispositivos móviles (geolocalización y otros sensores)

12

13

Impact Map

Se realiza utilizando la metodología Impact Mapping, que es la visualización del alcance y los resultados asumidos y se representa con un mapa mental que va creciendo. Parte de la meta del negocio y la va alineado con las expectativas del usuario final, hasta convertirse en un listado de requerimientos y características que debe tener la solución.

DEFINICIÓN

¿Por qué?Objetivos de Negocio

& del Proyecto

¿Quién?Grupos de Usuarios

& Personas

¿Cómo?User Stories

¿Qué?Características & Funcionalidades

Gojko Adzicgojko.net/effect-map

UX NIGHTS XI

Objetivos de los usuarios

Las user stories pueden cumplirse de varias maneras cuando se construye una experiencia de usuario digital.

14

DEFINICIÓN

FUNCIONES ARQUITECTURADE INFORMACIÓN DISEÑO+ +

UX NIGHTS XI

Impact Map

16

17

Y encontramos allá afuera lo que nos inspira….a crear una experiencia relevante y coherente con lo que sucede alrededor.

18

19

• ¿Cómo puedo satisfacer mejor los requisitos y necesidades detectados en nuestros usuarios?

• ¿Qué servicios puedo crear para atraer nuevos segmentos de mercado?

• ¿Cuáles son los recursos y capacidades necesarias para prestar esos servicios?

• ¿Los servicios son seguros, ofrecen la disponibilidad y continuidad necesarias?

• ¿Qué recursos necesito para prestar los servicios con los niveles de calidad propuestos?

• ¿Están todos los involucrados informados sobre los objetivos y alcance de los nuevos servicios o de las modificaciones a realizar en los ya existentes?

• ¿A quiénes involucra nuestra oferta de servicios?

Funcionalidades Top Básicas

5 10.1 Link al sitio web del proveedor o evento Abrir otra pestaña para el sitio web del proveedor

4 1.1 Fotogalería Artículos con galerías de imágenes4 1.2 Videogalería Artículos con gifs, vines, material multimedia

4 1.3 Menús drop-down visuales Grande con thumbnails y links a las diferentes subsecciones. Presenta artículos de la sección.

4 6.1 Banners con Publicidad

– En espacios reservados – Consistencia en espacios designados– Despliegue de información relacionada al contenido o comportamiento del usuario.

3 2.1 Carrousel con los últimos artículos Los últimos artículos filtrados por fecha de publicación

3 2.2 Lista Lo último Lista que presenta los últimos artículos publicados

3 2.3 Listas Top 10 Lista que presenta los últimos artículos filtrados por favoriteados

3 2.4 Lista Top 10 cerca de mí Lista en el Homepage que filtra por rating y localización los artículos

3 3.1 Comentarios Publicar y consultar comentarios al artículo

3 4.1 Newsletter

Opciones para suscibirse: - Sólo newsletter: periodicidad(Enlaces a artículos y secciones)- Recibir promociones de otros proveedores

2 10.2 Botón Reservar Link al área de reserva del sitio web del proveedor o evento

20

Link al sitio Web del Proveedor o Evento

21

Fotogalerías

22

Fotogalerías

23

Galerías Full-bleed

24

Videogalería

25

Menús Drop-Down

26

Banner con publicidad

27

Carrousel Últimos Artículos

28

Listas

29

Listas

30

Comentarios

31

Botón Reservar

32

Recomendaciones Proveedores

33

Funcionalidades Top Agregadoras de Valor

3 3.2 Rating HE IDO

Botón para calificar la visita al destino a través un menú con las opciones:

- Me encantó- Me gustó- Está OK- No me gusto.– Quiero ir

3 3.3 Información de autores (expertos) Biografía del autor, links a redes sociales del autor, Botón para preguntas o comentarios.

3 9.2 Localización en el mapa Ubicar visualmente el destino en el mapa (Google maps)

3 9.3 Cómo llegar Poner una dirección y que se cree la ruta para llegar (Google maps)

3 14.1 Calendario Filtrar u organizar según fechas, actividades, estilo de vida.

3 18.2 Lista ¡Este mes, no te puedes perder…! Sección que presenta las actividades del calendario del mes en curso

2 15.2 Agregar a mi colección Botón para guardar el artículo en el área privada del usuario

1 30.1 Compartir colección Compartir la colección de artículos con otros usuarios

1 23.1 Encuestas Encuestas sobre el contenido del artículo.

34

Rating

35

Información de autores (expertos)

36

Información de autores (expertos)

37

Mapas: Localización y Rutas

38

Encuestas

39

1. Definición

2. Diseño

3. Desarrollo

Contenido

Qué encontramos1. Los usuarios buscan y se inspiran de diferentes maneras, el sitio debe proveer una navegación

facetada para satisfacer maneras de pensar diversas.

2. Muchas secciones en realidad se refieren a características del contenido; estas pueden reflejarse mejor como filtros, funcionalidades y secciones del layout (diseño).

3. Según las métricas, los usuarios buscan información sobre la historia y cultura mexicanas, sin embargo, la arquitectura actual no facilita la encontrabilidad de esta información.

4. Fiestas, tradiciones y eventos constituyen algunas de las principales búsquedas de los usuarios, la temporalidad es importante y debe brindar novedades congruentes con el momento actual.

5. Hay contenido específico del DF, como Barrios Mágicos del DF, que atrae mucho tráfico al sitio.

6. La arquitectura actual complica la inspiración que puede lograrse con el contenido actual y de la calidad del sitio.

41

Arquitectura de Información

Arquitectura de información actual

DESTINOS TIPOS DE VIAJE ESPECIALES

Estados

Áreas Naturales

Ciudades

Barrios Mágicos del DF

Ciudades Coloniales

Playas

Pueblos Mágicos

Pueblos con Encanto

Zonas Arqueológicas

Fin de Semana

Aventura y Ecoturismo

De Placer

Cultural

Recreativo

Tips de Viaje

CONOCE MÉXICO

Historia

Naturaleza

Cultura

Gastronomía

43

Arquitectura de información Vértice

44

45

46

5 Lecciones

1. El diseño de personas es clave para tomar decisiones: mantenlas como centro de tu conversación.

2. A veces tienes que adaptar tus entregables al lenguaje del cliente, eso no implica que cambies u omitas los procesos.

3. Mientras más temprano involucres a todas las áreas, menos tendrás que ir para atrás

4. No todo se basa en información cualitativa, escucha la data

5. Cualquier decisión que cree conflicto, pruébala con usuarios verdaderos

47

Casos de estudio

Una Historia de UX(Mi veldá)Selene Castilla | @soylarojaselene.castilla@the-cocktail.com