Provably web app
Provably, 2024 to 2026Shipped
One or two lines: what Provably is (a startup that has raised £1.5M), and what you were there to do.
- Role
- Product designerProduct designDesign systemsFrontendQAUser researchMotion graphicsPrototyping
- Team
- Me and a product manager
- Timeline
- 2024 to 2026
- Tools
- FigmaNext.jsTailwind CSSClaude Code
Preview loop, 6 to 8 sZoom out across the whole app, then into one screen
The data workspace: explorer on the left, collections on the rightThe challenge
Where the app started: a barebones internal tool, and who used it.
What made it hard: data management spread over separate pages, and a product growing into networks, sharing and pricing.
The real constraints: team size, budget, no formal research.
What informed the design
Competitor workflows the PM and I reviewed, and what we took from them.
Requirements from the CEO, and how internal reviews worked.
Decision 1
One explorer for every resource
The problem with finding your way back through separate pages.
Options considered, what we chose, and the trade-off: more to learn at first, faster for repeated work.
Preview loop, 6 to 8 sSelecting a table in the explorer scopes the collections beside it
What a selection in the explorer changesDecision 2
Making a collection from where the data lives
Why collection creation moved into the workspace.
The four steps: source, columns, access, details. Which one mattered most and why.
Preview loop, 6 to 8 sCollection creation: source, columns, access, details
Choosing the source table and its columnsDecision 3
Inspecting resources without leaving the collection
The problem: checking where data comes from meant leaving the collection.
Side panels open above the collection, and the small strip steps between levels. The trade-off you weighed.
Illustration with sample data
ListedMonthly orders
Northbank Retail/// Order totals by region and month, without customer contact details.
ColumnsActivityAccessRequests | Column | Type | Enabled |
|---|
| order_id | UUID | |
| ordered_at | DATE | |
| region | TEXT | |
| total_gbp | DECIMAL | |
| customer_email | TEXT | |
Table nameThe name of the table as it appears in your connected database. Origineu-west-gateway / retail_prod / sales Linked collectionsCollections that depend on this table.View collections 2 A table opened from the collection's source path. The strip on the left steps up to its schema, database and middleware, and back down.Building a consistent system
The shared patterns behind these screens, and what you adapted rather than invented.
Taking over the frontend after the developer left: what you built yourself.
Illustration with sample data
ListedMonthly orders
Northbank Retaileu-west-gateway/retail_prod/sales/orders Order totals by region and month, without customer contact details.
ColumnsActivityAccessRequests | Column | Type | Enabled |
|---|
| order_id | UUID | |
| ordered_at | DATE | |
| region | TEXT | |
| total_gbp | DECIMAL | |
| customer_email | TEXT | |
Table nameThe name of the table as it appears in your connected database. Origineu-west-gateway / retail_prod / sales Linked collectionsCollections that depend on this table.View collections 2 ListedMonthly orders
Northbank Retaileu-west-gateway/retail_prod/sales/orders Order totals by region and month, without customer contact details.
ColumnsActivityAccessRequests | Column | Type | Enabled |
|---|
| order_id | UUID | |
| ordered_at | DATE | |
| region | TEXT | |
| total_gbp | DECIMAL | |
| customer_email | TEXT | |
Table nameThe name of the table as it appears in your connected database. Origineu-west-gateway / retail_prod / sales Linked collectionsCollections that depend on this table.View collections 2 DarkLight The same panel in dark, as shipped, and in the light theme that is on its way.What shipped and what I learned
What is true now that was not before. Real facts only, no invented numbers.
One specific thing you would do differently.