Interaktywny katalog B2B z WCAG dla Uniwersytetu Warszawskiego

Cyfryzacja ofert B2B to już nie przyszłość, a teraźniejszość.

Coraz więcej firm, szczególnie z sektora specjalistycznych usług badawczych, szuka sposobów na zaprezentowanie swojej oferty w atrakcyjnej i nowoczesnej formie — takiej, która będzie nie tylko efektowna wizualnie, ale też dostępna, intuicyjna i łatwa do aktualizacji.

Właśnie z takim wyzwaniem zgłosił się do nas Uniwersytet Warszawski, który chciał zaprezentować infrastrukturę badawczą dostępną w czterech lokalizacjach. Potrzebował interaktywnego katalogu, który połączy funkcje flipbooka z możliwościami edycji, dostępnością zgodną z WCAG oraz pełną integracją treści multimedialnych, takich jak wideo, galerie zdjęć i wypowiedzi ekspertów.

To projekt, który idealnie pokazuje, jak technologia może wspierać komunikację, marketing i transparentność oferty w sektorze B2B — i jak ważne jest doświadczenie, by połączyć estetykę, użyteczność i wymagania techniczne w jednym, spójnym rozwiązaniu.

 

🧩 Z jakim wyzwaniem przyszedł klient?

Uniwersytet Warszawski, działający w branży naukowo-badawczej, potrzebował nowoczesnej, interaktywnej formy prezentacji oferty B2B – obejmującej laboratoria, aparaturę i możliwości współpracy w czterech lokalizacjach. Tradycyjny PDF nie wchodził w grę — oczekiwano czegoś więcej niż tylko estetyki. Kluczowe było stworzenie rozwiązania, które będzie zarówno efektowne wizualnie, jak i funkcjonalne w codziennym użyciu.

Istotnym wymogiem była możliwość samodzielnej, łatwej edycji treści — klient nie chciał być uzależniony od zespołu IT czy zewnętrznego developera w przypadku potrzeby zmiany opisu, numeru telefonu czy dodania nowego zdjęcia. Jednocześnie pojawiły się wysokie oczekiwania co do warstwy wizualnej: katalog miał zawierać wideo, galerie zdjęć, efekt przewijania, karuzele i linki zewnętrzne – wszystko w lekkiej, interaktywnej formie przypominającej flipbook.

Kolejnym ważnym aspektem była zgodność z WCAG 2.1 — katalog miał być w pełni dostępny cyfrowo, zgodnie z wytycznymi funduszy unijnych. Co więcej, klient nie miał konkretnej wizji graficznej, więc liczył na nasze pełne wsparcie w zakresie projektu UI i UX.

Na koniec – ważna była też niezależność rozwiązania. Katalog miał działać w sposób trwały i elastyczny: z możliwością umieszczenia go na własnych serwerach lub podpięcia pod subdomenę klienta, bez ryzyka utraty zawartości po roku czy dwóch.

 

🛠️ Droga projektowa — od briefu do wersji finalnej

Współpraca z Uniwersytetem Warszawskim rozpoczęła się od bardzo konkretnego celu: stworzenia cyfrowej publikacji, która będzie jednocześnie elegancka, funkcjonalna i zgodna z rygorystycznymi wytycznymi dostępności. Zanim jednak przystąpiliśmy do kodowania i projektowania, trzeba było zrobić krok wstecz — i dobrze zrozumieć, co dokładnie chcemy wspólnie osiągnąć.

Zespół klienta dostarczył nam komplet materiałów: teksty, zdjęcia z laboratoriów, materiały wideo oraz wypowiedzi liderów pakietów badawczych. Na tej podstawie stworzyliśmy pierwsze propozycje graficzne i zaprojektowaliśmy strukturę całego katalogu — z podziałem na 6 pakietów tematycznych. Każdy z nich miał otrzymać swój indywidualny layout, ale wszystkie musiały pozostać spójne stylistycznie.

Dużo uwagi poświęciliśmy wrażeniom użytkownika — katalog musiał być czymś więcej niż tylko przewijalnym PDF-em. Zaprojektowaliśmy efekt przewracania stron, interaktywne linki, klikalne sekcje, wideo osadzone w środku treści, a także karuzele zdjęć. Wszystko po to, by przeglądanie katalogu przypominało przygodę — a nie obowiązek.

Kluczowym momentem projektu było dobranie technologii. Postawiliśmy na WordPressa — nie ze względu na modę, ale z uwagi na jego otwartość, możliwość przeniesienia całości na serwer klienta i — co najważniejsze — prostotę aktualizacji treści przez pracowników Uniwersytetu. Na końcu przeszliśmy przez checklistę WCAG 2.1, upewniając się, że każda treść, każda interakcja i każdy kolor spełniają zasady cyfrowej dostępności.

To nie był projekt "na szybko". To była starannie zaplanowana, iteracyjna współpraca, gdzie każdy etap miał swoje uzasadnienie i miejsce w większej całości.

 

⚙️ Jakie technologie i rozwiązania zastosowaliśmy?

Projekt realizowany dla Uniwersytetu Warszawskiego wymagał wyjątkowego balansu między estetyką, funkcjonalnością i technologiczną trwałością. Dlatego od początku stawialiśmy na rozwiązania, które nie tylko spełnią wszystkie obecne wymagania, ale będą też odporne na zmiany w przyszłości.

Zdecydowaliśmy się na wdrożenie lekkiego środowiska edycyjnego opartego o WordPress — platformy, która pozwala na łatwą aktualizację treści przez zespół redakcyjny, bez konieczności angażowania programistów. Dzięki temu zmiana numeru telefonu, podpisu pod zdjęciem czy treści wypowiedzi eksperta zajmuje dosłownie chwilę.

Struktura katalogu została precyzyjnie zaprojektowana: 36 stron, podzielonych na 6 pakietów badawczych — każdy o indywidualnym układzie, ale wspólnej logice nawigacji. Całość zachowuje intuicyjny przepływ i umożliwia szybkie dotarcie do interesujących treści.

Szczególną wagę przyłożyliśmy do zgodności z WCAG 2.1 — wszystkie nagłówki są semantycznie oznaczone, kontrasty spełniają normy, elementy interaktywne są dostępne z poziomu klawiatury, a czytniki ekranowe mogą swobodnie poruszać się po publikacji.

Na potrzeby projektu przygotowaliśmy również integrację materiałów wideo, galerii zdjęć oraz efektów wizualnych (takich jak przewijanie, interaktywne sekcje czy karuzele). Całość może być bezproblemowo osadzona w podstronie klienta lub działać jako samodzielna jednostka z niezależnym hostingiem — zgodnym z wymaganiami długoterminowej dostępności.

Efekt? Cyfrowa publikacja, która wygląda jak nowoczesny magazyn, działa jak przemyślana aplikacja i spełnia wszystkie standardy instytucji publicznej.

 

📈 Efekty — co osiągnęliśmy?

Stworzyliśmy cyfrowy katalog, który zrywa z typowym skojarzeniem „karty produktu”. To nowoczesna, dynamiczna publikacja z płynnym przewijaniem stron, responsywnym układem i interfejsem, który bardziej przypomina interaktywny magazyn niż ofertę B2B. Od pierwszej strony użytkownik wie, gdzie jest i dokąd zmierza — a dzięki logicznej strukturze (rozmowa z liderem pakietu → prezentacja aparatury) może szybko znaleźć interesujące go informacje.

Efekt przewracania stron nie tylko robi wrażenie wizualne, ale też zwiększa zaangażowanie i czas spędzany w publikacji. Interaktywne galerie, wideo i linki czynią przeglądanie katalogu przyjemnym, a jednocześnie efektywnym.

Zgodność z WCAG 2.1 daje gwarancję, że z katalogu skorzystają również osoby z niepełnosprawnościami — to nie tylko spełnienie wymogów formalnych, ale realna dostępność. Treści można zaktualizować w dowolnym momencie bez udziału developera, co zapewnia niezależność i trwałość rozwiązania.

Dzięki przemyślanej technologii publikacja jest gotowa na intensywne kampanie promocyjne — można ją z łatwością linkować, promować w mailingach czy umieścić na stronie głównej Uniwersytetu. To narzędzie, które nie tylko prezentuje ofertę, ale realnie wspiera procesy informacyjne i sprzedażowe.