Ок, давайте лайтовий пост, щоб закінчити цей день.

Признаюсь вам у може найбільшій UX брехні в моєму житті.

Пам'ятаєте прогрес в Reface апці, поки генерився результат? Так от, він майже нічого не означав. У перших версіях все трималося на чесному слові й божій помочі. Клієнт взагалі не знав, коли сервер поверне результат. Іноді це було 8 секунд, іноді 30. Показувати просто спінер теж не хотілося. Після 10 секунд користувач міг вирішити, що апка зависла. Але й показувати "справжній" лінійний прогрес було неможливо.

Тому ми зробили прогресбар, який математично красиво сповільнювався ближче до кінця і... ніколи не доходив до 100% поки сервер не поверне результат. А щоб користувач остаточно не втратив надію, над прогресом ще й змінювалися підписи. В нас навіть внутрішній мем є в компанії “taking longer then usual…”.

Прогресбар показував не прогрес. Він показував НАДІЮ.

І тепер питання.
Це хороший UX чи маніпуляція?

Сьогодні планую більше розповісти про BitePal. Як ми робили анти-трекер калорій, а в результаті все одно зробили трекер калорій.

Ми хотіли зробити застосунок про харчування, але головною ідеєю був не підрахунок калорій. Ми хотіли, щоб людині просто хотілося їсти краще. Тому схрестили дві окремі ідеї, які до цього тестили в рекламі: AI, який аналізував фото їжі, і тамагочі.

Користувач фотографував їжу. Маскот її "їв", коментував, що йому сподобалося, давав оцінку й нагороджував за хороші харчові звички (збалансовану тарілку, достатньо протеїну, клітковини, корисних жирів і тд). Можна було взагалі не логувати все, що ти їсиш. Навпаки, інтерфейс стимулював фотографувати саме ту їжу, за яку маскот тебе хвалив.

Ми свідомо не хотіли показувати калорії. Навіть в якісь рекламі чи скрінах писали що це трекер їжі без калорій. Як же ми помилялись.

Після посту про перший BitePal в коментах спитали, чи була тоді дизайн система. Якщо чесно, ні. Був радше дизайн-кіт: шрифти, кольори, кнопки, іконки та базові компоненти. Ми взагалі не були дуже послідовними, й одні й ті самі UX рішення могли виглядати по-різному.

У стартапі завжди доводиться вибирати, куди інвестувати час. На ранньому етапі ми інвестували його в продукт, а не в дизайн систему. Якщо продукт закриється через пів року, ідеальна дизайн система вже не дуже допоможе. Вона важлива, але не вона робить продукт успішним.

Є навіть жарт: спочатку дизайн систему не роблять, бо ще рано, потім бо вже запізно *ми зараз тут*

Але це не означає, що можна забити на візуальний стиль взагалі. Тут дуже хочеться згадати Кирила, який заклав основу першого BitePal. Його рішення досі живуть у продукті: вайбовий акцидентний шрифт, сквадрачені заокруглення, великі кнопки й, мої улюблені, прості іконки, в яких неймовірна увага до деталей.

Дизайн системи тоді ще не було. Але характер у продукту був. Кирило, дякую!

BitePal 1.0 реально сподобався людям (в коментарях до першого сьогоднішнього посту є живі підтвердження, і я нікому не платив).

Користувачі повертались, годували єнота, писали, що він мотивує їсти більше овочів, все супер. Але була одна маленька проблема. Майже ніхто не хотів за це платити.

Панчлайн цього посту: продукт, який люди люблять, і продукт, за який вони готові заплатити — це не завжди одне й те ж.

Наш онбординг продавав ідею "ти почнеш харчуватися краще". Інші трекери продавали обіцянку “ти схуднеш”. І ця обіцянка була знааааачно сильнішою. І саме підрахунок калорій дозволяв їм це робити.

Тоді ми зробити те, чого спочатку я дуже не хотів — додали калорії. Але боялися зламати те, за що нас уже любили і перший час це було буквально два продукти в одному.

На головному екрані з'явився тогл який перемикав режими: або калорії, або наша стара оцінка їжі. І за замовчуванням усе ще були саме оцінки.

Здавалося, що це елегантний компроміс.

BitePal 2.0

В результаті калорії перемогли. Не в інтерфейсі, а в бізнесі. Коли ми почали обіцяти на онбордингу не просто "стань краще харчуватись", а схуднути до літа, результати сильно покращились. Люди одразу розуміли цінність і охочіше платили.

Але калорії повністю зламали продукт.

Раніше єнот мотивував фотографувати хорошу їжу: збалансовану тарілку, овочі, білок. Користувач відкривав застосунок за похвалою від єнотіка. Але тепер щоб порахувати калорії за день, треба було логувати все: салат, круасан, шоколадку, нічний набіг на холодильник. І тут єнот із мотиватора перетворився на моралізатора. І наказував користувача за те що той чесно логує все що їсть.

Але сталося дещо цікаве. Виявилося, що є люди яким не хочеться зважувати всі продукти і шукати їх в базі щоб дізнатись калорії. Їм було ок отримати відносно точну оцінку калорій по фото.

Тоді ми зрозуміли, що будуємо не найточніший, а найказуальніший трекер калорій. Для людей, які ненавидять класичні трекери калорій. Ще й з єнотом!

Вас, мабуть, дістали вже розмови про AI. Тому сьогодні теж трохи про AI.

Але почну здалеку. В першому BitePal була одна дизайнерська ідея, яку я відстоював з піною в роті. Добре, що тоді всі були сильно зайняті пошуком product market fit і не мали сил зі мною сперечатись.

Я дуже хотів зробити маску камери для фотографування їжі круглою.

Це було менш практично. Повноекранна камера очевидно зручніша. Але мені хотілося, щоб інтерфейс підказував що фотографувати треба саме тарілку. І щоб ця форма потім жила в інших елементах інтерфейсу.

Так і сталося. Частину рішень я дизайнив одразу, а частина народилася вже значно пізніше.

Наприклад, у щотижневому звіті зверху сипляться всі залоговані страви. Якби фотки їжі були звичайними прямокутними фотографіями, ми б не придумали цю анімацію.

І ось що цікаво. Якщо б я попросив AI намалювати екран камери для логування їжі, він майже напевно зробив би її на весь екран. І був би правий. Але тоді в BitePal, скоріш за все, не з'явилася б ще одна маленька візуальна фішка.

Рубрика АІ-філософія від Марка Іванюка (моє альтер его)

Якщо я попрошу Claude оцінити домашній екран BitePal, майже впевнений, що він розкритикує його вщент: головний пріоритет відданий декоративному елементу; щоб побачити залоговану їжу треба скролити; інформаційна щільність низька і взагалі для трекера калорій це дивний дизайн.

Але проблема в тому, що BitePal не просто апка суми калорій за день. Люди відкривають її не лише щоб подивитися цифри макросів і калорії авокадо тоста. Вони ще відкривають її заради єнота. Те, що виглядає як погано спроектований інтерфейс, насправді є частиною причини, чому продукт люблять.

AI дуже добре оптимізовує. Він слідує всім евристикам, UX принципам і здоровому глузду. Але якщо оптимізувати BitePal до кінця, можна отримати дуже правильний трекер калорій. Просто без єнота і круглої камери.

Здається, що роль інтерфейсного дизайнера поступово змінюється. Не знати всі бест пректіси (АІ знає вже краще вас). А зрозуміти, коли одне з цих правил варто свідомо порушити.

Раз вже вечер п'ятниці, ось вам мій хот тейк.

Зараз найкращий кандидат на позицію джун UI/UX дизайнер — це графічний дизайнер.

Хір мі аут. Коли я починав працювати графічним дизайнером, перше що робив після того, як намалював логотип — відкривав пошук по картинках і дивився, чи немає вже десь схожого. Якщо знаходив, матюкався і йшов думати далі.

Пізніше, коли я став інтерфейсним дизайнером, перше питання майже завжди було: "чи це best practice?". І тільки потім — наскільки воно красиве чи унікальне. Треба було прочитати всі статті на Nielsen Norman Group і навчитися не вигадувати велосипед.

І поки інтерфейсний дизайнер вчив правила, графічний дизайнер тренував трохи інший м'яз. Як знайти рішення, яке буде естетичним, матиме власний характер і відчуватиметься живим.

Тому коли AI вже знає всі best practices і з легкістю спроектує вам хороший прототип, можливо, саме зараз найкращий час для графічних дизайнерів освоювати інтерфейси. Бо вони все життя тренувалися шукати не правильне рішення, а цікаве.

Поки ви відпочиваєте, я вам трохи відео контєнту приніс. Про клод, чуйку і помідори.

В мене з досвідом з'являється дивна професійна чуйка. І коли хтось показує дизайн, чи Claude пропонує рішення, я часто ще не знаю, як зробити краще, але майже одразу відчуваю, що щось тут не те. І саме тут AI дуже помічний. Я можу дуже приблизно описати, що мені муляє, а Claude пропонує спосіб це виправити.

Вчора трохи умнічав про AI, тому пора показати, як я сам ним користуюсь на прикладі реальної задачі. Саша Трегуб сказав, що відеоформат людям дуже заходить. Перевіримо.

На відео покажу, як з Claude шукаю інтерфейс для редагування ваги помідора. Які питання я задаю, як ітерую і як у процесі знаходжу цікаве рішення, яке Claude сам навряд чи запропонував би.

Loom в мене безкоштовний, тому замість одного відео серія з трьох частин:

01 - Задача
02 - Рішення
03 - Результат

Після вчорашніх відео в коментах було цікаве питання.

— Чому інші трекери калорій не придумали такий самий контрол для редагування ваги?
— Тому що вони вирішували іншу задачу.

У класичних трекерах людина зазвичай вже знає вагу їжі. Їй треба швидко ввести 110г. Тому фокус одразу на інпуті і відкрита клавіатура абсолютно логічне рішення.

У BitePal ми з самого початку будували основний сценарій навколо фотографування їжі. Швидше за все користувач не знає точну вагу. Але може він хоче підправити те, що неправильно оцінив AI.

Тому й з'явився барабан, який можна просто покрутити вліво-вправо. А якщо комусь все ж потрібні точні 110 г, їх теж можна ввести вручну, тицьнувши на цифру. Просто цей сценарій для нас був другорядним і як наслідок він менш зручний в інтерфейсі.

Що цей UX редагування грамів, що кругла камера це наслідок одного рішення, яке ми прийняли ще на самому початку: фотографування їжі замість пошуку продуктів в базі. Решта інтерфейсних рішень просто логічно випливали з цього.

Дякую що коментуєте.

16 разів за цей тиждень у каналі прозвучало слово «єнот». І, здається, ми вже маємо рефлекс, бачиш 🦝 — одразу заходиш у чат читати, що сталося.

Марко, щиро дякуємо тобі за цей тиждень. З тобою було цікаво, дуже корисно, а відео вже збережені для повторного перегляду.
І окреме дякуємо за твій погляд на AI. Здається, навіть ті, хто ставився до цього скептично, після цього тижня подивилися на власні можливості й майбутнє трохи інакше крізь твою призму.

Обіймаємо й сподіваємося ще не раз побачитися! 💙

Дякую всім за реакції, коментарі й питання. Окрім того, що мені було дуже приємно, саме через ваші коментарі народилася добра половина постів. Я не мав якогось чіткого плану, тому багато думок з'являлися вже в процесі наших обговорень.

Якщо колись матимете питання про дизайн, продукти чи просто захочете щось обговорити пишіть у telegram. Я завжди відповідаю.

Дякую ще раз. Було дуже кайфово. ❤️

Маємо новину, цього тижня до каналу growth lab.prjctr доєднується перший куратор і ми запрошуємо вас поспілкуватися.

Зовісім скоро запросимо кураторку тижня для цього каналу, а поки кілька курсів, які можуть вас зацікавити:

Mobile Apps Design або Mobile Interfaces Advanced — обидва курси про дизайн мобільних застосунків, але для різного рівня досвіду. Перший більше підійде тим, хто лише починає свій шлях у вебдизайні, а другий — дизайнерам, які вже працювали з мобільними інтерфейсами й хочуть підняти цей скіл.

UI/UX Design Beginning

— для тих, хто давно хотів нарешті почати. Курс побудований на основі очікувань 12 реальних роботодавців від джуніор-дизайнерів. А найкращих студентів куратори рекомендують до внутрішньої рекрутингової системи League Design Agency.

Інтенсив

Prompt Engineering and Vibe Coding

— від структурованих промптів і reasoning frameworks до AI-воркфлоу, який допомагає вирішувати повсякденні задачі.

Продж 🫂

Вітаємо кураторку цього тижня на каналі! Вам точно буде цікаво поспілкуватися.

Віка Гладинець — Principal Product Designer у PDF Expert by Readdle.

Створює продукти з нуля та проводить справжні тектонічні зсуви в уже існуючих. Її сильні сторони — problem-solving, інженерне мислення, елегантні рішення та вміння робити складне зрозумілим, а процес роботи — комфортним для всіх.

У позаробочий час менторить і коучить досвідчених дизайнерів у їхньому професійному розвитку. Каже, що всі її менті, які шукали роботу, отримують омріяні офери вже за 2–3 місяці.

Захоплюється адекватним well-being: спортом, гастрономією, здоров'ям, б'юті та пивом.

Віко, канал уже твій, тож можеш починати! 🤓

Гайз, перш за все: неймовірно рада стати войсом цього часу на тиждень! Я пишу рідко і обережно, бо схильна до гострих думок, які породжують дебати.

До речі, свою карʼєру в айті я стартанула в 2015 році в той самий день, коли подала документи на системний аналіз в кпі. Пройшла співбесіду і стала ремоут копірайтеркою в Tripmydream.

Забирати чат після потужного комбо Марка і єнота хвилююче, але захопливо. Скоріш за все, більшість мене не знають, а я і рада вас дивувати, тому хотілось би про регалії сказати в останні дні знайомства — в пʼятницю я запропоную варіанти спешл теми на розсуд аудиторії.

Перш за все, я приємна людина, яка живе чудове життя. Хіба не цього ми хотіли коли йшли в айтішку? Яскравий світогляд, самовираженість, ерудованість, тверезість і гроші. Побічним ефектом йде багато роботи, дуже багато😅

За 11 років комерційного досвіду я багато осягнула і ще більше маю до подальшого споглядання. Тому хочу цього тижня ділитись з вами своїм баченням буття дизайнера

Поговорим про:
• якими рудиментами обросла сфера дизайну і в чому криється цінність дизайнера;
• чому сакральний ✨крафт✨лежить в приколі;
• скілсет дизайнера — про канібалізацію скілів і навіщо нам життєво необхідні навички поза стандартним юай юекс
• спешл тема на вибір шановної аудиторії — coming в суботу
• мій підхід в роботі: пошук Perceived value і доданої вартості в кожній задачі
• де ховається пубертатний спеціаліст і чим він заважає всім навколо
• мої улюблені роздуми — чому сентимент важливий і монетизується, але на нього не звертають увагу більшість укр дизайнерів

Все це приправлятиму розсудливими і не дуже думками, кумедними ситуаціями з менторства та, найголовніше, своїми пасіями і світоглядом

Також радо хочу зібрати київських дизайнерів на бранч в суботу, stay tuned💫

Поки я перемикаюсь на back to back роботу і відкриваю портал в коментарях з будь-якими питаннями, пропозиціями і знайомствами🌝