01 /2026
Реальний проєктРобочий простір продуктового дизайнера
Інструмент, де дослідження, сценарії, екрани й рішення пов'язані в один ланцюжок — і кожне рішення має «чому». З нього публікуються кейси на цей сайт.
Живого сайту немає — сторінки проєкту можна переглянути нижче. Сторінки проєкту ↓
Як це працює
Запис інструмента з демо-проєктом, без звуку. Інтерфейс англійською, як на скриншотах нижче.
Сторінки проєкту
Натисніть на сторінку, щоб переглянути її на весь екран. Гортати — стрілками або свайпом.
Версія для телефона
01 /09
Коротко
Задача
Артефакти дизайну живуть у різних місцях: інтерв'ю — в документах, дошки — в Miro, макети — у Figma, рішення — в чатах. Через місяць ніхто не пам'ятає, чому екран саме такий, і портфоліо доводиться збирати заново з уламків.
Рішення
Один інструмент на весь ланцюжок: бриф → конкуренти → дослідження → синтез → інсайти → можливості → сценарії → екрани → рішення. Зв'язки між артефактами створюються самі, коли одне виростає з іншого, а готовий проєкт публікується на цей сайт як кейс.
Результат
Інструмент працює: ним я веду проєкти, а кейси на цьому сайті публікуються з нього. Від будь-якого рішення можна пройти назад до цитат, на яких воно стоїть.
02 /09
Як я працював
- екранів дослідження: план, гайд, інтерв'ю, матриця
- 7екранів дослідження: план, гайд, інтерв'ю, матриця
- рівні: цитата → патерн → інсайт
- 3рівні: цитата → патерн → інсайт
- режими: картки, матриця, UX-рев'ю
- 3режими: картки, матриця, UX-рев'ю
- матриця впливу й зусиль
- 3×3матриця впливу й зусиль
- типів кроків у редакторі сценаріїв
- 8типів кроків у редакторі сценаріїв
- обов'язкові стани: завантаження, порожньо, помилка
- 3обов'язкові стани: завантаження, порожньо, помилка
- формат журналу: чому і що відкинули
- ADRформат журналу: чому і що відкинули
03 /09
Інсайти
«Чому» губиться першим
Макет переживає проєкт, а аргументи — ні. Коли через місяць питають, чому так, відповідь шукають по чатах або вигадують заново.
Власна практика, ретроспектива проєктівЗв'язки вручну ніхто не підтримує
Посилання між документами живуть до першого перейменування. Трасування працює, тільки якщо з'являється само, як побічний продукт роботи.
Спроби вести трасування в документах і таблицяхПортфоліо збирається з уламків
Кейс пишеться після проєкту, по пам'яті. Якби процес уже лежав структуровано, кейс був би знімком, а не окремою роботою.
Підготовка кейсів для цього сайту04 /09
Конкуренти
Порівнював не продукти загалом, а те, як вони закривають ланцюжок від дослідження до рішення. Кожен сильний у своїй ланці, але ланцюжок рветься на переходах.
| Робочий простір | Документи (Notion) | Дошки (Miro, FigJam) | Репозиторій досліджень (Dovetail) | |
|---|---|---|---|---|
| Цитати → інсайти з джерелами | Є | Частково | Частково | Є |
| Рішення пов'язане з доказами | Є | Частково | Немає | Частково |
| Редактор сценаріїв | Є | Немає | Є | Немає |
| Специфікація екрана зі станами | Є | Частково | Частково | Немає |
| Журнал рішень з відкинутими варіантами | Є | Частково | Немає | Немає |
| Готовність проєкту по етапах | Є | Немає | Немає | Немає |
05 /09
Можливості
- OPP-01
Як ми можемо зробити так, щоб «чому» зберігалося разом із рішенням, а не в чаті?
- OPP-02
Як ми можемо створювати зв'язки між артефактами без ручної роботи?
- OPP-03
Як ми можемо перетворювати проєкт на кейс для портфоліо одним кроком?
06 /09
Флоу
Основний шлях: від порожнього проєкту до кейсу на сайті. Кожен крок лишає артефакт, з якого виростає наступний.
- 01Новий проєкт — одне поле
- 02Бриф і конкуренти
- 03Інтерв'ю → цитати
- 04Дошка синтезу
- 05Інсайт → можливість
- 06Сценарій і екрани
- 07Рішення з доказами
- 08Кейс на сайті
Крайні випадки
- Порожній робочий простір — кнопка «Відкрити демо-проєкт» з готовими даними
- Подвійне натискання на демо — один проєкт, а не два
- Видалений артефакт — зв'язки не ламаються, панель показує, що зникло
- Забутий пароль — відновлення листом
- Втрата даних — резервна копія проєкту в JSON
- Телефон — схема сценарію стає списком кроків, таблиці гортаються вбік з закріпленою першою колонкою
07 /09
Екрани
Ключові екрани інструмента. У кожного є стани, які легко забути: порожньо, завантаження, помилка. Кожен працює й на телефоні — скриншоти обох версій у «Сторінках проєкту» вище.
Огляд проєкту
Прогрес по етапах і наступні кроки — що саме не дороблено
- Новий проєкт
- У роботі
- Усе готово
Дошка синтезу
Цитати й спостереження перетягуються в колонки-патерни; з колонки — інсайт
- Порожня
- Без патерну
- Готовий до інсайту
Панель «Зв'язки»
Джерела, ланцюжок і у що перетворився артефакт
- Немає зв'язків
- Прямі
- Через ланцюжок
Редактор сценарію
8 типів кроків, розвилки й edge cases, прив'язані до кроків
- Порожня схема
- Крок вибрано
- Не продумано
Журнал рішень
Контекст, рішення, чому, відкинуті варіанти й докази
- Чернетка
- Прийнято
- Замінено новим
08 /09
Рішення і чому
DEC-001Зв'язки створюються автоматично
Чому: Коли інсайт формулюється з колонки дошки, його джерелами стають цитати з цієї колонки. Ручне трасування ніхто не веде (INS-002), тож воно має бути побічним продуктом роботи.
Відкинуті варіанти: Теги й ручні посилання; Окрема діаграма трасування. Докази: INS-002, OPP-02.
DEC-002Кейс — знімок проєкту, а не окремий документ
Чому: Публікація фіксує дані проєкту на момент публікації. Подальша робота не потрапляє на сайт, поки кейс не опубліковано знову, а портфоліо не треба писати з нуля.
Відкинуті варіанти: Окрема CMS для сайту; Живе відображення проєкту без знімка. Докази: INS-003, OPP-03.
DEC-003Демо-проєкт замість порожнього екрана
Чому: Порожній інструмент нічого не пояснює. Демо показує весь ланцюжок на прикладі, і його можна сміливо ламати.
Відкинуті варіанти: Онбординг-тур підказками; Порожній екран з інструкцією. Докази: Перші сесії в інструменті.
DEC-004Доступ за запрошенням
Чому: Це робочий інструмент з даними клієнтів. Реєстрація відкрита лише для адрес зі списку, а кожен рядок у базі захищено правилами доступу.
Відкинуті варіанти: Відкрита реєстрація. Докази: Аудит безпеки перед запуском.
DEC-005Телефон — повноцінна версія, а не перегляд
Чому: Проєкт треба відкрити й поправити там, де він знадобився: на зустрічі, в дорозі. Тому на телефоні той самий інструмент: розділи — рядком угорі, схема сценарію — списком кроків, широкі таблиці гортаються вбік, а пошук веде до будь-якого артефакту. Кожен реліз автоматично перевіряє сторінки на екрані телефона: нічого не має виходити за край.
Відкинуті варіанти: Версія лише для перегляду; Окремий мобільний застосунок. Докази: Автоматичні тести на екрані телефона, Скриншоти телефона вище.
09 /09
Результат
Інструмент запущено, ним я веду власні проєкти. Цей сайт — його продовження: кейси публікуються з інструмента, а сторінки сайту й інструмента перевіряються автоматично на доступність і верстку на телефоні.
- етапів у ланцюжку проєкту
- 9етапів у ланцюжку проєкту
- таблиць з правилами доступу до рядків
- 46таблиць з правилами доступу до рядків
- автоматичних перевірок бази даних
- 276автоматичних перевірок бази даних
- мови сайту: українська й англійська
- 2мови сайту: українська й англійська
Наступний кейс · 02 / 06
Neural WebCam
Розкажіть коротко про продукт і терміни — відповім протягом доби.