Páginas de producto para Bistrohunter

Diseñar las páginas de producto de un buscador de restaurantes

Rol

Diseñora UX/UI

Industria

Comida

Año

2024

Introducción

Bistrohunter es un recomendador de restaurantes y para este proyecto teníamos que crear las páginas de esos restaurantes. El objetivo era mejorar la experiencia del usuario al permitirle acceder a información detallada sobre cada restaurante a través de nuestra web, facilitando así la conversión de recomendaciones en reservas.

El acceso de los clientes a estás páginas es a través de un enlace que lleva directamente a los restaurantes recomendados. Esta página debían contener las características de cada restaurante recomendado, fotografías de la comida y el local, puntuación, ubicación.

Investigación

Antes de diseñar las páginas, llevamos a cabo dos líneas de investigación:

  • Benchmark. Analizamos cómo otras empresas del sector o de la competencia presentan la información en sus páginas de producto. Evaluamos qué datos destacaban y cómo estructuraban el contenido visualmente.

  • Entrevistas. Para entender qué factores influyen más en la elección de un restaurante, realizamos entrevistas donde detectamos los criterios más valorados, como precio,, ubicación, fotografías de la comida o puntuación.

Estructuración de los datos

Con los hallazgos de la investigación, el siguiente paso fue definir qué información incluir en cada página de restaurante. Para ello, cruzamos las preferencias de los usuarios con la información disponible en nuestra base de datos y establecimos una estructura clara.

Nos centramos en presentar los datos de manera ordenada y jerárquica, destacando los aspectos más relevantes primero, como el tipo de cocina o el precio, y dejando otros detalles, como las dietas, en secciones secundarias. También definimos las acciones clave que los usuarios podrían realizar desde estas páginas, como reservar mesa, compartir el restaurante o solicitar nuevas sugerencias.

Introducción

Bistrohunter es un recomendador de restaurantes y para este proyecto teníamos que crear las páginas de esos restaurantes. El objetivo era mejorar la experiencia del usuario al permitirle acceder a información detallada sobre cada restaurante a través de nuestra web, facilitando así la conversión de recomendaciones en reservas.

El acceso de los clientes a estás páginas es a través de un enlace que lleva directamente a los restaurantes recomendados. Esta página debían contener las características de cada restaurante recomendado, fotografías de la comida y el local, puntuación, ubicación.

Investigación

Antes de diseñar las páginas, llevamos a cabo dos líneas de investigación:

  • Benchmark. Analizamos cómo otras empresas del sector o de la competencia presentan la información en sus páginas de producto. Evaluamos qué datos destacaban y cómo estructuraban el contenido visualmente.

  • Entrevistas. Para entender qué factores influyen más en la elección de un restaurante, realizamos entrevistas donde detectamos los criterios más valorados, como precio,, ubicación, fotografías de la comida o puntuación.

Estructuración de los datos

Con los hallazgos de la investigación, el siguiente paso fue definir qué información incluir en cada página de restaurante. Para ello, cruzamos las preferencias de los usuarios con la información disponible en nuestra base de datos y establecimos una estructura clara.

Nos centramos en presentar los datos de manera ordenada y jerárquica, destacando los aspectos más relevantes primero, como el tipo de cocina o el precio, y dejando otros detalles, como las dietas, en secciones secundarias. También definimos las acciones clave que los usuarios podrían realizar desde estas páginas, como reservar mesa, compartir el restaurante o solicitar nuevas sugerencias.

referencia
referencia
referencia
benchmark
benchmark
benchmark

Wireframes y prototipado en alta fidelidad

Primero hicimos unos bocetos a mano para ver donde colocar cada pieza de información. Poco a poco el prototipo fue cogiendo forma con unos wireframes donde estuvimos moviendo las diferentes piezas para ver cómo encajaban mejor.

Tras definir una estructura funcional, pasamos al diseño de alta fidelidad respetando las directrices de la marca. Gracias al UI Kit previamente desarrollado, pudimos agilizar el proceso, asegurando coherencia visual y optimizando tiempos de diseño.

Implementación en No Code y métricas

Para garantizar rapidez y flexibilidad, implementamos este proyecto mediante herramientas No Code. Esto nos permitió realizar experimentos y ajustes sin depender del equipo de desarrollo, optimizando así los tiempos de iteración.

Una vez en funcionamiento, analizamos diversas métricas para evaluar el rendimiento de las páginas. Medimos el tráfico derivado desde WhatsApp, la tasa de conversión en reservas y el comportamiento de los usuarios en la página (tiempo de navegación, clics en CTA, etc.). Esto nos permitió detectar oportunidades de mejora y planificar futuros experimentos para optimizar la experiencia.

wireframes
wireframes
wireframes
componentes
componentes
componentes
prototipo
prototipo
prototipo

Conclusiones y aprendizajes

Las principales conclusiones que extraigo de este proyecto son:

  • No siempre es necesario un desarrollo complejo para validar una idea y generar impacto.

  • La jerarquización de la información es clave cuando se manejan múltiples datos: una estructura clara mejora la usabilidad y la conversión.

  • Implementar soluciones con No Code permite iteraciones rápidas y eficientes, lo que facilita la optimización constante del producto.

Conclusiones y aprendizajes

Las principales conclusiones que extraigo de este proyecto son:

  • No siempre es necesario un desarrollo complejo para validar una idea y generar impacto.

  • La jerarquización de la información es clave cuando se manejan múltiples datos: una estructura clara mejora la usabilidad y la conversión.

  • Implementar soluciones con No Code permite iteraciones rápidas y eficientes, lo que facilita la optimización constante del producto.

Otros proyectos