Back

Chart of Accounts

A Chart of Accounts (CoA) is the structured framework that organises all financial data into clear categories like income, expenses, and costs, allowing it to be consistently tracked, modelled, and reported. At Built AI, this was a critical feature because users were bringing in messy, inconsistent data from multiple sources, and without a standardised structure, nothing else in the platform could work reliably. The CoA acted as the foundation layer that translated and normalised this data, enabling accurate calculations (like NOI and cashflow), powering features such as recoveries and portfolio analysis, and creating a single source of truth users could trust. Without it, the product would lack both accuracy and credibility.

As the product evolved, we reached a point where the existing platform couldn’t support the level of detail required, particularly modelling calculations down to a lease level. Rather than continue to layer complexity on top of a limited foundation, we made the decision to build a new platform from scratch, designed to better handle granular financial logic and scale with the product’s ambitions. This shift also aligned with a broader change in how the business wanted to build products, with a stronger focus on AI.

Back

Website Rebuild

C-level stakeholders wanted to modernise Built AI’s web presence with a more premium, polished aesthetic inspired by companies like Stripe, while clearly introducing Asset and Portfolio Management as a key part of the platform offering, something the existing site didn’t communicate effectively.

01

Problem

The existing website felt visually dated and didn’t match the expectations of US enterprise users. The light brown aesthetic and inconsistent layouts made the product feel less premium than it is. More importantly, the information architecture was fragmented. Key messages were spread across multiple pages with no clear hierarchy, making it hard to quickly understand what Built AI actually offers.
Asset and Portfolio Management, one of the platform’s most important capabilities, wasn’t clearly communicated at all, leading to a gap between the product’s value and how it was presented.

02

Solution

Redesigned the site with a more modern, premium visual direction inspired by Stripe, using cleaner layouts, stronger typography, and a more confident colour system.
Restructured the information architecture to create a clear narrative, consolidating scattered content and introducing Asset and Portfolio Management as core pillars of the platform.

Designed on Figma and built in Framer with a responsive, polished experience.

01

The process

By talking with users we understood that not having CoA on the platform was clearly an issue so we started to plan how we could build it backed by user data.

02

Benchmarking

Users were relying on outdated, legacy tools that were clunky, rigid, and difficult to navigate, making even simple financial tasks time-consuming and hard to trust. The lack of transparency in how data was structured and calculated created friction across workflows.

03

Personas

The feature mainly serves three core users: Analysts who need clear visibility and fast interaction with data, Asset Managers who rely on accurate, consistent outputs they can trust, and Finance Managers who require scalable setup and governance tools. Across all three, the need is the same: structured, transparent financial data that replaces manual, unclear workflows with something reliable and easy to use.

04

Main user journey

I mapped the end to end journey of setting up a Chart of Accounts, from importing or creating a new structure, selecting templates, and defining categories, through to organising hierarchies and applying financial logic. The goal was to make each step clear and predictable, so users can move from setup to a structured, usable model without friction.

05

Feature explorations and final designs

As AI became more embedded in the workflow, we focused on helping users navigate a deeply nested structure without feeling overwhelmed. This meant designing for clear, progressive disclosure, revealing the right level of information at the right time while keeping the overall flow easy to understand. We explored multiple approaches through rapid prototyping using Figma Make and Claude, before refining and finalising the experience in Figma.

06

The prototype

Once the designs were ready, we first built simple HTML prototypes to quickly validate flows and interactions. From there, we moved to production-aligned prototypes using React, TypeScript, and Vite to closely match the final build. By leveraging tools like Claude, which already understand the design system and codebase, we significantly sped up this process. Combined with our set of custom Claude Skills and finalised Figma designs, this approach reduced time to ship by over 50% while keeping outputs closely aligned with production.

Download HTML prototype