Wyzwanie
Projekt wymagał przygotowania interfejsu, który działa w bardzo konkretnym kontekście: użytkownik jest na wydarzeniu, ogląda mecz, ma bilet z oznaczeniem sektora i chce zamówić jedzenie bez stania w kolejce. Najważniejsze było skrócenie ścieżki zamówienia do kilku czytelnych kroków oraz zachowanie pełnej wygody na telefonie.
Drugim wyzwaniem była logika stadionowa. Zwykły koszyk internetowy nie wystarcza, bo zamówienie musi być powiązane z wydarzeniem, stadionem, trybuną, sektorem i punktem odbioru. Użytkownik powinien rozumieć, gdzie znajduje się jego zamówienie, kiedy będzie gotowe i jaki kod pokazać obsłudze przy odbiorze.
Projekt musiał też wyglądać jak produkt gotowy do użycia podczas realnego wydarzenia: szybki pierwszy ekran, wyraźny przycisk pobrania aplikacji, komunikaty o czasie przygotowania, powiadomienia, śledzenie statusu i interfejs odporny na pośpiech użytkownika.
Rozwiązanie
Przygotowaliśmy aplikację webową z mocnym landingiem i pełnym przepływem zamówienia. Użytkownik wybiera wydarzenie, sektor główny, szczegółowy sektor, produkty z menu, przechodzi do podsumowania, a następnie może śledzić status zamówienia oraz kod odbioru. Interfejs prowadzi krok po kroku, bez zbędnych ekranów i bez technicznego języka.
Warstwa frontendowa została zbudowana w oparciu o HTML5, CSS3 i JavaScript. Aplikacja wykorzystuje localStorage do zapamiętywania aktywnego zamówienia, Web Notifications do powiadomień o zmianie statusu, service worker dla trybu aplikacyjnego oraz komunikację z backendem przez API PHP. Strona ma także Google Analytics, sitemap.xml, robots.txt, ikony aplikacji oraz plik APK dla Androida.
Szczególnie ważny był widok mobilny. Przyciski, kroki, karta zamówienia, koszyk i status odbioru zostały zaprojektowane tak, aby użytkownik mógł wykonać akcję jedną ręką w trakcie wydarzenia. Projekt może być rozwijany o panel obsługi punktów, realne płatności, integrację z systemem wydarzeń, zarządzanie menu oraz statystyki sprzedaży.
Efekty
- aplikacja webowa do zamawiania jedzenia podczas wydarzeń stadionowych
- ścieżka zamówienia podzielona na wydarzenie, sektor, menu i płatność
- koszyk, status zamówienia, kod odbioru i powiadomienia dla użytkownika
- landing z wyraźnym CTA do pobrania aplikacji Android
- backend API PHP oraz frontend HTML/CSS/JavaScript
- service worker, localStorage i Web Notifications dla doświadczenia aplikacyjnego
- responsywny interfejs dopasowany do szybkiego użycia na stadionie
Technologie wykorzystane
W realizacji wykorzystano konkretny zestaw technologii dobrany do typu projektu, wydajności, bezpieczeństwa, łatwej obsługi i dalszego rozwoju.
Screeny projektu
