Logo

Zreorganizowany program MCK z naciskiem na czytelność

Cały program MCK i festiwali w jednym miejscu

Miejskie Centrum Kultury w Bydgoszczy zgłosiło się do nas z potrzebą odświeżenia strony internetowej i poprawy doświadczeń użytkownika. Głównym założeniem projektowym było zgromadzenie w ramach jednego serwisu wydarzeń pochodzących z wszystkich sekcji i festiwali centrum oraz wyświetlanie ich w postaci uporządkowanego kalendarium. Klientowi zależało na tym, aby nowa witryna była czytelna przede wszystkim na urządzeniach mobilnych.

Czytelny program wydarzeń MCK

Prowadząc prace nad programem Centrum, postawiliśmy na funkcjonalność oraz czytelność. W tym celu wdrożyliśmy rozwiązanie techniczne, pozwalające wyświetlać codzienne kalendarium, pobierając tym samym dane API z podstron poszczególnych sekcji MCK. Dzięki temu, klient oszczędza czas, nie wprowadzając nowych wydarzeń ręcznie.

Czytelność podstrony programu to zasługa zastosowanych przez nas rozwiązań UI, które przejrzyście wyświetlają dane API, a same wydarzenia porządkują chronologicznie.

Autorski sklep internetowy

MCK Bydgoszcz oferuje na sprzedaż publikacje książkowe, wydania muzyczne oraz inne gadżety związane z Centrum. Na potrzeby serwisu przygotowaliśmy więc autorski sklep www. Co w nim jest nietypowego? Sklep na stronie MCK nie posiada charakterystycznej dla e-commerce ścieżki klienta. Prezentacja oferty jest analogiczna do standardowych sklepów internetowych, jednak sam proces zakupu odbywa się z pominięciem płatności internetowych.

Ekspandowane listingi z kontaktem

Ze względu na rozbudowaną strukturę Centrum oraz mnogość sekcji mu podlegających, na stronie www występuje duża ilość danych kontaktowych. Aby ułatwić użytkownikowi odnalezienie odpowiedniego adresu, zastosowaliśmy ekspandowane listingi tematyczne. Zabieg ten znacznie zmniejsza wysokość podstrony kontaktowej (w szczególności na widokach mobilnych).

Animacja aktywnego WCAG

Wytyczne WCAG (Web Content Accessibility Guidelines) są istotne dla projektowania stron, zapewniając tym samym dostępność dla osób starszych i takich z niepełnosprawnościami. Rozwiązanie poprawia użyteczność i eliminuje bariery, jakie mogą napotkać np. użytkownicy z wadami wzroku.

Jednym z wymogów, które musieliśmy spełnić projektując serwis dla MCK to właśnie przygotowanie strony do standardów WCAG. Obecnie witryna jest dostępna w wersji kontrastowej oraz trzema wariantami wielkości typografii.

Rozwiązania UX programu MCK

Przygotowaliśmy program MCK, który wyróżnia się intuicyjnym wyszukiwaniem wydarzeń Centrum. Wdrożone przez nas rozwiązania UX umożliwiają swobodny wybór zakresu czasowego listingów programowych oraz dodatkowego ograniczenia wyników do jednej lub wielu wybranych kategorii tematycznych. Całość przygotowaliśmy na wzór listingów e-commercowych, co dodatkowo pozwala w nieskomplikowany sposób dotrzeć do sprecyzowanych informacji.

Kalendarium oraz selektor kategorii

Połączenie danych poprzez API

Program wydarzeń MCK łączy dane z kilku źródeł w jednym miejscu i porządkuje wydarzenia chronologicznie. Przeprowadzenie takiej integracji serwisu z API wymagało od nas zarówno pracy backendowej, ale również modyfikacji w kodach zewnętrznych stron, z których pobierane są dane, tj.: Etniesy, Animocje, Kino Orzeł oraz ZPP Ostromecko.

Program centrum - layout

Modularna struktura serwisu

Projekt serwisu dla MCK oparliśmy o sekcje powtarzalne, pozwalające rozbudowywać elementy wizerunkowe lub modyfikować dane kontaktowe z poziomu CMS w czasie rzeczywistym. Dodatkowo zastosowaliśmy intuicyjny edytor Gutenberg, aby pracownicy Centrum mogli swobodnie wprowadzać zmiany zapoznając się z sporządzoną przez nas dedykowana instrukcją.

Grafika, w symboliczny sposób, przedstawiająca łatwość dodawania nowych sekcji w cms

    Podsumowanie:

    1. Przygotowaliśmy projekt serwisu internetowego dla Miejskiego Centrum Kultury w Bydgoszczy, który porządkuje jego program i kalendarium.

    2. Wprowadziliśmy sekcje ekspandowane, aby skrócić widok desktopowy i mobilny serwisu.

    3. Przygotowaliśmy serwis pod wymagania WCAG.

    4. Zaprojektowaliśmy i wdrożyliśmy autorski sklep internetowy, z pominięciem płatności internetowych.

    5. Połączyliśmy program wydarzeń MCK z danymi API z innych serwisów, współpracujących z naszym klientem.

    6. Przygotowaliśmy serwis na sekcjach modularnych i dedykowaną instrukcję obsługi.