Case Study Klient publiczny • 2020

Czytelność, która wygrywa z czasem – Dworzec Autobusowy Poznań

Projekt zrealizowany w 2020 roku, który każdego dnia obsługuje tysiące pasażerów w biegu. Dowód na to, że dobre fundamenty użyteczności UX nie starzeją się. Strona zaprojektowana jako narzędzie pracy – nie scenografia.

Odwiedź stronę na żywo
Projekt aktywny od 2020 roku
Pełny widok strony Dworzec Autobusowy Poznań – projektowanie stron internetowych Poznań
live & aktywny – dworzecautobusowy.poznan.pl

Klient

ZKZL Poznań

Rok

2020

Zakres

UX / UI / Dev

Sektor

Instytucja publiczna

Wyzwanie

Strona dla tysięcy pasażerów dziennie

Zarząd Komunalnych Zasobów Lokalowych w Poznaniu potrzebował strony informacyjnej dla Dworca Autobusowego, która każdego dnia będzie punktem odniesienia dla tysięcy podróżnych. Kluczowe wymaganie: użytkownik musi znaleźć swój odjazd w kilka sekund – na peronie, w biegu, często na wolnym połączeniu mobilnym.

Strona musiała być jednocześnie ultraszybka na urządzeniach mobilnych, w pełni dostępna dla osób z niepełnosprawnościami (zgodnie ze standardami WCAG 2.1) oraz na tyle dobrze zaprojektowana architektonicznie, żeby nie wymagać przebudowy przez lata.

Rozwiązanie

Trzy filary, na których oparliśmy projekt

Użyteczność UX

Architektura informacji prowadząca użytkownika za rękę. Priorytetem jest szybkie sprawdzenie odjazdu – nie zbędne animacje czy zbędne podstrony. Każdy klik ma swoje uzasadnienie.

Performance & Mobile First

Błyskawiczne działanie na urządzeniach mobilnych – kluczowe dla pasażerów na peronach i przy kasach. Zoptymalizowane obrazy, minimalne JS, progresywne ładowanie treści.

Inkluzywność – standardy WCAG

Pełna dostępność cyfrowa eliminująca bariery. Wystarczające kontrasty, semantyczny HTML, nawigacja klawiaturą, atrybuty ARIA – bo transport publiczny jest dla wszystkich.

Proces

Krok po kroku – od briefu do wdrożenia

01

Analiza potrzeb i architektura informacji

Warsztaty z ZKZL – identyfikacja kluczowych scenariuszy użytkowników: sprawdzanie rozkładu, zakup biletu, dojazd na dworzec. Mapa sitemap zbudowana na podstawie realnych zachowań pasażerów.

02

Projektowanie UI / UX

Wireframy mobile-first, prototypy interaktywne i testy użyteczności. Priorytet: minimalna liczba kroków do celu. Kolorystyka i typografia zgodne z identyfikacją miejską Poznania.

03

Kodowanie i dostępność WCAG

Semantyczny HTML5, ARIA-landmarki, nawigacja klawiaturą, kontrast zgodny z WCAG 2.1 AA. Kod zoptymalizowany pod kątem Lighthouse score – Performance, Accessibility, SEO.

04

Wdrożenie i optymalizacja performance

Konfiguracja serwera, optymalizacja obrazów (WebP, lazy loading), minifikacja zasobów. Testy obciążeniowe dla ruchu na poziomie setek równoczesnych użytkowników.

Efekty

Projekt zaprojektowany jako narzędzie pracy

Strona działa nieprzerwanie od 2020 roku bez większych przebudów – to najlepszy test jakości fundamentów UX i technologicznych.

5+

Lat bez przebudowy

Mobile First

Filozofia projektowa

WCAG 2.1

Spełnione standardy

24/7

Dostępność serwisu

„Projekt zaprojektowany jako narzędzie pracy – wytrzymujący próbę setek użytkowników jednocześnie. Prosta filozofia, trwałe efekty."

— Podsumowanie projektu, WebCanvas 2020

Stack technologiczny

Technologie użyte w projekcie

HTML5 / Semantyczny CSS3 / RWD JavaScript WCAG 2.1 AA ARIA Landmarks WebP / Lazy Loading Performance Optimized SSL / HTTPS
Kolejny krok

Zaprojektujmy rozwiązanie na lata

Twój projekt też może przetrwać próbę czasu. Opowiedz mi o swoich potrzebach – bezpłatnie wycenię projekt i zaproponuję rozwiązanie szyte na miarę.