DISEÑO
|
BRANDING
|
VIDEOS
|
SOCIAL MEDIA
|
PAGINAS WEB
|
EXPERIENCIA DE USUARIO
|
EDICIÓN
|
INTELIGENCIA ARTIFICIAL
|
DISEÑO | BRANDING | VIDEOS | SOCIAL MEDIA | PAGINAS WEB | EXPERIENCIA DE USUARIO | EDICIÓN | INTELIGENCIA ARTIFICIAL |
Case Study
Billy Brunch
Llevando la experiencia del brunch a la web
Por: Sergio Viegas
Después de visitar Billy Brunch varias veces, me di cuenta de algo: sus restaurantes estaban llenos de personalidad, pero su web no terminaba de transmitir la misma experiencia.
Los platos llenos de color, los pancakes, el caracterÃstico logo amarillo, sus vehÃculos rojos, el té marroquà con menta y ese ambiente de buen rollo forman parte del universo Billy Brunch.
Asà que decidà llevar un poco más de todo eso a su experiencia digital.
El enfoque
Comencé investigando la marca: restaurantes, menú, platos, uniformes, elementos gráficos e incluso entrevistas a su fundador, Billy Thorens.
A partir de ahà reestructuré el contenido existente y diseñé una experiencia más visual, interactiva y fácil de navegar.
Simplifiqué el menú en Food & Drinks, agrupé los restaurantes dentro de Locations con acceso directo a Google Maps, incorporé reseñas reales de Tripadvisor como prueba social y sustituà opciones secundarias como Jobs y Gift Cards por formularios interactivos.
También incorporé navegación optimizada para móvil, acceso a redes sociales y contacto directo con el WhatsApp central de Billy Brunch.
Construyendo el universo visual
Parte del contenido que imaginaba para la nueva experiencia no existÃa, asà que decidà crearlo.
Utilicé referencias reales de los restaurantes para generar nuevas imágenes con Google Flow y posteriormente transformé algunas de ellas en secuencias de vÃdeo con Omni 1.1 Flash, utilizando movimientos de cámara sutiles centrados en el producto y la marca.
Con Figma trabajé elementos de interfaz y recursos gráficos, mientras que Squarespace me permitió diseñar y construir la experiencia responsive completa, incorporando código personalizado cuando fue necesario.
También convertà elementos caracterÃsticos de Billy Brunch —como sus vehÃculos rojos— en pequeños recursos interactivos que aparecen y se desplazan con el scroll.
Resultado
Una web funcional diseñada y optimizada independientemente para desktop y mobile, combinando en un mismo proyecto:
UX/UI · Dirección de arte · IA generativa · Motion · Contenido · No-code development
El objetivo nunca fue cambiar Billy Brunch.
Fue conseguir que su web se sintiera un poco más como estar allÃ.
Herramientas
Figma · Squarespace · Google Flow · Omni 1.1 Flash · CapCut · Google Maps · Nano Banana 2
DURACIÓN
3 semanas · Full-time
ROL
UX/UI Designer · Director de Arte · Web Designer · AI Content Creator