The Problem
Decades of serious infrastructure work, and almost no way for a new client to find it. Khaleel Electricals is a electrical contractor in Bengaluru, trusted by names the city knows, from Malabar Gold & Diamonds to St John's. Two everyday gaps were costing the firm work.- No digital presence. A prospect who heard the name had nowhere to land, so a decades-old contractor looked like a one-person operation.
- Paperwork that ran on memory. Quotations and invoices were typed in Word, then wrestled onto pre-printed letterhead that never quite lined up. Old quotes were near impossible to reuse, payments lived in someone's head, and nobody had one view of who owed what.
The Rebrand
A ground-up rebrand came first, one identity to serve the 2 broken journeys: a new logo, business cards, and a letterhead that carries through to every quotation and invoice. Designed at the source rather than borrowed, rebuilding it in code to a pixel continued the same brand work. The client who meets the firm online and the one who receives an invoice see one coherent business.The Marketing Site
The site is a single scrolling story rather than a brochure, moving from a hook, through the firm's promise, into proof. A brochure asks the reader to hunt for the reassuring bits. A paced narrative delivers them in the order a wary client wants.- A pinned narrative that advances chapter by chapter rather than in one go.
- A services breakdown across 5 categories that mirror what a Class-1 licence covers, from and to and testing, so a prospect can self-qualify in seconds.
- Proof that is shown, not claimed.
The Office Dashboard
The office experience is designed around the flow, not around screens. 3 decisions shaped it.- The document is the interface. A live A4 preview reproduces the letterhead as you type, so the thing you edit is the thing you send. That alone ends the alignment fights of the old Word process.
- Nothing is entered twice. Past documents are saved, searchable and reusable, the address book builds itself from them, and the revenue overview reads real money in and out.
- Status follows the money. A ledger on every invoice records date, amount and method, the balance updates live, and status derives itself from unpaid to partial to paid rather than being flipped by someone who remembered. A bank block and a QR code sit on the document, so clients pay the exact balance.
Reading the Business
The dashboard gave the balance on any one invoice, but not whether the firm was being paid faster than last quarter. A contractor needs the 4 or 5 numbers that change what they do today. An Insights page answers that as separate tiles, one idea each. Money owed and how much has gone stale. Work in hand, the accepted quotations not yet invoiced. Collection speed, measured only on invoices actually settled, because counting the unpaid ones has no end date and would flatter the number. Then the chase lists. Chart types follow what each measure is for. A trend is an area chart, a part-of-whole is a radial meter, and quotation value by status is sorted bars, where a pie would be unreadable at 3 quotations. Colour needed measuring rather than taste. Won, open and lost want to be green, amber and red, the hardest possible triad for colour-vision deficiency: the first set I chose failed outright, with 2 of the 3 effectively indistinguishable. Re-stepping them against a contrast and colour-vision check produced a set that passes, and dark mode needed its own steps rather than a lightened flip of the light ones. Every bar also carries its category name and value, so the colour reinforces the reading instead of carrying it. The brand's own orange, it turns out, sits at roughly 2:1 against white, well under the minimum for a mark or a label, so anything accented uses a darker step of it.Into the Field
The dashboard fixed the office but assumed someone was sitting at it. A quote starts on site, as a handwritten sheet or a few lines reeled off between calls, so the capture surface is a Telegram assistant rather than another screen to learn. It did not start that way. The first version was photo-first: snap the sheet and let the assistant read it. That assumed the job was already written down, and on site the contractor was usually moving with nothing to photograph. Voice came next and proved the most natural input of all; every format now arrives at the same place.- Snap it or say it. A photo, a PDF, a typed line or a voice note becomes a draft invoice or quotation.
- Nothing lands without a nod. Handwriting and speech are fuzzy, so the assistant shows the parsed job and waits for a tap before anything reaches the books. A misread figure is caught in the preview.
- Build it point by point. A job is worked out one item at a time, so a draft grows the same way.
- Repair a point, do not redo the job. If one line is wrong, the contractor resends that item alone and the assistant swaps it in, on a saved invoice as readily as a draft.
- Dictate a letter, not just a quote. Pick the client from the saved list, then speak or type the letter and confirm what comes back.
- Close the loop on money. Record a payment, see who owes what, send a document with a ready WhatsApp message in 1 to 2 minutes, by the client's account, without a laptop.
Under the Hood
The engineering is deliberately low-drama. Both products are vanilla HTML, CSS and JavaScript, 0 frameworks and 0 build steps, so they load instantly and the firm can have the code edited years from now. The dashboard treats Supabase Postgres with as the source of truth and local storage as an instant cache. The letterhead is rebuilt in code and rendered client-side, so preview and emailed PDF are identical. Email and the Telegram run on a , with Gemini reading each sheet or voice note into structured fields and the confirm-before-save rule keeping a misread out of the books. Reviews across security, accessibility and observability tightened the rest. The service-role key never reaches the browser, the assistant is gated by a secret token and an allow-list, and the marketing site gained a content-security-policy, subresource integrity and WCAG 2.2 AA keyboard, labelling and contrast fixes. A later pass closed database signups left open and moved the authenticator-code requirement into the security policies, because a page that ships its own database key is a curtain, not a wall. A second review, of the field assistant once it had been handling real money, found the faults that only show up in production. Its authentication failed open: with one environment variable missing, a comparison of nothing against nothing succeeded and every request authenticated. Telegram redelivers a message it thinks went unanswered, and reading a job sheet can take a minute, so one slow request could record a payment twice. And two writers, the phone and the desk, could each read a document, change it and save it back, the last finisher silently erasing the other. Each was closed at the mechanism, using the database's own uniqueness constraint as the lock against replays and making every edit conditional on the document not having changed since it was read. Being found came later. Alongside canonical tags, a sitemap and structured data, the site publishes an llms.txt, a plain-text brief for answer engines rather than browsers, because more prospects now start with a question to an assistant than a search box.Platform Evolution
Nov 2025
Rebrand
New logo, cards and the master letterhead.
Mar 2026
Marketing site
A scroll-driven single page built on GSAP.
Apr 2026
Invoicing editor
Live A4 preview, client-side PDF, then cloud sync.
May 2026
Email and address book
Serverless sending, a self-building client list.
Jun 2026
Payments ledger
Status derives itself from recorded payments.
Jun 2026
Field assistant
Photo, PDF, text or voice into a confirmed draft.
Aug 2026
Site rework
Assembling illustrations and a 15-project rail.
Aug 2026
Insights
Single-idea tiles, chart colour measured not judged.
Aug 2026
Handover and hardening
Domain and sending moved to the firm.
Next
Owner-led updates
The office refreshes content, no code.
Lessons
- Map the journey before the feature How a quote was really made, reused and chased beat any feature list.
- Derive state, do not set it Letting invoice status fall out of the payments ledger removed an entire class of human error.
- Automate the typing, not the judgement The assistant reads a sheet in seconds, but a person approves every figure.
- Measure colour, do not judge it Green, amber and red is the obvious palette and very nearly the worst one.
FAQ
Both are vanilla HTML, CSS and JavaScript on purpose. The site loads instantly with no build step, and a small business can have the code edited years from now without chasing a dependency tree. Longevity and load speed mattered more here than developer convenience.
Nothing is saved without a human tap. The assistant shows the parsed job and waits for confirmation, so a misread figure is caught in the preview rather than in the accounts. The model handles the typing while the person keeps the judgement.
A page like this ships its own source to whoever asks, including the key it uses to reach the database, so the login panel is a curtain rather than a wall. The wall is row-level security: without a signed-in session that has passed the authenticator code, the database returns nothing.