Realizacja
The Bird: strona internetowa gin baru z animacjami
Menu baru się zmienia, a godziny otwarcia poprawiane ręcznie szybko przestają być aktualne. Dla The Bird zaprojektowaliśmy i wdrożyliśmy stronę internetową gin baru na Headless CMS WordPress i Next.js: menu edytowane w panelu, godziny otwarcia pobierane z Google Maps i animacje Lottie.
Dla The Bird, jednej z marek NoHo Partners, zaprojektowaliśmy i wdrożyliśmy stronę z menu aktualizowanym w panelu, godzinami otwarcia pobieranymi z Google Maps i animacjami Lottie, które budują barowy nastrój.
Zakres prac
- Branża
- Gastronomia
- Typ produktu
- Strona internetowa baru
- Rynek
- Gastronomia
Technologie
- Headless CMS
-
Next.js - Product Design
- Web
Next.js
Najważniejsze fakty
- Menu z bieżącą dostępnością potraw i napojów
- Godziny otwarcia z integracji z Google Maps
- Animacje Lottie i motion design
- Headless CMS WordPress i Next.js
- Kluczowe komponenty wspólne z pozostałymi markami operatora
Gin bar z charakterem dostał stronę, która się rusza i sama pilnuje godzin otwarcia.
Cele
01
Barowy nastrój w sieci
Przyciągnąć uwagę animacją i ruchem, tak żeby strona miała ten sam charakter co lokal.
02
Aktualne menu
Pozwolić zespołowi baru zmieniać dostępne potrawy i napoje bez udziału programisty.
03
Pewne godziny otwarcia
Pokazywać godziny otwarcia z jednego źródła, bez ręcznego przepisywania na stronę.
Proces
Co dostarczyliśmy
Stronę, na której menu i godziny otwarcia są zawsze aktualne, a ruch buduje nastrój baru.
- Menu - lista potraw i napojów, w której zespół baru aktualizuje dostępne pozycje.
- Integracja z Google Maps - godziny otwarcia lokalu pobierane automatycznie.
- Animacje Lottie - motion design, który przyciąga uwagę i oddaje charakter gin baru.
- Headless CMS WordPress i Next.js - panel treści oddzielony od szybkiego front-endu.
- Wersje na każde urządzenie - w pełni responsywne widoki na telefon, tablet i komputer.
Wyzwanie: charakter baru i zawsze aktualne informacje
The Bird to gin bar z wyraźnym, barowym charakterem. Strona miała go oddać i jednocześnie podawać gościom proste informacje: co jest w karcie i kiedy lokal jest otwarty.
Dostępność potraw i napojów się zmienia, więc menu musiało być łatwe do aktualizacji przez zespół baru. Godziny otwarcia miały pochodzić z jednego źródła, a nie z ręcznie poprawianego tekstu. Do tego strona musiała przyciągać uwagę i działać tak samo dobrze na telefonie, jak na komputerze.
Strona baru ma budować nastrój, ale najpierw musi mówić prawdę o tym, co jest w karcie i do której godziny.
Rozwiązanie: animacje, menu w panelu i godziny z Google Maps
Charakter baru niesie ruch: animacje Lottie i motion design, osadzone na tych samych komponentach co reszta strony.
Menu jest edytowane w Headless CMS WordPress, więc dostępność potraw i napojów zmienia się w panelu, bez udziału programisty. Godziny otwarcia strona pobiera z integracji z Google Maps. Front-end w Next.js obsługuje widoki na wszystkich urządzeniach.
Wspólne komponenty, własny wygląd
The Bird korzysta z design systemu, który przygotowaliśmy dla wszystkich marek NoHo Partners. Kluczowe komponenty są jednolite, a projekt UX/UI nadaje im wygląd właściwy dla gin baru.
Efekty: zespół baru sam aktualizuje menu
Zespół baru sam aktualizuje menu, a godziny otwarcia na stronie zgadzają się z tymi w Google Maps.
Wspólne komponenty uprościły zarządzanie treścią w serwisach operatora. Strona została dobrze przyjęta przez użytkowników, a automatyczne godziny otwarcia i animacje poprawiły obsługę gości jeszcze przed wizytą w lokalu.
Opracowanie: Radosław Kołacki Publikacja: Aktualizacja:
Powiązane
Wiedza do tej realizacji
Lokal ma charakter? Niech ma go też strona.
Zaczynamy od warsztatu, na którym ustalamy, co gość musi znaleźć od razu.
