A town's website rebuilt so residents find what they need, as a pitch

The problem

A town's website is where residents go for the basics: which office handles what, who the officials are, the emergency hotlines, the latest notices and how the budget is spent. When that information is scattered or dated, people phone around or walk to the town hall. I rebuilt the Municipality of San Francisco's public website as a prototype to show the town what a clear, modern site could look like, and to pitch it alongside e-Serbisyo, the online services system.

Constraints

• Not the official website. Every page carries a prototype notice, link previews say "prototype redesign", and search engines are told not to index it three ways.
• Placeholder content. Officials' names come from the public official site; news, messages, figures and officials' photos marked "sample" stay placeholders until the town provides the real ones.
• Two languages. English and the local language, switchable on every page.
• Free hosting. It runs on Netlify's free tier, which shaped how often it can redeploy.

What I did

Strategy and brand

I organised the site around what residents come for: Government, Services, Barangays, News, Transparency (bids and budget), Visit, Emergency and Contact. An emergency advisory bar and a site search (Ctrl + K) put urgent information one step away.

Design

The "Night Sky Glass" look went through seven design versions, from light glass to a night-sky palette. It has animated weather cards, a Vision and Mission section, an orbit carousel that spotlights each official, and photo cards for services and life events. Dark mode is built in.

Engineering

A Next.js and TypeScript site with all content in one file, so the town's text can replace the samples in one place. The 3D terrain maps of the town and its barangays use three.js and Leaflet, with hover details and pins. Every version is tagged and redeploys to Netlify on each push.

Outcome

A live prototype of the full public site, with nine sections, two languages, 3D maps and an emergency bar. It is clearly marked as unofficial and kept out of search results. The real content, licensed map tiles and the town's approval are still to come.

What I'd change next time

I'd get the town's real content and photos before polishing the design, because placeholders hide layout problems until late. I'd also set up hosting with room to grow from the start, since the free tier paused deploys mid-project.