[ 03 · MONOGRID · 2022 ]
AGN — La Città dell’Energia
Seven low-poly quarters, two ways to move through each.
MONOGRID rebuilt AGN Energia’s La Città dell’Energia as a navigable 3D city, and it shipped in October 2022. I designed the whole interface; the 3D team built the world.
- Role
- Product Designer — all UI
- Year
- 2022
- Tags
- 3D web · UX / UI
[ 01 · Context ]
AGN Energia funds social and environmental projects and had been publishing them on a site called La Città dell’Energia. Triboo brought the rebuild to MONOGRID, where I worked at the time. The studio handled project management, creative direction, UX/UI design, development, 3D design, asset optimisation, QA and hosting.
The rebuild took the name literally: each theme became a quarter of a low-poly city you could walk into. Seven quarters sat on one map, and the site went live in October 2022.
[ 02 · Role ]
I designed the whole UI: every screen, menu and hotspot state the visitor touches. I worked next to the 3D artists who modelled the city, and my credit on the project reads “Designer Junior”, on the design team led by Marco Trevisani.
The world itself is theirs. What I drew is the layer that tells you where you are and how to get somewhere else.
[ 03 · Problem ]
A 3D space has none of the affordances a web page gives you for free. There is no scrollbar to say how much is left, and the back button stops meaning anything. Put someone inside a city and they will find one street and miss the other six quarters.
So most of the design work was navigation: how you see the whole city, how you move inside one quarter, and how you reach the next one without going back to the start.
[ 04 · Decisions ]
- 01
Opening on a map of the whole city
We opened on a 3D map of the whole city instead of dropping visitors at ground level. That gives up the first impression of standing inside the place. It buys legibility: all seven quarters sit in one frame, so the shape of the site is clear before anyone moves.
- 02
Two ways to move, not one
Inside a quarter you can steer an avatar by point-and-click, or let scroll drive camera moves between hotspots. Supporting both meant designing and building every quarter twice, and it costs the clarity of a single control scheme. One mode would have picked a side: the people who want to wander, or the people who want the content on a gesture they already know.
- 03
A side menu that teleports
The side menu reaches any quarter, and the editorial pages, from anywhere. It breaks the fiction that this is a place you travel through, because you arrive without having gone. The alternative was worse: without it, every quarter after the first costs a trip back to the map.
[ 05 · Outcome ]
The site shipped in October 2022 with seven navigable quarters, hotspots, camera moves triggered by scroll modules and point-and-click avatar navigation, all modelled in a low-poly style. It was built in Vue.js and Unity, with GSAP and Lottie for motion. Source: MONOGRID’s case page.
No audience numbers were published, so I have none to show. The 3D build is gone too: as of September 2026, lacittadellenergia.com is a conventional editorial site.
[ 06 · Credits ]
- Executive Producer Daria Mancassola
- Producer Arianna Magrini
- Junior Producer Martina Pozielli
- Tech Lead Alberto Parziale, Andrea Fiadone
- Interactive Developer Michel Collina
- Junior Creative Carolina Ronchi
- Junior Creative Designer Federico Caroli
- Design Lead Marco Trevisani
- Designer Junior Federico Vietti
- 3D Artist Lead Rudy Faletra, Mario Bernaudo
- 3D Artist Lorenzo Lastrucci, Eugenio Battoglia, Jonathan Borghesi
- Studio MONOGRID · Client Triboo for AGN Energia · Released October 2022
- Built with Vue.js, CSS, GSAP, Lottie, Unity
[ Contact ]
Let’s talk
Open to product design roles, and to good collaborations.