01 /2026
Real projectProduct designer workspace
A tool where research, flows, screens and decisions form one chain — and every decision has a “why”. The case studies on this site are published from it.
There is no live site — browse the project pages below. Project pages ↓
How it works
A recording of the tool with the demo project, no sound.
Project pages
Click a page to view it full screen. Flip through with the arrow keys or a swipe.
On a phone
01 /09
In short
Challenge
Design artifacts live in different places: interviews in documents, boards in Miro, mockups in Figma, decisions in chats. A month later nobody remembers why a screen looks the way it does, and the portfolio has to be pieced together from fragments.
Solution
One tool for the whole chain: brief → competitors → research → synthesis → insights → opportunities → flows → screens → decisions. Links between artifacts appear on their own when one grows out of another, and a finished project is published to this site as a case study.
Outcome
The tool is in use: I run my projects in it, and the case studies on this site are published from it. From any decision you can walk back to the quotes it stands on.
02 /09
How I worked
- research screens: plan, guide, interviews, matrix
- 7research screens: plan, guide, interviews, matrix
- levels: quote → pattern → insight
- 3levels: quote → pattern → insight
- views: cards, matrix, UX review
- 3views: cards, matrix, UX review
- impact and effort matrix
- 3×3impact and effort matrix
- step types in the flow editor
- 8step types in the flow editor
- required states: loading, empty, error
- 3required states: loading, empty, error
- log format: why and what was rejected
- ADRlog format: why and what was rejected
03 /09
Insights
The “why” is lost first
The mockup outlives the project, the reasoning does not. When someone asks a month later why it is so, the answer is dug out of chats or made up again.
My own practice, project retrospectivesNobody maintains links by hand
Links between documents last until the first rename. Traceability works only if it appears by itself, as a by-product of the work.
Attempts to keep traceability in documents and spreadsheetsThe portfolio is pieced together from fragments
A case study is written after the project, from memory. If the process were already structured, the case would be a snapshot, not a separate job.
Preparing the case studies for this site04 /09
Competitors
I compared not the products as a whole but how they cover the chain from research to decision. Each is strong in its own link, but the chain breaks at the hand-offs.
| Workspace | Documents (Notion) | Boards (Miro, FigJam) | Research repository (Dovetail) | |
|---|---|---|---|---|
| Quotes → insights with sources | Yes | Partly | Partly | Yes |
| Decision linked to evidence | Yes | Partly | No | Partly |
| Flow editor | Yes | No | Yes | No |
| Screen spec with states | Yes | Partly | Partly | No |
| Decision log with rejected options | Yes | Partly | No | No |
| Project readiness by stage | Yes | No | No | No |
05 /09
Opportunities
- OPP-01
How might we keep the “why” together with the decision instead of in a chat?
- OPP-02
How might we create links between artifacts without manual work?
- OPP-03
How might we turn a project into a portfolio case study in one step?
06 /09
Flow
The main path: from an empty project to a case study on the site. Every step leaves an artifact the next one grows from.
- 01New project — one field
- 02Brief and competitors
- 03Interviews → quotes
- 04Synthesis board
- 05Insight → opportunity
- 06Flow and screens
- 07Decision with evidence
- 08Case study on the site
Edge cases
- Empty workspace — an “Open demo project” button with ready-made data
- Double click on the demo — one project, not two
- Deleted artifact — links do not break, the panel shows what is gone
- Forgotten password — recovery by email
- Data loss — a JSON backup of the project
- Phone — the flow canvas becomes a list of steps, tables scroll sideways with the first column pinned
07 /09
Screens
Key screens of the tool. Each has the states that are easy to forget: empty, loading, error. Each also works on a phone: screenshots of both versions are in Project pages above.
Project overview
Progress by stage and next steps — exactly what is unfinished
- New project
- In progress
- All done
Synthesis board
Quotes and observations are dragged into pattern columns; a column becomes an insight
- Empty
- No pattern
- Ready for an insight
Links panel
Sources, the chain and what the artifact turned into
- No links
- Direct
- Through the chain
Flow editor
8 step types, branches and edge cases attached to steps
- Empty canvas
- Step selected
- Not thought through
Decision log
Context, decision, why, rejected options and evidence
- Draft
- Accepted
- Superseded
08 /09
Decisions and why
DEC-001Links are created automatically
Why: When an insight is written from a board column, the quotes in that column become its sources. Nobody keeps manual traceability (INS-002), so it has to be a by-product of the work.
Rejected options: Tags and manual links; A separate traceability diagram. Evidence: INS-002, OPP-02.
DEC-002A case study is a snapshot of the project, not a separate document
Why: Publishing freezes the project data at that moment. Later work does not reach the site until the case is published again, and the portfolio does not have to be written from scratch.
Rejected options: A separate CMS for the site; A live view of the project without a snapshot. Evidence: INS-003, OPP-03.
DEC-003A demo project instead of an empty screen
Why: An empty tool explains nothing. The demo shows the whole chain on an example, and it is safe to break.
Rejected options: An onboarding tour with tooltips; An empty screen with instructions. Evidence: First sessions in the tool.
DEC-004Access by invitation
Why: This is a working tool with client data. Sign-up is open only to addresses on a list, and every row in the database is protected by access rules.
Rejected options: Open sign-up. Evidence: Security audit before launch.
DEC-005The phone is a full version, not a viewer
Why: A project has to be opened and fixed where it is needed: in a meeting, on the go. So the phone gets the same tool: sections in a row at the top, the flow canvas as a list of steps, wide tables scrolling sideways, and search that reaches any artifact. Every release checks the pages on a phone screen automatically: nothing may run off the edge.
Rejected options: A read-only version; A separate mobile app. Evidence: Automated tests on a phone screen, Phone screenshots above.
09 /09
Results
The tool is launched and I run my own projects in it. This site is its continuation: case studies are published from the tool, and the pages of the site and the tool are checked automatically for accessibility and phone layout.
- stages in the project chain
- 9stages in the project chain
- tables with row-level access rules
- 46tables with row-level access rules
- automated database checks
- 276automated database checks
- site languages: Ukrainian and English
- 2site languages: Ukrainian and English
Next case · 02 / 06
Neural WebCam
Tell me briefly about the product and the timeline — I'll reply within a day.