Election officials preparing voting booths indoors ahead of polling day
← Academic Work

UXDE8411/W Summative: UX Design

A neo-brutalist progressive web app that turns South African local-election logistics, registration, ballots, stations, documentation, into one guided, offline-capable civic tool.

Role

UX Researcher & Designer

Program

Postgrad Diploma, UI/UX, Vega School

Tools & Methods

Figma · User research & personas · Progressive Web App design · Information architecture

01

Project Context

The brief starts from a specific, well-evidenced gap: Generation Z in South Africa is social and digitally fluent, but that fluency doesn't translate into electoral confidence. Youth voters face a knowledge gap (not understanding the difference between national and local government, or that municipal budgets are decided at ward level) alongside concrete logistical barriers: confusion over station locations, missing documentation, and a strict rule that voters can only cast a ballot at the station tied to their registered ward, which quietly disenfranchises anyone who's moved.

02

Three Personas

Thabo, 19, is a first-time digital native overwhelmed by conflicting information; his need is clarity through progressive disclosure rather than a wall of civic-education text. Lerato, 26, is a disillusioned community activist who has stopped trusting formal electoral processes, because she's never been able to identify who is accountable for the potholes and sewage failures in her neighbourhood; her need is transparency, a direct line from a councillor's name to their actual budget authority. Simphiwe, 28, is a relocated young professional who has no idea her registration is tied to an address she no longer lives at; her need is a system that surfaces that mismatch before election day.

03

Goal & Approach

Those three frustrations resolved into a single information architecture: four pillars, My Status & Logistics, Civic Academy, Candidates & Accountability, and Administrative Readiness, built as a Progressive Web App specifically because a PWA installs to a home screen without an app-store download and can run on a zero-rated data framework, directly addressing the connectivity barriers the research kept surfacing.

04

Why Neo-Brutalist

The neo-brutalist, glam-minimalist visual direction was chosen for the same reason: high-contrast, structurally legible design isn't an aesthetic preference here, it's an accessibility decision for a platform that has to work as hard for a first-time voter as for someone who already knows the process.

Design Decisions

What's actually going on

Real-time registration verification, engineered for trust

A 13-digit ID input queried securely against the IEC's own data returns registration status, ward and station instantly. The micro-interaction, a loading state resolving to a success or warning symbol, applies Wertheimer's Gestalt grouping principles so the returned data reads as organised clusters rather than a wall of text, closing the process-uncertainty gap research identifies as a leading driver of youth voter apathy. Confirming registration was designed to feel like the single most trustworthy interaction in the app, because if a user doesn't believe this number, nothing downstream matters.

Interactive wayfinding instead of a static address

The Voting Station Finder converts a text address into a live map pinning the user's exact designated station alongside its operating hours, using the device's native GPS. Applying Nielsen's match-between-system-and-real-world heuristic, it turns a spatial reasoning task the user would otherwise solve mentally into something the interface solves for them, which matters specifically for a mobile professional like Simphiwe who has minutes, not an evening, to sort this out.

An offline Voting Day Passport, not just a screenshot

Built on Service Workers and local storage rather than a server call, the passport compiles verified ID status, document type, ward number and station address into one visually distinct offline card, a direct response to load-shedding and mobile data cost as accessibility barriers, not edge cases. The card's high-contrast, Von Restorff-effect styling is intentional: it has to stay cognitively salient and easy to locate in a queue, under time pressure, on a phone the user may not be able to recharge or reconnect.

Civic education that answers "who is actually accountable"

Micro-learning modules on what a ward councillor, mayor or municipal council actually does are revealed through progressive disclosure rather than dumped as static text, linking those roles directly to service delivery and Integrated Development Plans. This is aimed squarely at Lerato's persona: her disillusionment wasn't apathy, it was a reasonable inability to identify who held power over her neighbourhood's decline, and Candidates & Accountability exists specifically to close that gap with localised candidate profiles rather than party messaging.

A wizard for the one task that actually needs more structure

Special-vote applications carry strict legal timelines and conditions, so that flow is deliberately broken into a sequential wizard rather than compressed into a single form, the one place in the product where extra structure is added instead of stripped away, because the task genuinely demands it. Everywhere else the interface removes friction; here it adds guardrails, and knowing which situation calls for which response was as much a design decision as any individual screen.

A first iteration that was wrong, kept in the record

The first task-flow draft combined ID entry, registration review and document selection into a single long-scroll form, with a silent bypass that gave returning users no data verification at all, four distinct failures documented before any visual design began. The refined flow splits into a returning-user express path with cached data and explicit confirmation, and a full progressive path with one decision per screen, merging back into the single offline passport. Both iterations stay in the case study because that critique is the actual process, not a tidied-up version of it.

The Work

Screens & process

Takeaway

What I'm proudest of here isn't the final flow, it's the paper trail: three completely different frustrations, not knowing the process, not trusting the process, and losing the process when you move, resolved into one coherent architecture instead of three bolted-on features. The failed first task flow stays in the submission, failures labelled, because that's what the actual process looked like. Design that survives its own documented critique is the only kind I trust.