01.Entender
Barbaros Smokehouse Bbq, es el primer smokehouse en Valencia, España. Detrás del restaurante, tenemos a tres socios, amantes de las carnes ahumadas y a la brasa, que decidieron ser pioneros en el rubro de carnes ahumadas/smoked aquí en Valencia. Cuidan la calidad de la comida al más mínimo detalle, esto también se evidencia en la técnica smoked, que toma 12-14 horas de cocción y ahumado.
- Roles: Product Manager & Diseñadora UX/UI.
- Team: 1 Product Manager, 1 Desarrollador, 1 Diseñador UX/UI, 1 Community Manager, 1 Diseñador Gráfico.
- Duración: 2 meses.
Problema
Un vacío entre la experiencia en sus redes sociales, la página web y la experiencia dentro del restaurante. No existe una correlación entre estas fases de la experiencia del usuario, debido a que su página web carece de identidad de marca y no refleja el alto nivel de profesionalismo, calidad y servicio que se obtiene en el restaurante y en sus redes sociales.
Limitaciones del proyecto
- El alcance del proyecto se limitó a una sola fase de diseño.
- Los stakeholders que no tienen conocimientos técnicos requirieron que las soluciones fueran sencillas de operar y no dependieran de conocimientos técnicos.
- La implementación en WordPress condicionó el desarrollo al uso de plantillas, plugins y otras restricciones, además de una capacidad limitada de personalización mediante código CSS.
- El sistema de reservas, aunque personalizable, se basó en una solución estandarizada con restricciones funcionales.
Priorización por Impacto y Esfuerzo
02. Investigar & Empatizar
Hipótesis
Una baja fidelización fidelización y lento incremento de reservas,debido a que la página web no refleja el nivel de calidad que sí se refleja en sus redes sociales y la experiencia en el restaurante. En las entrevistas lo que busco es evidenciar su proceso de reserva, con qué conectan el diseño de la página web de un restaurante, qué buscan al momento de reservar en línea y cuáles son sus canales de contacto con el restaurante.
Benchmarking
Aproximación de la Investigación
Para comprender a profundidad lo que sucede en el restaurante, primero me reuní con los socios y trabajadores del restaurante, luego conduje una serie de entrevistas con clientes nuevos y recurrentes, en total fueron 15 clientes entrevistados, siendo un 60% hombres, 40% mujeres y entre las edades: 30-60.
Resultados de la Investigación
Insights
Estos son los puntos más significativos que se han descubierto durante la fase de investigación. Estos puntos se deben tomar en cuenta en la estructuración y diseño de la página web.
Empathy Map
En esta fase realizo un profundo ejercicio de comprender y empatizar por completo con los comportamientos, necesidades y deseos de los usuarios.
03.Definir
User Persona & Scenario
Ir al Prototipo
Customer Journey
Es el recorrido completo del usuario antes, durante y después de usar la página web, esto nos permite ubicar los puntos de dolor para aliviarlos y hacer el diseño más eficiente, anticipándonos a la necesidades del usuario durante la navegación y hacer todo el diseño de la experiencia centrado en el usuario.
Solución
El rediseño de su página web, con un diseño que refleje el nivel de calidad de la comida, servicio e identidad del restaurante siendo este el primer smokehouse en Valencia. Dar una experiencia 360° de principio a fin, esto les va permitir fidelizar con mayor rapidez a sus usuarios y a la vez proveer de la misma experiencia a los usuarios, desde el primer contacto con la marca a través de redes sociales, a cuando entran a la página web y finalmente la experiencia dentro del restaurante.
04.Idear
Sitemap
Aquí definimos la arquitectura de la información, ubicamos estratégicamente los CTAs (Llamadas a la acción), la información de la web para que sea optimizada en el posicionamiento de Google y agilizar el proceso tanto de diseño como desarrollo.
User Flow
El flujo de acciones del usuario dentro de la página web, es excelente mapear las acciones del usuario y lograr optimizar las interacciones y navegación, haciendo nuestro sitio web más amigable para el usuario y aumentando la tasa de conversión al saber posicionar bien los CTAs.
05.Prototipar
Wireframe
UI Kit
Look & Feel
Móvil UI
Desktop UI
06.Delivery
Roadmap
Backlog resumido
Este backlog representa una visión estratégica del producto. La ejecución se realizó en sprints iterativos de 1 a 2 semanas.
Criterios de aceptación
- Dado que el usuario accede a la carta desde desktop o móvil,cuando recorre las secciones,entonces se le muestran los platos organizados por categorías de forma clara y ordenada, permitiendo identificar cada categoría sin sobrecarga de contenido.
- Dado que el usuario navega por cualquier página del sitio,cuando desea hacer una reserva,entonces encuentra fácilmente el botón “Reservar” destacado en la barra de navegación y en una sección en cada página del sitio.
- Dado que el usuario inicia el proceso de reservar una mesa,cuando avanza entre los pasos para hacer la reserva,entonces visualiza una barra de progreso clara, que reduce la ansiedad y completa la reserva en pocos pasos.
Developer Handoff
- Entrega del archivo Figma con anotaciones para estados, interacciones y breakpoints.
- Documentación y entrega de un design system completo para el proyecto.
- Documentación UX con insights clave y recomendaciones heurísticas para la implementación.
- Kit visual exportado: íconos, imágenes optimizadas, tokens de color.
- Se llevó a cabo una reunión previa al desarrollo con el equipo multidisciplinario, en la que se presentó y explicó el prototipo de manera detallada.
- Reuniones de seguimiento durante el desarrollo para asegurar la consistencia.
07.Testear
Debido a que el presupuesto del proyecto es limitado, se recomienda implementar herramientas de analítica web, como Google Analytics, mapas de calor y grabaciones de sesión de usuarios para observar su comportamiento real en la web y sobre todo en el flujo de reserva. Esta información nos permitirá identificar puntos de fricción, puntos de fuga, validar decisiones de diseño y aplicar mejoras basadas en datos reales.