Home | UX/UI ~ Diseño gráfico ~ Retail experience design

Este proyecto ha contado con varias evaluaciones y user testings de usuarios reales que me han permitido acercarme desde un proyecto académico a un contexto y forma de trabajar real. Ha sido un gran ejemplo de diseño centrado realmente en el usuario y me ha parecido muy interesante y estimulante el proceso de adaptación constante a la respuesta del usuario y dar solución a los problemas que se presentaban.

Al trabajar solamente en formato app se realiza un trabajo profundo de sintetización de información que ayuda mucho a centrarse en lo importante y relevante, algo diferente a las versiones escritorio que pueden permitirse otras licencias. Conclusiones

Mira el prototipo en acción!

07 Prototipo final interactivo

La tercera y última encuesta tiene por objetivo valorar el prototipo con las mejoras de usabilidad previamente comentadas y el estilo definitivo con las interacciones finales. Se vuelve a poner atención a la experiencia del usuario dentro de los flujos propuestos para valorar la satisfacción de los mismos en diferentes aspectos de usabilidad y navegación. * Tercera evaluación

En el prototipo high fidelity se aplica la guía de estilo definitiva (colores, tipografías, etc), con todas las imágenes y mejoras de usabilidad resultantes de las conclusiones obtenidas de la segunda evaluación. Este prototipo contiene interacciones más relevantes que el anterior para dotarle de cierto realismo. 06 Prototipado HF

La segunda encuesta tiene por objetivo valorar la usabilidad del usuario en el wireframe de baja fidelidad, ya que sitúa al mismo en los diferentes flujos y mide si la interacción con los mismos es efectiva. Se pone foco en diferentes aspectos teniendo en cuenta si el usuario está registrado como si no y el proceso de registro.

Se valoraron varios aspectos de los cuales cabe destacar: la comprensión del contenido y del funcionamiento de la app, si el proceso de compra es fácil y rápido de ejecutar, la navegabilidad e ubicación del usuario dentro de la app y si la estructura es consistente y coherente. * Segunda evaluación

En el prototipado inicial se establecen dos flows diferenciados. Por un lado se pretende que la app sea lo más personalizada posible para el usuario, por lo tanto se diseña el flow del usuario ya registrado con acceso a su área privada y sugerencias a actividades cercanas al él que responden a sus preferencias.
Por otro lado se plantea la experiencia para el usuario no registrado de visita esporádica y que no desea pasar por el proceso de registro. El planteamiento es igual de ágil con el fin de atraer a nuevos usuarios simplificando el proceso de búsqueda pero siendo también personalizado. 05 Prototipado LF

Ejemplo de banner publicitario de la app

En cuanto a la creación de la identidad visual se crea el imagotipo, que está inspirado en la simbología de los 4 elementos ya que la aplicación se centrará en actividades recopiladas en cuatro grandes categorías que están relacionadas con los elementos naturales: fuego, agua, aire y tierra. Asimismo la combinación de los dos triángulos representan las dos primeras letras de la palabra Aventuralia (A y V).
La paleta de color quiere transmitir tranquilidad y armonía, y las tipografías escogidas son sin serifas y de líneas rectas y limpias. 04 Branding

Se determinan los elementos y grupos de elementos que deben estar en la estructura web con un mapa mental.
También se realiza un diagrama de flujo que permite ver todos los journeys posibles y variables que puede encontrar el usuario mientras navega, esto ayuda a jerarquizar los contenidos y ordenarlos de forma adecuada.

03 Arquitectura de la información

Se realiza una primera encuesta destinada a varias personas reales englobadas en el público objetivo para determinar un primer escenario que sirve de orientación para el diseño y estructura de la app.

En una primera parte se han recopilado datos generales sobre:
· Usuarios: género, estado civil y lugar de residencia.
· Comportamientos en sus hábitos de viaje: personas con las que se suele viajar/viaje individual, destinos nacionales o internacionales, tipo de viajes en el que se prefiere invertir (viajes largos o escapadas).
· Planificación previa: medio a través del cual se reservan los viajes (ej: app, ordenador sobremesa, agencia, etc), preferencias prioritarias a la hora de viajar (destino, tipo de actividad, precio, etc).

En la segunda parte se midieron datos específicos enfocados a la propuesta personal de la app enfocada a la reserva de actividades:
· Tipo de categorías de actividades (enoturismo, gastronomía, etc).
· Medio de desplazamiento al destino (vehículo propio, tren, etc).
· Frecuencia de búsqueda de actividades.
· Momento de búsqueda de actividades (por ocasión especial o habitualmente).
· Valoración de elementos de un agencia online. * Primera evaluación

Se ha creado el perfil de los user personas y se realizan sus customer journey maps en el proceso de búsqueda de actividades puntuales de ocio. Paleta de color y tipografías limitadas, imágenes atractivas
Reserva de actividad con pocos clics
Presencia y visibilidad del área privada en página principal

Sobrecarga de elementos (ruido visual), mala legibilidad de tipografía y colores e imágenes con mal contraste
Página principal con descripciones muy largas
Diseño no responsive La investigación comienza haciendo benchmarking de varias páginas y apps de viajes y actividades de ocio atendiendo a varios puntos: accesibilidad, diseño corporativo, diseño responsive, estructuración de contenidos, productos o servicios y estructura del área privada.
Se sacan varias conclusiones al detectar los errores más comunes. Estos son algunos DOS y DON´TS: 02 Análisis e investigación

3 Simplificar el proceso de búsqueda y hacerlo más “friendly” e inspirador

2 Ofrecer un catálogo de actividades de proximidad de presupuesto bajo-medio de calidad y cuidadosamente seleccionadas

1 Crear una experiencia digital personalizada acorde a los intereses y ubicación del usuario

OBJETIVOS La oferta de actividades online es demasiado extensa, los usuarios se ven saturados en el proceso de búsqueda (uso de demasiados filtros para crear una experiencia de usuario personalizada)
Actividades lejos del lugar de residencia del usuario impactan en el medio ambiente porque suponen un desplazamiento en un medio de transporte más contaminante, así como una inversión de tiempo en los desplazamientos que resta de tiempo de disfrute como tal
Usuario con presupuesto ajustado destinado a actividades para salir de la rutina y desconectar a corto plazo (fines de semana, puentes, etc) y movilidad limitada (coche, tren o autobús)

PROBLEMAS Aventuralia es una app que ofrece actividades dentro del territorio nacional englobadas en 4 categorías (balnearios/spas, enoturismo, gastronomía y cultura) cuya misión es fomentar el turismo de proximidad y ofrecer una experiencia de usuario personalizada. 01 Contexto

Proyecto académico

App

UX/UI Designer

Figma

Diseño y creación de prototipo de una app de actividades de ocio llamada Aventuralia y diseño de marca e identidad corporativa AVENTURALIA

VER VÍDEO

Este proyecto me ha permitido tener una visión 360º al abordar todo el proceso completo desde la investigación, la arquitectura de la información y el prototipado, hasta el desarrollo real de la web en dos formatos y completamente responsive, lo cual me ha servido para tener en cuenta las distintas interacciones del usuario dependiendo del dispositivo.

Al ser un proyecto ficticio ha sido muy interesante crear una nueva actividad para la asociación que estuviese alineada con su misión y adaptada al funcionamiento de otras actividades de las cuales he tomado referencias, por lo que he disfrutado mucho del proceso de research, así como de la conceptualización con el branding aplicando mis conocimientos de diseño gráfico.

Ha sido muy satisfactorio ver como el proyecto tomaba vida siempre evolucionando con cambios, rectificaciones y adaptaciones. El diseño web está en constante transformación y hay que saber adaptarse, ya que los usuarios cambian y por lo tanto los productos digitales han de ser revisados y testeados constantemente para ofrecer una buena experiencia de usuario.

Conclusiones

Este vídeo promocional formaría parte de la estrategia de marketing para promocionar la actividad y poner en valor estos establecimientos como parte de la historia de la ciudad de Barcelona y su carácter familiar, tradicional y cercano. 06 Vídeo promocional

¿Todavía no has entrado?

Home 48h OPB Home 48h OHB Subpágina Emblemàtiques Subpágina Emblemàtiques Páginas tiendas Páginas tiendas Página reserva Página reserva

Con el prototipado se ha definido visualmente la estructura de la web con los wireframes y su imagen final con el high fidelity. Finalmente se han añadido interacciones y se ha procedido a hacer un user testing con una evaluación heurística para comprobar la usabilidad y experiencia de usuario.

05 Prototipado

Para la creación de la identidad visual de Emblemàtiques se establece la estrategia gráfica del proyecto con la guía de estilo.
El look & feel quiere transmitir conceptos como tradición, barrio y familiar, por ello se ha escogido una paleta de colores cálidos provenientes de elementos como la pintura granate de las carpinterías de tiendas antiguas, el marrón de la madera, y el amarillo de la iluminación cálida junto con los dorados de las tipografías de los rótulos antiguos.
En cuanto a la tipografía se opta por una más ornamental para títulos y subtítulos, y una sin serifas para el resto de textos.
La construcción de la imagen de marca con del logotipo e imagotipo responden también a formas de carteles antiguos y al estilo de los rótulos clásicos acompañados de florituras decorativas. Haciendo guiños al pasado se ha optado por una estética vintage por la naturaleza del proyecto acompañada de imágenes de texturas de escritos antiguos de fondo e ilustraciones vintage, para plasmar la personalidad y carácter de las mismas, todo ello combinado con una maquetación minimalista moderna para adaptarse al mundo digital. 04 Branding

Reserva de actividad Consulta de actividad

Teniendo en cuenta el objetivo de los usuarios y los task flows requeridos se procede a definir y concretar la estructura del mapa web y el contenido de la misma con el site & navigation map, así como la organización y las relaciones entre todos los elementos y la planificación del diseño de interacción que va a tener la web.

03 Arquitectura de la información

En esta fase se ha analizado al cliente, la Asociación 48h Open House Barcelona, y su modelo de negocio. Al ser una asociación sin ánimo de lucro la mayoría de las actividades que ofrecen son de carácter gratuito. Todo ello es posible gracias a colaboradores, patrocinadores y micromecenas. Se ha revisado también la estructura de la web y sus puntos de mejora. En cuanto al branding no varía y se mantiene la paleta de color que tiene.

Por otro lado se ha analizado la actividad que ofrece la asociación y que se toma como referente “Espais Ocults”. Esta actividad consiste en visitas guiadas a diferentes espacios y tiene cierto recorrido en la agenda de la asociación, por lo tanto podemos obtener datos tanto cuantitativos como cualitativos. Se analiza también la experiencia de usuario en su web al consultar y reservar la actividad y se detectan prácticas a evitar para la creación de “Emblemàtiques” como:

· Navegación en punto muerto al consultar los espacios a visitar
· Experiencia de usuario sin continuidad en el objetivo final (reserva)
· Reserva de la actividad a través de plataformas externas, posible abandono
de los usuarios o desconfianza

Por último se ha realizado benchmarking relacionado con la creación de la actividad
de Emblemàtiques y su posicionamiento en el mercado.

Con base en la investigación, se ha creado a los user personas, que representan el target. Se realiza sus customer journey maps en el proceso de consulta y reserva de la actividad, y se identifican los puntos débiles del proceso y las oportunidades.

02 Análisis e investigación

3 Desarrollo del proyecto con diseño responsive en versión escritorio y móvil

2 Creación de un diseño adecuado a la experiencia de usuario tanto para la home de la asociación como la de la nueva actividad

1 Poner en valor y visibilizar los eventos y actividades que promueve la asociación durante todo el año con la mejora de la estructura web

OBJETIVOS Home de la asociación con estructura poco definida e inconsistente, mejorable en cuanto a la experiencia de usuario y estética
Poca visibilización del catálogo de actividades que ofrece la asociación durante todo el año
Dificultades para el usuario en la consulta y reserva de actividades
Creación de actividad ficticia: toma de información, datos y funcionamiento de otra actividad similar ofertada
PROBLEMAS

La Asociación 48h Open House Barcelona promueve la arquitectura a través de diferentes eventos y actividades.
“Emblemàtiques” es una actividad ficticia que formaría parte del apartado OHB +, que es el apartado donde aparecen las actividades que ofrece la asociación durante el año.

La actividad consiste en jornadas de visitas guiadas a tiendas emblemáticas de la ciudad de Barcelona durante las Semanas de la Arquitectura de 2024, con el objetivo de promover la arquitectura comercial histórica que forma parte de la esencia e identidad de la ciudad. 01 Contexto

SITIO WEB

VER VÍDEO

Figma | HTML, CSS y JavaScript

Proyecto académico

Desktop y app

UX/UI Designer | Front - End Developer

Rediseño y desarrollo de home de la página web de la Asociación 48h Open House Barcelona, y creación de diseño web e identidad visual de subpágina para nueva actividad llamada Emblemàtiques EMBLEMÀTIQUES X 48h Open House Barcelona