UX Nights Caso de Estudio
-
Upload
selene-castilla -
Category
Design
-
view
523 -
download
0
Transcript of UX Nights Caso de Estudio
![Page 1: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/1.jpg)
Casos de estudio
Una Historia de UX(Mi veldá)
![Page 2: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/2.jpg)
Selene [email protected]@the-cocktail.com
![Page 3: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/3.jpg)
¿Cuál era el reto?
![Page 4: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/4.jpg)
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
![Page 5: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/5.jpg)
1. Definición
2. Diseño
3. Desarrollo
Contenido
5
![Page 6: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/6.jpg)
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
![Page 7: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/7.jpg)
¿Qué hicimos?
![Page 8: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/8.jpg)
Preguntar . . .
![Page 9: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/9.jpg)
Personas
9
![Page 10: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/10.jpg)
Personas
10
![Page 11: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/11.jpg)
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
![Page 12: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/12.jpg)
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
![Page 13: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/13.jpg)
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
![Page 14: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/14.jpg)
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
![Page 15: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/15.jpg)
Impact Map
![Page 16: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/16.jpg)
16
![Page 17: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/17.jpg)
17
![Page 18: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/18.jpg)
Y encontramos allá afuera lo que nos inspira….a crear una experiencia relevante y coherente con lo que sucede alrededor.
18
![Page 19: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/19.jpg)
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?
![Page 20: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/20.jpg)
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
![Page 21: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/21.jpg)
Link al sitio Web del Proveedor o Evento
21
![Page 22: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/22.jpg)
Fotogalerías
22
![Page 23: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/23.jpg)
Fotogalerías
23
![Page 24: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/24.jpg)
Galerías Full-bleed
24
![Page 25: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/25.jpg)
Videogalería
25
![Page 26: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/26.jpg)
Menús Drop-Down
26
![Page 27: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/27.jpg)
Banner con publicidad
27
![Page 28: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/28.jpg)
Carrousel Últimos Artículos
28
![Page 29: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/29.jpg)
Listas
29
![Page 30: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/30.jpg)
Listas
30
![Page 31: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/31.jpg)
Comentarios
31
![Page 32: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/32.jpg)
Botón Reservar
32
![Page 33: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/33.jpg)
Recomendaciones Proveedores
33
![Page 34: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/34.jpg)
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
![Page 35: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/35.jpg)
Rating
35
![Page 36: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/36.jpg)
Información de autores (expertos)
36
![Page 37: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/37.jpg)
Información de autores (expertos)
37
![Page 38: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/38.jpg)
Mapas: Localización y Rutas
38
![Page 39: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/39.jpg)
Encuestas
39
![Page 40: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/40.jpg)
1. Definición
2. Diseño
3. Desarrollo
Contenido
![Page 41: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/41.jpg)
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
![Page 42: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/42.jpg)
Arquitectura de Información
![Page 43: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/43.jpg)
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
![Page 44: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/44.jpg)
Arquitectura de información Vértice
44
![Page 45: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/45.jpg)
45
![Page 46: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/46.jpg)
46
![Page 47: UX Nights Caso de Estudio](https://reader035.fdocuments.us/reader035/viewer/2022081604/587f796e1a28ab3f4e8b59f5/html5/thumbnails/47.jpg)
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