Architektura informacji · UX · Next.js

Rok: 2026Rola: Architektura informacji, UX i wdrożenie

Serwis kandydatki w wyborach uzupełniających do Rady Gminy Wręczyca Wielka. W 7 tygodni zaprojektowałem i wdrożyłem stronę, która prowadzi od programu do działania: podpisu pod petycją, zgłoszenia się do pomocy albo zapisania terminu wyborów.

Zobacz stronę aleksandrazlotosz.pl (otwiera się w nowej karcie)
  • 7tygodni od pierwszego commita do końca kampanii
  • 4formularze z e-mailem i terminem wyborów w .ics
  • −95%wagi pliku źródłowego tła w hero
Przewiń

Kontekst

Jedna wieś, każdy głos

Wybory uzupełniające w okręgu nr 3 objęły tylko mieszkańców Wręczycy Małej. Serwis miał przedstawić kandydatkę i jej program, ale przede wszystkim zamienić wizytę na stronie w konkretne działanie.

dzień wyborów uzupełniających
29.03.2026
okręg nr 3 — Wręczyca Mała
1 wieś
ustawowy limit wydatków całego komitetu
1514,56 zł
od pierwszego commita do końca kampanii
7 tyg.
Wizyta na stronie

  • Podpis pod petycją

    Trzy lokalne sprawy, licznik i plan działania.

  • Zgłoszenie się do pomocy

    Baner, ulotki, wpłata albo grafiki do udostępnienia.

  • Termin wyborów w kalendarzu

    E-mail i plik .ics z przypomnieniami.

Moja część

  • architektura informacji i ścieżki
  • projekt UX formularzy i scen
  • wdrożenie: Next.js, Payload CMS, Prisma
  • e-maile, analityka, SEO, dostępność

Od kampanii

  • identyfikacja wizualna i kolory
  • zdjęcia i grafiki
  • program i treść petycji

Strona główna

Strona główna jako lejek

Każda sekcja odpowiada na kolejne pytanie mieszkańca i prowadzi niżej — od tego, kim jest kandydatka, do tego, gdzie i kiedy głosować.

Górna część strony głównej na telefonie: imię i nazwisko kandydatki, odznaka „Pozycja nr 2” i dwa przyciski.

Kandydatka. Imię, pozycja na karcie do głosowania i dwa wyjścia: plan albo pomoc.

Zrzuty z okresu kampanii

Program

Problem → rozwiązanie

Sześć filarów programu kandydatki przedstawiłem jako kafle. Każdy otwierał okno z dwiema częściami: diagnozą z programu i propozycjami — zamiast długiego dokumentu do przewijania.

Schemat poglądowyW makiecie treść programu zastępują linie — scena pokazuje układ okna, nie postulaty.

Mój Kontrakt z Mieszkańcami

Pod filarami — zobowiązanie do sprawozdania co 6 miesięcy, żeby program dało się później rozliczyć.

  • Dostępność
  • Sprawozdanie co 6 miesięcy
  • Jawność

Widzisz inny problem? Zgłoś go.

Formularz zapisuje zgłoszenie w bazie i wysyła e-mail do sztabu.

Petycje

Petycje z planem działania

Trzy lokalne petycje — o plac zabaw, o odbudowę peronów na stacji Wręczyca i o ławki — mają wspólny szablon. Podpis to najprostszy krok, a oś pokazuje, co stanie się z nim dalej.

  • OdMieszkańcy gminy
  • KoordynatorkaAleksandra Złotosz
  • DoPKP PLK S.A.

Petycja o odbudowę peronów na stacji Wręczyca

128z 200 podpisów

8 dni do końca
Podpisuję

Plan rozwiązania sprawy

  1. Zbieramy podpisyDo zebrania 200 podpisów
  2. Wysyłam nasz apel do: PKP PLK S.A.Czekamy na odpowiedź
  3. Głosuj na Aleksandrę w wyborach samorządowych29 marca 2026
  4. Mamy to!!!Linia wraca do częstszego kursowania
Petycja o odbudowę peronów na telefonie, od nagłówka przez zdjęcie i licznik podpisów po treść apelu.

Podpis zawsze pod ręką

Na desktopie formularz zostaje widoczny obok treści. Na telefonie, gdy licznik zniknie z ekranu, u dołu przypina się przycisk „Podpisuję”.

  • 1Kto, z kim, do kogo Nadawca, koordynatorka i adresat apelu na samej górze.
  • 2Licznik i odliczanie Cel 200 podpisów i dni do końca zbiórki.
  • 3Dzień wyborów na osi Wyróżniony krok — w dwóch petycjach plan sięga dalej, aż do rozwiązania sprawy.

Zrzuty z okresu kampanii

Podpis

Podpis na telefonie bez rozpraszaczy

Przycisk „Podpisuję” prowadzi na osobny ekran: bez menu, z kursorem od razu w pierwszym polu. Po podpisie — podziękowanie z udostępnianiem i e-mail z terminem wyborów.

  1. 1Bez menuTylko strzałka powrotu i tytuł petycji.
  2. 2Kursor w pierwszym poluMożna pisać od razu, bez stukania w pole.
  3. 3Kod pocztowy z góry42-130 — kod gminy wpisany za mieszkańca.
  4. 4„Zaznacz wszystkie”Trzy zgody jednym kliknięciem.
  5. 5Podziękowanie i .icsUdostępnianie (Web Share API, Facebook, link) i e-mail z terminem wyborów.
Osobny ekran podpisu na telefonie: bez menu, kursor w polu „Imię”, kod pocztowy 42-130 wpisany z góry.
Zrzut z aleksandrazlotosz.pl
Strona „Dziękujemy za Twój podpis!” z konfetti na telefonie.
Zrzut z aleksandrazlotosz.pl

Przypomnienie

Przypomnienie o wyborach

Na dole każdej głównej podstrony jest lokal wyborczy i przycisk „Dodaj termin wyborów do kalendarza”. To samo okno otwiera przycisk w nagłówku.

  • Najpierw e-mailAdres trafia do bazy, a mieszkaniec dostaje e-mail z plikiem .ics.
  • Potem kalendarzKalendarz Google jednym kliknięciem albo plik .ics dla Kalendarza Apple i Outlooka.
  • Dwa przypomnieniaPlik .ics ma wbudowane przypomnienia: na dobę i na dwie godziny przed dniem wyborów.

Zaangażowanie

Trzy sposoby, żeby pomóc

Podstrona „Zaangażuj się” zbiera trzy formy pomocy: wolontariat, wpłaty z zasadami z kodeksu wyborczego i grafiki do udostępnienia w mediach społecznościowych.

  • Powieszę baner na płocie/balkonie

    Pomóż zwiększyć naszą widoczność w gminie. Dostarczymy materiały i pomożemy w montażu.

  • Rozdam ulotki sąsiadom

    Porozmawiaj z sąsiadami o naszym programie. Każda rozmowa przybliża nas do zwycięstwa.

  • Dorzucę się do kampanii

    Wesprzyj kampanię finansowo zgodnie z przepisami. Nawet drobna wpłata pomaga w druku ulotek.

Wsparcie finansowe

Ważne zasady wpłat:

  • Wpłat mogą dokonywać jedynie obywatele RP mający stałe miejsce zamieszkania w Polsce.
  • Należy dokonać przelewu wyłącznie z osobistego konta bankowego.
  • Limit wydatków dla całego komitetu w tych wyborach wynosi 1514,56 zł.

Odbiorca

KWW Razem dla Wręczycy

Tytuł przelewu (WAŻNE)

Darowizna na fundusz wyborczy

Numer konta

XX XXXX XXXX XXXX XXXX XXXX XXXX

Numer konta ukryty w prezentacji.

  • Plakat pionowy
  • Post 1
  • Post 2
  • Relacja
  • Tło profilu

Ambasador w sieci

Pięć gotowych grafik — plakat do relacji, posty na Facebooka, wersja na Instagram i tło profilu — do pobrania jednym kliknięciem.

Sekcja „Zostań naszym Ambasadorem w sieci” z grafikami do pobrania na telefonie.
Zrzut z aleksandrazlotosz.pl

Zaplecze

Zaplecze, którego nie widać

Każdy z czterech formularzy przechodzi tę samą drogę: walidacja, limit prób, zapis w bazie, e-maile i zdarzenie w analityce. Wyślij żądanie i zobacz, gdzie się zatrzyma.

  1. Formularzpodpis, wolontariat, zgłoszenie, przypomnienie
  2. Limit prób5 na minutę z jednego adresu IP
  3. Zodwalidacja pól, bez znaczników HTML
  4. Prisma · Postgreszapis; jeden podpis na e-mail
  5. Resendpodziękowanie z .ics i powiadomienie sztabu
  6. PostHogzdarzenie w przeglądarce i błędy aplikacji
Odpowiedź API

6 szablonów React Email

  • Podziękowanie za podpismieszkaniec
  • Witamy w ekipiemieszkaniec
  • Dziękuję za zgłoszeniemieszkaniec
  • Przypomnienie o wyborachmieszkaniec
  • Nowy wolontariuszsztab
  • Nowe zgłoszeniesztab

Zdarzenia w PostHog

  • hero_cta_clicked
  • petition_signed
  • volunteer_signup
  • bank_account_copied

Payload CMS

Aktualności obsługuje Payload CMS osadzony w tej samej aplikacji Next.js — bez osobnego serwera.

  • edytor Lexical
  • polskie etykiety pól
  • zdjęcia w Vercel Blob

Jakość

Dostępność, wydajność, widoczność

Rzeczy, których mieszkaniec nie zauważy — dopóki ich nie zabraknie: powiększanie tekstu, szybkie ładowanie na wiejskim zasięgu i odpowiedzi w wyszukiwarce.

Tło w hero

5243 KB → 277 KB

−95%po: 277 KB · Plik źródłowy PNG → WebP 2560 px (sharp)

Cel: WCAG 2.1 AA

  • etykiety wszystkich pól
  • aria-expanded w menu i FAQ
  • poprawiony kontrast
  • deklaracja dostępności (samoocena)

Gdzie i kiedy głosujemy?

Dane strukturalne

Żeby wyszukiwarkom i asystentom AI łatwiej było odpowiadać na pytania o wybory — plus mapa strony i plik llms.txt.

  • Person
  • Event
  • FAQPage
  • Organization
  • BreadcrumbList
  • Article
  • llms.txt

Nagłówki bezpieczeństwa

  • Content-Security-Policy
  • Strict-Transport-Security · preload
  • X-Frame-Options: DENY
  • Cross-Origin-Opener-Policy

Galeria

Serwis w całości

Zrzuty z okresu kampanii, desktop i telefon. Kliknij, żeby powiększyć.

Podsumowanie

Od programu do działania

Siedem tygodni, jeden wdrażający i strona, która w każdym miejscu podsuwa mieszkańcowi następny krok — podpis, pomoc albo termin w kalendarzu.

Napisz do mnieWróć na górę
Rola
Architektura informacji, UX, wdrożenie
Stack
Next.js 16 · Payload CMS 3 · Prisma · Resend · PostHog
Identyfikacja
kampania KWW „Razem dla Wręczycy”
Czas
7 tygodni, 175 commitów