Lab
Interfaces you can use, not screenshots of them.
Four product pieces, built to production standards and running live on this page. Sort the grid, book a slot, ask the documents a question, invite a teammate. Everything responds.
(01)
Orders grid
Search, sort, select and act on a set of orders without the page ever reloading. A support or finance team lives in a screen like this all day, so every interaction has to be fast and easy to undo.
What to try
- Type a customer name to filter, then click a column header to sort.
- Select a few pending orders and mark them paid. Undo it from the toast.
- Use the arrow keys to move between rows, Enter to open one, Space to select it.
Under the hood
- Keyboard first: everything you can click, you can reach from the keyboard, and focus is always visible.
- Bulk changes stay reversible for a few seconds. That replaces a confirmation dialog without losing safety.
- Export writes a real CSV from the selected rows, in the browser, with nothing sent to a server.
(02)
Booking scheduler
A complete booking flow: a calendar that knows which days are open, time slots shown in the visitor's own time zone, a short form, and a confirmation they can add to their calendar.
What to try
- Pick a weekday, then a time. Change the time zone and watch the slots move with it.
- Fill in a name and email. The form only continues once both are valid.
- After confirming, download the invite. It opens in any calendar app.
Under the hood
- Availability is worked out per day, so a booked slot stays booked whichever time zone you view it in.
- Times are stored once, in the host's time zone, and converted for display. Never the other way round.
- The confirmation builds a standard calendar file on the spot, with no server involved.
(03)
Knowledge assistant
Ask a question and the assistant finds the relevant passages in three policy documents, writes an answer from them, and cites each claim. When the documents don't cover something, it says so instead of guessing.
What to try
- Ask one of the suggested questions, or type your own.
- Click a citation to jump to the passage it came from.
- Ask about enterprise pricing. It isn't in the documents, and the assistant will say so.
Under the hood
- Retrieval runs before the answer is written, so the answer can only use what was found.
- Citations point at a passage, not a whole document, so a reviewer can check them in seconds.
- A clear “not in the documents” reply is designed in from the start. It is what makes the rest trustworthy.
(04)
Workspace portal
The admin side of a SaaS product with several customer workspaces. Switch between them, invite people, change roles within the seats the plan allows, and watch every action land in the audit log.
What to try
- Invite a teammate by email. They appear as pending and the seat count updates.
- Change someone's role, then open the Audit log tab.
- Switch to Quill & Ink, where you are only a member, and see what you can no longer do.
Under the hood
- One role matrix decides what the interface allows and what the audit log records.
- Each workspace is isolated. Switching tenants swaps members, seats, plan and history together.
- Controls you can't use are shown disabled with a reason, not hidden, so the rules are visible.
(05)
Want one of these in your product?
[email protected]Each piece on this page was written for it, with React and Framer Motion and no component library. Tell me which one is closest to what you need, and what it has to connect to. Or start on Upwork