Information architecture · UX · Next.js

Year: 2026Role: Information architecture, UX and build

The website of a candidate in a by-election to the Wręczyca Wielka municipal council. In 7 weeks I designed and built a site that leads from the programme to action: signing a petition, volunteering or saving the election date.

Visit aleksandrazlotosz.pl (opens in a new tab)
  • 7weeks from the first commit to the end of the campaign
  • 4forms with an e-mail and the election date as .ics
  • −95%off the hero background source file
Scroll

Context

One village, every vote

The by-election in district no. 3 covered only the residents of Wręczyca Mała. The site had to introduce the candidate and her programme, but above all turn a visit into a concrete action.

by-election day
29.03.2026
district no. 3 — Wręczyca Mała
1 village
statutory spending cap for the whole committee
1514,56 zł
from the first commit to the end of the campaign
7 wks
A visit to the site

  • Signing a petition

    Three local issues, a counter and an action plan.

  • Volunteering

    A banner, leaflets, a donation or graphics to share.

  • The date in a calendar

    An e-mail and an .ics file with reminders.

My part

  • information architecture and paths
  • UX of the forms and flows
  • build: Next.js, Payload CMS, Prisma
  • e-mails, analytics, SEO, accessibility

From the campaign

  • visual identity and colours
  • photos and graphics
  • the programme and petition texts

Home page

The home page as a funnel

Each section answers a resident's next question and leads further down — from who the candidate is to where and when to vote.

The top of the home page on a phone: the candidate's name, the ballot-position badge and two buttons.

The candidate. Her name, ballot position and two ways on: the plan or helping out.

Screenshots from the campaign period

Programme

Problem → solution

I presented the six pillars of the candidate's programme as tiles. Each opened a modal in two parts — the diagnosis and the proposals — instead of a long document to scroll.

Illustrative diagramIn the mock-up the programme's text is drawn as lines — the scene shows the layout, not the proposals.

Mój Kontrakt z Mieszkańcami

Below the pillars — a pledge to report every 6 months, so the programme can be held to account later.

  • Availability
  • A report every 6 months
  • Transparency

See another problem? Report it.

The form stores the report and e-mails the campaign team.

Petitions

Petitions with an action plan

Three local petitions — for a playground, for rebuilding the platforms at Wręczyca station and for benches — share one template. Signing is the easiest step, and the timeline shows what happens next.

  • FromResidents
  • CoordinatorAleksandra Złotosz
  • ToPKP PLK S.A.

Petition to rebuild the platforms at Wręczyca station

128of 200 signatures

8 days left
Podpisuję

Plan to resolve the issue

  1. Collecting signaturesUntil 200 signatures
  2. Sending our appeal to PKP PLK S.A.Waiting for a reply
  3. Vote for Aleksandra in the local election29 March 2026
  4. We did it!The line runs more often again
The station platforms petition on a phone, from the header through the photo and the counter to the appeal's text.

The signing button always at hand

On desktop the signing form stays in view next to the text. On a phone, once the counter scrolls away, a “Sign” button pins to the bottom of the screen.

  • 1Who, with whom, to whom Sender, coordinator and recipient right at the top.
  • 2Counter and countdown A 200-signature goal and the days left.
  • 3Election day on the timeline A highlighted step — in two petitions the plan carries on to the issue being resolved.

Screenshots from the campaign period

Signing

Signing on a phone, distraction-free

The “Sign” button leads to a separate screen: no menu, the cursor already in the first field. After signing — a thank-you page with sharing and an e-mail with the election date.

  1. 1No menuJust a back arrow and the petition's title.
  2. 2Cursor in the first fieldType straight away, no tapping needed.
  3. 3Postcode pre-filled42-130 — the municipality's code, filled in.
  4. 4“Select all”Three consents in one tap.
  5. 5Thanks and .icsSharing (Web Share API, Facebook, link) and an e-mail with the election date.

The site's interface is in Polish.

The separate signing screen on a phone: no menu, the cursor in the first-name field, the postcode pre-filled.
Screenshot from aleksandrazlotosz.pl
The thank-you page with confetti on a phone.
Screenshot from aleksandrazlotosz.pl

Reminder

Election reminder

Near the bottom of every main page there is the polling station and an “Add the election date to your calendar” button. The header button opens the same modal.

  • E-mail firstThe address is stored and the resident gets an e-mail with an .ics file.
  • Then the calendarGoogle Calendar in one click, or an .ics file for Apple Calendar and Outlook.
  • Two remindersThe .ics file carries two reminders: 24 hours and 2 hours before election day.

The site's interface is in Polish.

Getting involved

Three ways to help

The “Get involved” page brings together three ways to help: volunteering, donations with the electoral code rules, and graphics to share on social media.

  • 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

The account number is hidden in this presentation.

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

Online ambassador

Five ready-made graphics — a story poster, Facebook posts, an Instagram version and a cover photo — downloadable in one click.

The online ambassador section with downloadable graphics on a phone.
Screenshot from aleksandrazlotosz.pl

Behind the scenes

The part nobody sees

Each of the four forms takes the same path: validation, a rate limit, storage, e-mails and an analytics event. Send a request and see where it stops.

  1. Formsignature, volunteer, report, reminder
  2. Rate limit5 per minute per IP address
  3. Zodfield validation, no HTML tags
  4. Prisma · Postgresstorage; one signature per e-mail
  5. Resendthank-you with .ics and a team notice
  6. PostHoga browser event and app errors
API response

6 React Email templates

  • Thanks for signingresident
  • Welcome aboardresident
  • Thanks for the reportresident
  • Election reminderresident
  • New volunteerteam
  • New reportteam

PostHog events

  • hero_cta_clicked
  • petition_signed
  • volunteer_signup
  • bank_account_copied

Payload CMS

News posts run on Payload CMS embedded in the same Next.js app — no separate server.

  • Lexical editor
  • Polish field labels
  • images in Vercel Blob

Quality

Accessibility, performance, discoverability

Things a resident won't notice — until they're missing: text that zooms, fast loading on a rural connection and answers in search.

Hero background

5243 KB → 277 KB

−95%after: 277 KB · Source PNG → 2560 px WebP (sharp)

Target: WCAG 2.1 AA

  • labels on every field
  • aria-expanded in the menu and FAQ
  • improved contrast
  • accessibility statement (self-assessment)

Where and when do we vote?

Structured data

To make it easier for search engines and AI assistants to answer questions about the election — plus a sitemap and an llms.txt file.

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

Security headers

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

The site's interface is in Polish.

Gallery

The whole site

Screenshots from the campaign period, desktop and phone. Click to zoom.

Summary

From the programme to action

Seven weeks, one person building it, and a site that offers the resident a next step everywhere — a signature, help or a date in the calendar.

Write to meBack to top
Role
Information architecture, UX, build
Stack
Next.js 16 · Payload CMS 3 · Prisma · Resend · PostHog
Identity
the KWW „Razem dla Wręczycy” campaign
Time
7 weeks, 175 commits