Fabryka Czekolady E.Wedel: UX & Web Development

case studies

data publikacji

Czy można połączyć bogatą, pełną interakcji szatę graficzną, elastyczność użytkowania ze zgodnością WCAG AA? Można!

zadanie

01

Zimą 2024 roku zostaliśmy zaproszeni do przetargu na stworzenie serwisu Muzeum Fabryki Czekolady E.Wedel.

 

Serwis miał być wizytówką nowego miejsca - prezentować jego atrakcje i dostarczać informacji pozwalających na zaplanowanie wizyty. Z kolei dla zespołu muzeum miał być narzędziem umożliwiającym samodzielne zarządzanie wielojęzyczną treścią, podstronami i formularzami. Uwzględnienie potrzeb tak wielu różnych grup odbiorców (indywidualni odwiedzający, szkoły, grupy zorganizowane, biznes, zespół muzeum) było niemałym wyzwaniem UXowym.

 

Do projektu zaprosiliśmy zaprzyjaźnioną agencję TWIN, która odpowiadała za UI serwisu. Nasza wspólna koncepcja mocno opierała się na zabawie użytkownika. Tak jak w Fabryce “MOŻNA” dotykać, smakować, podglądać itd., tak na stronie można świetnie się bawić grając w minigierki i odkrywając animacje.

rozwiązanie

02

W skrócie: wielojęzyczna platforma informacyjno-wizerunkowa z systemem zarządzania treścią (cms) i zgłoszeniami.

 

Najważniejszą wartością tego rozwiązania jest połączenie wizualnego stylu marki z niezależnością redakcyjną zespołu i sprzedażą (zbieranie zapytań, przejście do zakupu biletów).

 

Perspektywa osoby odwiedzającej muzeum:

  • poznawanie atrakcji: oferty, wydarzeń i aktualności;
  • poznanie informacji praktycznych: godziny otwarcia, ceny, dojazd, dane kontaktowe;
  • planowanie wizyty: rezerwacja urodzin, zwiedzania z przewodnikiem, przejście do zakupu biletów;
  • wysyłka formularzy dot. edukacji, wynajmu przestrzeni czy kontaktu ogólnego;
  • zabawa z Beat Machine, pozwalająca użytkownikowi łączyć kilka zapętlonych warstw dźwięku.

 

Perspektywa zespołu muzeum:

  • samodzielne budowanie stron z ponad 30 konfigurowalnych widgetów*, bez obaw o spójność finalnego efektu;
  • zarządzanie nawigacją, stopką, podstronami, multimediami i załącznikami;
  • edycja treści w języku polskim i angielskim oraz podgląd przed publikacją;
  • zarządzanie SEO, sitemapą i elementami dostępności, np. skiplinkami;
  • konfiguracja formularzy i odbiorców wiadomości oraz przeglądanie zgłoszeń w panelu.

 

* widgety to klocki, z których można budować strony. Każdy widget ma swój unikalny wygląd i wizualnie wypełnia jedną sekcję tworzonej strony. Dzięki nim administratorzy strony mogą swobodnie i samodzielnie tworzyć dowolne strony z dowolnymi treściami i różnymi funkcjonalnościami.

wyzwania

03

Najważniejsze wyzwanie pojawiło się już po wdrożeniu pierwotnego zakresu, kiedy potrzebowaliśmy pogodzić silnie animowany serwis z wymaganiami WCAG AA. Potrzeba wynikała zarówno z uwarunkowań prawnych, jak i świadomej inicjatywy klienta.

 

Usunięcie animacji i interakcji nie wchodziło dla nas w grę! Zabraliśmy się wymyślenia alternatywnych sposobów korzystania z atrakcji strony. Prace objęły m.in.:

  • pełną obsługę klawiaturą i odpowiednią kolejność fokusu;
  • poprawną semantykę, strukturę nagłówków, role i opisy ARIA;
  • skiplinki, oznaczenia linków zewnętrznych i dostępne accordiony, popupy oraz tooltipy;
  • tryb wysokiego kontrastu, zmianę rozmiaru tekstu i nowy panel ustawień dostępności;
  • globalną możliwość wyłączenia animacji, obejmującą Rive, przejścia stron, efekty kursora, animowany tekst, kafle i Beat Machine;
  • dostosowanie Beat Machine do obsługi klawiaturą, zatrzymywania klawiszem Escape oraz automatycznego wyłączania po opuszczeniu widoku;
  • dostępność formularzy, komunikatów błędów i elementów nawigacyjnych.

 

Zakres zmian był ustalany wspólnie z klientem i audytorem podczas kilku rund audytów, aby dopracować trudniejszych przypadki, takie jak menu, accordiony, formularze, focus management oraz sterowanie animacjami.

przebieg prac

04

Kiedy w budynku muzeum trwały prace remontowe, my przygotowywaliśmy makiety UX. Kiedy w muzeum trwały prace wykończeniowe, a wystawa stała nabierała swoich kształtów, my kodowaliśmy kolejne widgety. A jak wyglądało całe kalendarium?

 

  • luty 2024 — makiety UX;
  • marzec 2024 — Twin przygotowuje UI;
  • kwiecień 2024 — przygotowanie fundamentów technicznych, m.in. wielojęzyczności, monitoringu i integracji;
  • maj–lipiec 2024 — ciągła, intensywna realizacja pełnego zakresu i wdrożenie produkcyjne;
  • listopad–grudzień 2024 — rozbudowa o wersję angielską;
  • maj–lipiec 2025 — główne prace dostosowujące serwis do WCAG AA 2.1.;
  • sierpień–grudzień 2025 — kolejne rundy audytowe, szczegółowe poprawki dostępności;
  • 2026 — utrzymanie i dalszy rozwój funkcjonalności.

technologia

05

  • Rive ze state machines do lekkich, interaktywnych animacji reagujących na działania użytkownika;
  • GSAP i ScrollTrigger do animacji zależnych od kursora, przewijania oraz pojawiania się treści;
  • autorska Beat Machine;
  • Nuxt 3, Vue 3 i TypeScript z renderowaniem SSR;
  • dedykowany headless CMS oparty na Django REST Framework, z osobnym panelem administracyjnym w Vue;
  • generowany na podstawie OpenAPI typowany klient API, ograniczający rozbieżności pomiędzy backendem, panelem i frontendem;
  • mechanizm podglądu stron i widgetów przed publikacją.

 

Technologie wspierające obejmowały m.in. Celery i SendGrid do obsługi wiadomości, Sentry do monitorowania błędów oraz integracje SEO, analityczne i consent management.