E.Wedel Chocolate Factory: UX & web development

case studies

published

Can you combine a rich, interactive design and flexible usability with WCAG AA compliance? You certainly can!

task

01

In the winter of 2024, we were invited to tender for the creation of the E. Wedel Chocolate Factory website.

 

The site was meant to be the showcase for this new venue – presenting its attractions and providing all the information needed to plan a visit. For the museum team, it needed to be a tool empowering them to independently manage multilingual content, subpages and forms. Balancing the needs of such diverse audiences (individual visitors, schools, organised groups, corporate clients, and the museum staff itself) was a significant UX challenge.

 

We teamed up with our friends at the TWIN agency, who were responsible for UI design. Our joint concept leaned heavily into playfulness. Just as inside the Factory you “CAN” touch, taste, and peek behind the scenes, the website offers you a great time playing mini-games and discovering animations.

solution

02

In brief: a multilingual information and branding platform with a bespoke content management (cms) and enquiry handling system.

 

The key value of this solution lies in combining the brand’s visual style with editorial autonomy for the team and driving sales (capturing enquiries on-page and guiding users through to ticket purchase).

 

From the museum visitor’s perspective:

  • exploring attractions: what’s on, events and news;
  • finding practical information: opening hours, prices, how to get there, contact details;
  • planning a visit: booking birthday parties, guided tours, proceeding to ticket purchase;
  • submitting forms regarding education, venue hire or general enquiries;
  • playing with the Beat Machine, allowing the user to combine several looped audio layers.

 

The museum team’s perspective:

  • building pages independently using over 30 customisable widgets*, without worrying about the visual consistency of the final result;
  • managing navigation, the footer, subpages, multimedia and attachments;
  • editing content in Polish and English, and previewing it before publication;
  • managing SEO, the sitemap and accessibility features, e.g. skip links;
  • configuring forms and message recipients, and viewing submissions in the admin panel.

 

* Widgets are building blocks used to create pages. Each widget has its own unique appearance and visually fills a single section of the page. They give website administrators full freedom to build custom pages independently with any content and functionality they need.

challenges

03

The biggest challenge arose after the initial scope had been implemented, when we needed to reconcile a heavily animated website with WCAG AA requirements. This need stemmed both from legal requirements and a deliberate initiative on the client’s part.

 

Removing the animations and interactions was simply not an option for us! We set about devising alternative ways to interact with the site’s features. The work included, amongst other things:

  • full keyboard navigation and appropriate focus order;
  • correct semantics, heading structure, ARIA roles and descriptions;
  • skip links, labelling of external links, and accessible accordions, pop-ups and tooltips;
  • high-contrast mode, text resizing and a new accessibility settings panel;
  • a global option to disable animations, covering Rive, page transitions, cursor effects, animated text, tiles and the Beat Machine;
  • adapting the Beat Machine for keyboard navigation, stopping with the Escape key and automatic deactivation upon leaving the view;
  • accessibility of forms, error messages and navigation elements.

 

The scope of the changes was agreed jointly with the client and the auditor during several rounds of audits, in order to refine more complex cases such as menus, accordions, forms, focus management and animation control.

timeline

04

Whilst renovation work was underway in the museum building, we were preparing UX mock-ups. Whilst finishing work was taking place in the museum and the permanent exhibition was taking shape, we were coding further widgets. So what did the overall timeline look like?

 

  • February 2024 — UX mock-ups;
  • March 2024 — Twin prepares the UI;
  • April 2024 — preparation of the technical foundations, including multilingual support, monitoring and integration;
  • May–July 2024 — continuous, intensive development of the full scope and production roll-out;
  • November–December 2024 — expansion to include an English version;
  • May–July 2025 — main work to adapt the website to WCAG AA 2.1;
  • August–December 2025 — further rounds of audits, detailed accessibility improvements;
  • 2026 — maintenance and further development of functionality.

technology

05

  • Rive with state machines for lightweight, interactive animations that respond to user actions;
  • GSAP and ScrollTrigger for cursor-dependent animations, scrolling and content reveal effects;
  • our proprietary Beat Machine;
  • Nuxt 3, Vue 3 and TypeScript with server-side rendering (SSR);
  • a dedicated headless CMS based on the Django REST Framework, with a separate admin panel built in Vue;
  • a typed API client generated from OpenAPI, minimising discrepancies between the backend, admin panel and frontend;
  • a mechanism for previewing pages and widgets before publication.

 

Supporting technologies included, amongst others, Celery and SendGrid for messaging, Sentry for error monitoring, as well as SEO, analytics and consent management integrations.