How a productgets built.

Examples come from each project’s own documentation. Finemy is a client project, so it is described only from what the live product shows.

1. 01

   Start from a problem someone has

   Each product starts from a question a person actually asks, or a job that keeps going wrong, written down before any screen is drawn. The problem decides what the first screen has to answer.

   In the work

   • Finemy

     The question people ask at the checkout: how much can I still spend before the end of this period?

   • Brief Builder

     A good brief is the first real conversation of a project, yet it usually starts as a copied document or a form the client has to sign up for.

   • Strange Forms

     Small product sites drift: prices go stale, placeholder text reaches production, and structured data claims things the page doesn’t show.

2. 02

   Discovery: decide what it must and mustn’t do

   Discovery ends in decisions, including what the product deliberately won’t do. Those limits are often what makes it simple to use and safe to run.

   In the work

   • Finemy

     No bank connection: expenses are logged by hand, so nobody has to share account access.

   • Brief Builder

     Local by default: no accounts and no sync unless someone chooses the optional cloud storage.

   • Strange Forms

     No cart, checkout, accounts or tracking: each design links straight to its page in the shop, which holds the real details.

3. 03

   UX architecture

   The structure behind the screens: the steps, what each one needs, what can depend on what, and what happens when something changes later.

   In the work

   • Brief Builder

     Four steps (Basics, Sections, Review, Scenario & PDF) and branching rules that may only depend on earlier questions.

   • Finemy

     Three steps the whole product follows: plan the budget, log expenses, see what’s left.

   • Strange Forms

     A deliberately small content model: product facts kept separate from presentation, and sections found by name, never by position.

4. 04

   Interface and visual design

   Hierarchy first: the most important answer gets the most prominent place. Visual identity follows from the product, not the other way round.

   In the work

   • Finemy

     The main screen leads with the amount still available, and the counter changes colour when less than 20% of the budget is left.

   • Strange Forms

     Patterns drawn by hand, mark by mark, to look like embroidery, presented on a site whose layout is separate from the product facts.

5. 05

   Implementation

   Working software, built with as few moving parts as the product allows, so it can be understood, changed and kept running.

   In the work

   • Brief Builder

     A mobile-first installable web app: Preact interface, IndexedDB in the browser, PDF generation with pdf-lib, and an optional cloud API on Cloudflare Pages Functions and D1.

   • Strange Forms

     A static publishing core: validated Markdown in, plain HTML out, images prepared locally and served from Cloudflare R2.

   • Finemy

     An installable web app that works in the browser on phone and desktop, with no app store.

6. 06

   Testing

   Tests cover the parts that would hurt most if they broke, and say plainly what can’t be tested automatically.

   In the work

   • Brief Builder

     Unit tests for the rule engine, storage, backups and PDF; browser tests for the app flows, including offline use and updates on a real build. Behaviour that needs a real iPhone is listed rather than assumed.

   • Strange Forms

     Every pull request is built, audited and HTML-validated before it can deploy, including a check that structured data matches the visible page.

7. 07

   Release and iterate

   Releasing is the start of learning what people actually do. Changes are added without breaking what already works.

   In the work

   • Brief Builder

     Since launch: a landing page, and optional cloud storage after Google sign-in. Keeping briefs on the device stays the default, and local briefs move to the cloud only on request.

   • Strange Forms

     Grew from a single site into a shared publishing core; the separate product pages were removed and their old addresses redirect to the home page.