b2b web product · 2026 · product design & frontend, sole designer · backend team · two junior developers · react, typescript
a web app where companies keep their daily records: invoices, stock, customers, cash. i planned most of its flows, designed every screen and own the frontend.
the backend team worked separately and sent me documentation. i was told what each module had to do; how it would work, on screen and in code, was left to me.
the people who use it are accountants, and accountants work fast on the keyboard. so i matched the visual reading order to the tab order: focus moves where the eye already went.
at first i kept data apart, one thing per screen. accountants wanted to see everything at once, so now the customer and product details sit beside the invoice while it is being written.
a full setup asks for a lot before anyone can work. so only the first step is required: a new user can finish it and start, or go through the whole setup from the beginning.
the frontend had to move before the backend was finished. i turned the documentation into an api contract with mocks, and the screens were built against it.
the app is split into 14 modules. each keeps its own api calls, hooks and schemas, so one can change without touching the others. it is also the structure the two junior developers i mentor now work in, with the tests i set up in vitest and testing library.
bringing dense data into a shared workspace.
keeping the customer, products, and transaction summary in the same context throughout the invoice workflow.
sortable columns and distinct data states within the platform.
organizing company, address, and contact information into steps.
settings groups within the shared navigation layout.
a layout study showing the arrangement of module areas.
names withheld. all data is fictional.