Огляд
Hortai - це booktech-стартап, створений для українського книжкового ринку, що зростає. Ми створюємо трекер читання, що дає людям повний контроль над тим, наскільки соціальним і відкритим є їхній досвід читання - від цілком приватного до спільнотного.
Я приєднався як провідний продуктовий дизайнер, відповідальний за стратегію продуктового дизайну, архітектуру дизайн-системи й менторство джуніор-дизайнерки на її першій продуктовій ролі. Це також мій перший досвід лідерства в дизайні й менторства - який став однією з найцінніших для мене частин проєкту.
Команда: 7 осіб - провідний продуктовий дизайнер, продуктова дизайнерка (менті), продуктовий менеджер, 3 фронтенд-розробники, бекенд-розробник, DevOps
Моя роль: дизайн-лідерство, стратегія продуктового дизайну, UX/UI-дизайн, архітектура дизайн-системи, менторство
Статус: фінансування за грантом
Проблема
Український книжковий ринок зростає, але доступні читачам інструменти за ним не встигають. Домінантний місцевий трекер читання покриває базові потреби - але страждає від поганого UX і хисткого, ненадійного технічного фундаменту. Крім того, досвід відчувається обмеженим, особливо щодо соціальних функцій і персоналізації. Читачі хочуть відстежувати прочитане, ділитися вибірково й відчувати власність над своїми даними про читання - але наявні продукти нав’язують підхід «усе або нічого» до приватності й соціального обміну.
Стратегія
Дослідження
Ми поєднали якісні інтерв’ю зі справжніми читачами, систематичний аналіз відгуків про застосунок конкурента в магазинах застосунків і симульовані фокус-групи за допомогою Gemini Deep Research, щоб масштабно перевірити наші припущення на міцність.
Найбільше відкриття стосувалося не функцій - а ідентичності. Люди ставляться до книжок як до глибоко особистих об’єктів. Їхній список читання - не просто список, а відображення того, ким вони є. Одні читачі люблять хизуватися своєю колекцією й обговорювати її публічно. Інші ставляться до своєї книжкової полиці як до чогось дуже приватного, майже інтимного. А більшість людей десь посередині - хочуть ділитися деякими речами з деякими людьми, але не всім із усіма.
Цей інсайт переформував увесь продукт. Саме тому приватність - це не сторінка налаштувань, яку ви відвідуєте раз, а система, вплетена в кожну функцію, що дає користувачам контроль на кожному шарі. Упевненість будувати такий рівень гнучкості прийшла безпосередньо з розуміння того, наскільки емоційно зарядженим є зв’язок між читачем і його бібліотекою.
Ключові дизайн-рішення
Приватність як спектр, а не вимикач
Основне напруження продукту - бути соціальним, але приватним - потребувало більшого, ніж єдиний перемикач. Ми спроєктували гнучку систему конфіденційності, де користувачі незалежно контролюють видимість кожного шару: бібліотеки й статусів читання, колекцій, прогресу читання, публікацій і присутності онлайн. Є також повний режим невидимості для анонімного читання. Мета: дати людям бути рівно настільки відкритими, наскільки їм комфортно, не нав’язуючи бінарного вибору.
Сесії читання з контекстом
Таймер читання - це не просто секундомір. Під час сесії читачі можуть прикріплювати нотатки, прив’язані до конкретних сторінок чи діапазонів сторінок, позначати їх емодзі-реакціями й вибудовувати особистий журнал своєї читацької подорожі. Ця система пройшла кілька ітерацій - взаємодія між таймером, відстеженням сторінок і нотатками мала відчуватися безшовно, не стаючи захаращеною. Результат - потік, де занотовувати думки під час читання відчувається природно, а не як рутина.
Пакетний ISBN-сканер для миттєвого наповнення бібліотеки
Одна з найбільших точок тертя для будь-якого трекера читання - початкове налаштування, тобто перенесення наявної бібліотеки в застосунок. Ми спроєктували сканер штрихкодів із пакетним режимом: користувачі можуть сканувати книжку за книжкою, не виходячи з екрана сканера, накопичуючи чергу відсканованих назв, а тоді переносити все до бібліотеки за раз. Без перерв, без повторюваних потоків. Це випливало з розуміння, що наша аудиторія читає паперові книжки - і якщо завантаження колекції відчувається як рутина, люди цього не робитимуть.
Профіль як читацька ідентичність
Профіль користувача збирає все докупи: колекції, активність читання з часовою статистикою, поточні книжки з прогресом і опубліковані рецензії. Він задуманий працювати і як особистий дашборд, і як публічна читацька ідентичність - залежно від того, як користувач налаштує свою приватність.
Процес та інструменти
Візуальна мова
Дві палітри бренду - не лише естетика, а й стратегія. Читачі - неймовірно широкий спектр людей, і візуальна мова мала це відображати.
Paradiso (бірюзовий) несе спокійний, інтимний бік продукту - перегляд бібліотеки, сесії читання, профіль. Вона задає тон, що каже: це твій тихий простір. Lemongrass (жовто-зелений) з’являється там, де енергія змінюється - статистика, челенджі, рейтинги. Вона гостріша, конкурентніша, грайливіша. Дві палітри співіснують, щоб застосунок міг водночас відчуватися як особистий читацький закуток і соціальна арена - залежно від того, де користувач і за чим прийшов.
Робочий процес, підсилений ШІ
Ми сильно покладаємося на ШІ-інструменти, але з чіткою межею. ШІ прискорює виконання - він не замінює мислення.
Gemini Deep Research проводить симульовані фокус-групи, щоб масштабно перевіряти припущення на міцність. Figma Make і Cursor дають змогу швидко будувати інтерактивні прототипи, тож ми можемо валідувати UX до того, як вкладатися у відполіровані екрани. Claude через MCP пише документацію й автоматизує повторювані дизайнерські завдання - ту роботу, де ви багато разів застосовуєте відомий патерн.
Де ШІ не допомагає: вигадувати UX нового екрана. Це й досі людська інтуїція, скетчинг та ітерування крізь прототипи, доки потік не «клацне». Інструменти беруть обсяг; мислення лишається нашим.
Дизайн-система
Дизайн-система побудована на дворівневій архітектурі токенів:
Примітиви - шар сирих значень. Сюди входить повна палітра кольорів поряд із двома кастомними шкалами бренду: Paradiso (основна на базі бірюзи) і Lemongrass (вторинна жовто-зелена). Це чисті значення без прив’язаного семантичного сенсу.
Аліаси - семантичний шар. Кожен токен названо за призначенням, а не за виглядом: bg-page, text-neutral-primary, border-action-focus, bg-status-error. Цей шар посилається на примітиви, тож зміна теми означає перепризначення аліасів без жодного дотику до компонентів.
Система також містить кольорово-кодовані категорії для статистики читання (сторінки, час, цілі, серії - кожна зі своїми токенами рамки, фону, іконки й тексту) і систему іменованих палітр (truffle, peach, matcha, blueberry, strawberry, grape) із варіантами subtle, core, vibrant і deep для гнучкого вираження UI.
Ця архітектура була свідомою інвестицією. Вона окуповується трьома способами: узгодженість на кожному екрані, швидкі й надійні передачі розробникам і - не менш важливо - вона стала головним навчальним каркасом для моєї менті, навчаючи її мислити системами, а не окремими екранами.
Aliases
Resolution
- Alias
- --bg-page
- Primitive
- --neutral-75
- Value
- #f8f8f8
Передача роботи та комунікація команди
З трьома фронтенд-розробниками, одним бекенд-розробником і дизайн-командою з двох осіб чітка комунікація була не розкішшю - а виживанням. Ми збудували всю культуру передачі з нуля:
Передачі дизайну відбуваються під час загальнокомандних зустрічей, де кожен може поставити питання й висловити занепокоєння. Після цього - окремий дзвінок віч-на-віч із розробником, який реалізує конкретну функцію, а далі - постійна асинхронна комунікація в робочих чатах. Цей шаруватий підхід - спершу груповий контекст, потім індивідуальні деталі, асинхронна підтримка постійно - усунув неоднозначність, яка зазвичай уповільнює малі команди.
Менторство
Це був мій перший досвід лідерства в дизайні й менторства іншого дизайнера. Я свідомо підійшов до того, як ми розподілили роботу:
Мій фокус: дизайн-стратегія, архітектура дизайн-системи, комунікація зі стейкхолдерами й безпосередній дизайн екранів, коли дозволяв ресурс.
Її фокус: побудова екранів і компонентів у стратегічному напрямку, який я задавав, зростання майстерності в токенізованих дизайн-системах і технічно коректній побудові компонентів.
Спершу найважче було довіритися процесу - сумніватися, чи роблю я достатньо як лід. Поворотний момент настав, коли я побачив, як менті самостійно збирає піксель-в-піксель компоненти й видає готові до передачі потоки, до яких я майже не мав зауважень. Тоді я зрозумів, що система працює.
Інше досягнення, яким я пишаюся: ми збудували культуру справжньої довіри в команді. Дизайн-рішення обговорюються відкрито, зворотний зв’язок тече в обидва боки, і немає тривоги навколо ітерування. Для стартапу, що швидко рухається, ця культура - множник.
Що далі
Кожна функція спроєктована із запланованим шляхом еволюції - що ми розширюємо, що спрощуємо, а що відрізаємо, визначає реальне використання, а не припущення.
Рефлексія
Найбільше, чого я навчився тут: лідерство в дизайні - це не про те, щоб дизайнити більше, а про створення умов, у яких добрий дизайн стається без вашої присутності в кімнаті. Цей перехід - від творця до того, хто уможливлює - цілком змінив те, як я думаю про свою роль.