A digital twin platform for building operations

Designed in Figma This project was designed entirely in Figma. The follow-up was built with coding agents: NXT, an operations platform for building portfolios →

My role

Akila builds digital twins and AI for buildings and infrastructure: one model that connects a portfolio's spaces, assets, systems and documents, so people and AI can see what exists, what is happening and what to do next. Incubated by Aden Group and an NVIDIA Preferred Partner, it runs on more than 350 sites across five continents. I joined in 2023 and own the design of the product: the web platform, the mobile app and the design system behind both.

What I do:

Redesigned the web and mobile product, working closely with product managers and engineers on domain-heavy features: energy data, carbon accounting and maintenance work orders.
Built and maintain the design system and UX/UI guidelines that every screen uses, plus an annotation template engineers build from.
Set consistent chart styles, using ECharts templates, so charts and dashboards read the same way across the product.
Led a three-person design team across China and Vietnam.

What I designed

Akila is mainly a web platform with five product suites (Energy, Carbon, Maintenance, Platform and Digital Twin), each with 2–7 core features, plus a mobile app for maintenance work orders and inspections. The domain is deep, so most design work starts with a product manager walking me through the business logic.

Design system and UX/UI guidelines

One system for web and mobile, so a feature built by any engineer looks and behaves like the rest of the product. The guidelines cover interaction, visual design and accessibility.

Styles: typography, colour and visual effects, with a clear hierarchy.
Components: buttons, checkboxes, badges, form fields, toasts, tooltips and more.
Patterns: empty states, loading indicators, date and time pickers, dialogs and modals.
Functions: standard flows for filter presets, file upload and import/export.
Page templates: table, detail, create/edit and configuration pages, so every new feature starts from a known structure.

Design system sheet showing controls, tabs, badges, tags and scroll bars in light and dark modes — Design system page: checkboxes, tabs, badges and tags in light and dark modes

Design system sheet showing button styles and sizes in light and dark modes with hover and disabled states — Button styles in every size and state, so buttons look and behave the same

Design system sheet showing select dropdowns in default, error and selected states — Dropdown rules covering normal, error and selected states

Design system sheet showing search fields, text inputs and input validation rules — Input and search fields with clear rules for error messages

Data dashboards

I standardised the chart components on the ECharts library, so energy and carbon data looks and behaves the same everywhere. Filters by time period and data type let people explore the numbers for themselves.

Dark asset dashboard with a map of sites and collapsible widgets for maintenance performance — Asset dashboard: sites on a map with maintenance completion and equipment status

Dark energy dashboard with a site map and widgets for electricity, water and gas use — Energy dashboard: electricity, water and gas use shown per site on a map

Dark carbon emissions dashboard with a site map, scope breakdown and five-year trend charts — Carbon dashboard: emissions by scope and a five-year trend across sites

Example of chart design standardisation.

Mobile responsiveness

Maintenance teams work on phones and tablets, so layouts adapt to the screen, navigation collapses into a menu on small screens, and controls are sized for touch.

Persona workshop

To answer “who is our user?”, the product team ran a persona workshop. We interviewed client-facing colleagues, turned what we heard into persona profiles, and agreed on core needs, pain points and motivations.