The brief
The SGO office in Abu Dhabi wanted one place to see the city's initiatives in context. Al Thalouth's Three Eyes platform puts every initiative on a 3D model of the city and looks at it through three lenses: Foundations, what exists today; Systems, what sustains people; and Dreams, what is being built for tomorrow.
The challenge
Infrastructure, public services and future projects usually sit in separate reports, each with its own numbers. The platform had to bring them together in a way that is quick to scan, grounded in place, and deep enough to explain a single initiative: its scope, stakeholders, progress and what comes next.
And it had to feel worthy of the city it shows, on a large screen and on a phone.
My role
My experience department at Born ran this work. I set the experience strategy and led the concept and design work with the team.
I articulated it through mood boards, brand elements and map studies, then the UI for the map, the lenses, initiative details and an AI assistant. I then coded the whole 3D prototype myself.
What we did
- Framed the platform around three lenses: Foundations, Systems and Dreams.
- Explored inspiration, brand elements, maps and imagery for a look worthy of the city.
- Designed the map overview, lens lists, initiative details and a full-screen story for flagship projects.
- Built a working prototype in React and Three.js, on a 3D model of Abu Dhabi prepared in Blender.
- Added an AI assistant, filters and search, camera views, infrastructure layers and a guided tour.
- Gave the team an admin tool to add and edit initiatives without touching code.
Three lenses
Everything hangs off the three lenses. Foundations covers infrastructure, transport, utilities and demographics. Systems covers public services, health, education, water and governance. Dreams covers what is being built: research hubs, cultural landmarks and sustainability programmes.
Switching lens recolours the city and changes which initiatives light up, so the same streets tell a different story each time.
Look and feel
We started with inspiration boards, brand elements, map studies and imagery, aiming for something closer to a premium product than a dashboard: dark, calm and architectural, with gold for emphasis.
The UI followed: a map overview with initiatives pinned in place, a list for each lens, a selected state that flies the camera to the site, and a long-form story for flagship projects.
The city in 3D
I built the prototype in React with Three.js. The city is a model of Abu Dhabi prepared in Blender and optimised for the web, with the sea, the skyline and the districts in their real positions.
An intro animation brings the city in and a guided tour shows the controls. People can orbit, pan and zoom, switch to a drone or horizon view, and show transport and electricity layers or data hotspots.
Initiatives
Each initiative sits where it happens. Selecting one flies the camera to it and opens its details: what it is, its status, its stakeholders and the key performance indicators that show progress. Filters and search narrow the list by lens and category.
Flagship projects open into a full-screen story, with imagery, what is planned and links on to related Dreams.
AI assistant
The Three Eyes assistant sits alongside the map. People can ask about a project's scope, its phases or development priorities in plain language, instead of hunting through reports.
Built to show
The prototype runs in the browser behind a password, works on mobile, and is backed by a simple content store. An admin screen lets the team create and edit initiatives, upload images and set stakeholders, and a coordinate picker places each one on the map, so the demo could grow without code changes.
The result
A working prototype rather than a deck: a 3D Abu Dhabi that people can explore through three lenses, with every initiative in place, an assistant to ask, and the tools to keep the content current. It made the idea tangible from the first click.
