All work Case study

Fábio Félix

A digital home for Brasília's most-voted district deputy, built to prove the record and turn visitors into participants.

Client
Mandato Fábio Félix
Role
UX & UI Design
Disciplines
UX Design · UI · Design system
Platform
Responsive web
Hands holding an iPad showing the fabiofelix.com.br homepage

A political mandate site has to do several jobs at once: prove the work, organize it, and give people somewhere to act.

The full fabiofelix.com.br homepage on desktop, from the hero to the footer
The full homepage, browsing itself. It pauses along the way; scroll it yourself to take over.

01The context

The first openly gay district deputy in Brasília, and the most-voted in the city's history.

Fábio Félix is a social worker, LGBTQIA+ activist, and professor who studied at the University of Brasília. Before taking office, he worked in the socio-educational system with children and adolescents living on the street. He is the first openly gay district deputy in the Legislative Chamber of the Federal District, elected in 2018 and re-elected in 2022 with 51,792 votes, the most of any candidate in the city's history. He serves as president of the Human Rights Commission.

A mandate like this needs a digital home that can carry a lot at once: a legislative track record across very different policy areas, direct channels for constituents to complain or propose changes, recurring public initiatives, and a visual identity confident enough to match the office's own assertive political tone, without turning into noise.

A visual identity confident enough to match the office's own assertive political tone, without turning into noise.

Hand holding an iPhone with the fabiofelix.com.br homepage open
MacBook on an armchair showing the amendment suggestion form
Brand pattern tiles built from the campaign's shapes and colors
The system in the wild, phone, laptop, and the brand pattern that ties it together.

02The solution

Open with the receipts, not just the introduction.

The homepage leads with who he is and the headline claim before anything else, then backs it up immediately: a stats band with real, current numbers, over 1,798 complaints handled, 7 laws approved, and specific investment figures across health, education, and culture. For a visitor deciding whether this office actually delivers, that proof comes before the pitch.

Full homepage on mobile, from the hero and impact stats to news, focus areas, and the participation form
The homepage on a phone. Scroll inside the device to browse it yourself.

Right after the numbers, a personal introduction section grounds the record in a person: who Fábio Félix is, his background as a social worker and activist, and a direct link through to the full biography.

Building blocks of the homepage: the pink stats band, a tagged news card, and the blue trust band with a call to action
The blocks the homepage is assembled from: the stats band, tagged news cards, and the trust band with its call to action.

03Eleven focus areas, one system

A themed taxonomy so any constituent can find what matters to them.

The mandate's work spans eleven very different policy areas: anti-racism, culture, children and adolescents, human rights, education, LGBTQIA+ rights, women, health, public safety, public service, and mobility and urbanism. Each one gets its own color-coded tag and its own themed page, all built on the same underlying structure, so the breadth of the work stays organized instead of turning into a wall of undifferentiated content.

04Built to keep growing

News, recurring initiatives, and a media library the office can run on its own.

Below the fold, a tagged news feed keeps constituents current on legislative activity, and an "Especiais" section hosts the office's recurring public initiatives, like the Prêmio Marielle Franco de Direitos Humanos, an annual human-rights award, alongside the Human Rights Commission's own hub and an open call (Edital Realize) for community projects.

Tagged news grid listing recent legislative activity
The Nosso mandato (our mandate) page on mobile, presenting the team and the mandate's ways of working
The Nosso mandato page on a phone, scrollable in place.

A full multimedia library, photo galleries and video, documents public appearances and events, giving the office a running visual record of the mandate in action.

05Highlights

Three screens that show how the system earns trust and action.

The Quem e Fabio Felix biography page, opening with the most-voted record and the story behind it

A biography built on proof

The "Quem é Fábio Félix" page opens with the verifiable claim, 51,792 votes, the most-voted district deputy in DF history, then earns it with the story: social worker, LGBTQIA+ activist, professor, president of the Human Rights Commission. First-time visitors get credibility before rhetoric, in the same order the homepage taught them.

Tagged news grid and the Especiais section hosting recurring initiatives

News wired into the taxonomy

Every story in the news feed carries the same color-coded area tags used across the site, so a reader can jump from one article to everything the mandate does on that front. Below it, the "Especiais" row gives recurring initiatives, like the Prêmio Marielle Franco and the Edital Realize, permanent homes instead of one-off posts.

The contact block: a three-field form next to the three action cards, suggest an amendment, file a complaint, join the party

Contact that asks only what it needs

The contact block keeps friction at a minimum: name, email, and where you vote, the one field that lets the office map requests to administrative regions. Right below, the three action cards repeat the participation paths, so reaching out and acting live side by side instead of buried in a menu.

06Participation, not just information

Three clear paths for a visitor who wants to act, not just read.

The site closes its main flow with a dedicated participation hub: a direct contact form asking for name, email, WhatsApp, and administrative region, next to three parallel actions, suggest a budget amendment, file a rights complaint, or join the party, so a visitor with an actual request doesn't have to hunt through the site to find the right channel for it.

Contact block with a three-field form and three action paths: suggest an amendment, file a complaint, join PSOL
The amendment suggestion form (formulario de emendas) on tablet, where constituents propose how public funds should be used
The amendment form on tablet, one of the three participation paths. Scroll inside the device to see the full page.