AETHRA Wire: спроєктував з нуля HR-платформу
Я отримав простий бриф про продукт, як набір вимог, без чіткого ТЗ і спроєктував продукт із нуля.
AETHRA Wire це B2B-платформа, що з'єднує аутсорсингові компанії з партнерами для управління персоналом.
Розробив бізнес-вимоги, user stories й функціональні специфікації. Запроектував інформаційну архітектуру, дизайн-систему і всі екрани для обох ролей: Provider, який керує працівниками по клієнтах, і Worker, який керує власним графіком.
Figma Claude Code
Зробив продукт із короткого опису: інформаційна архітектура, JTBD на кожну роль, усі екрани, через ітерації із клієнтом
Figma-компоненти мапляться на класи один в один — хендоф без тертя, все на токенах і компонентах
Розробка йшла паралельно з дизайном на спільній бібліотеці компонентів, тому команда зібрала робочий продукт за три тижні.
Розмиті вимоги
Бриф описував ідейно, що продукт має робити, без чітких вимог і технічого завдання
Тому до першого екрана я змапив інформаційну архітектуру обох ролей окремо, знайшов їхні перетини і виписав таблиці jobs-to-be-done на кожен ключовий сценарій.
Структурних рішень у документах не було: ієрархія навігації, які сценарії заслуговують окремих екранів, як ролі стикаються з даними одна одної і де система мусить захищати користувачів від самих себе, тобто подвійні бронювання, протерміновані сертифікати й пропущені дедлайни документів.
Worker
- DashboardQuick Actions · Upcoming Shifts · Announcements · Doc Reminders
- ShiftsPersonal Calendar · Shift Detail · Training Events
- Absence ManagementReport Form · Doc Upload · Extension Form · History
- CertificationsActive Certs · Expiry Reminders
- DocumentsDocument List · Upload
- ProfilePersonal Info · Contacts · Notifications
Provider
- DashboardAlerts · Stats · Activity
- Employee MatrixMonthly View · Client Groups · Cell Detail · Navigation
- Employee DetailsProfile · Calendar · Certifications · Documents
- Shift AssignmentCalendar by Client · Assignment Panel · Filters
- Training ManagementCatalog · Create Training · Worker Assignment · Status
- Absence ConsoleOverview · Approve/Deny · Doc Status · Reporting
- SettingsOrg · Notifications · Doc Rules
Дизайн-система
Погодив з розробниками дизайн систему ще до старту макетів, тому розробка пішла паралельно з дизайном, а не після нього.
Клієнт хотів кодову базу на Tailwind-сумісному фреймворку, тож дизайн-система у Figma мала віддзеркалювати, як Tailwind реально працює, а TailGrids дав обом сторонам ті самі блоки.
Це означає без довільних значень, без разових відступів і без кольору, що не мапиться на токен. Розробники читали Figma-екран і одразу знали, які класи брати, тому хендоф перестав бути перекладом з макета в компоненти.
Роль Provider
Менеджер із 50+ працівниками у 5 клієнтів має бачити проблеми відразу, не перемикаючись між працівниками
Центральним екраном стала матриця працівників: усі люди, згруповані по клієнтах, з кольоровим статусом на кожен день місяця.
Найскладніша логіка сиділа у призначенні змін: матчинг кваліфікацій, захист від подвійного бронювання і видимість, чому конкретного працівника не можна призначити. Помилка тут дає реальні комплаєнс-проблеми, тож інтерфейс мав робити правильну дію очевидною, а неправильну важкою.
Роль Worker
Робітник має знати розпорядок дня на сьогодні, і повідомити, коли щось пішло не так.
Найбільш процесна частина це репортинг відсутності, і він тягне за собою реальні комплаєнс-наслідки.
48-годинний таймер на завантаження медичних документів лишається видимим і постійним, щоб його неможливо було пропустити, терміновий, але не тривожний. Решта потреб вужчі: побачити графік, керувати документами, тримати профіль в порядку.
Чого вимагав проєкт
Робота із невизначеністю означає ухвалювати продуктові рішення, а не лише дизайнерські.
Результатом був не набір гарних екранів, а цілісний, внутрішньо консистентний дизайн, з якого інженерна команда може будувати.
