Назад до робіт

Продуктовий дизайн · Концепт · 2026

Zest

Записувати їжу кидають через зусилля й через оцінки. Zest бере зусилля на себе, а оцінки прибирає.

Роль
Продуктовий і UI-дизайн
Платформа
iOS-застосунок, 390×844
Обсяг
10 основних екранів, 11 екранів крайніх випадків, дизайн-система
Статус
Концепт, спроєктований у Figma, з інтерактивним прототипом
Вітальний екран Zest на iPhone у руках: “Point your camera at a plate.”

Проблема

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

У брифі було дві історії користувача. Обидві впираються в ті самі зусилля.

«Скільки калорій у цій страві чи продукті?»
Зараз відповідь вимагає пошуку, оцінки порції на око й трохи арифметики — для кожної позиції на тарілці.
«Знайди мені рецепт, який мені підходить».
Більшість добірок рецептів не враховує, що людина вже з’їла, тож «підходить» перетворюється на вгадування.

Гіпотеза

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

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

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

Від фото до запису

Ключовий сценарій

Увесь сценарій — одне фото й один дотик. Людина наводить камеру на тарілку й вписує страву в кільце. Zest називає, що бачить, а потім оцінює кожну порцію. У результаті видно калорії, макроелементи й те, що ця страва означає для дня.

  • Оцінки позначені «≈». Zest пише «≈ 60 г», а не «60 г», щоб ніхто не сприйняв припущення за вимірювання.
  • Усе можна змінити. Кожен розпізнаний рядок відкривається дотиком, а порцію можна змінити до або після збереження.
  • Без дотику нічого не записується. Фраза “Nothing is added to your day until you confirm it” (нічого не додається до дня, доки ви не підтвердите) стоїть одразу під списком розпізнаного.
  • Контекст, а не оцінка. Результат каже “Breakfast is 41 % of today’s fat, 33 g of 80 g” (сніданок — 41 % денного жиру, 33 г із 80 г) і показує, де зараз день, без позначок «добре» чи «погано».
Екран Capture: камера з кільцем навколо тарілки й режими Photo, Barcode і Type it
Capture · страва в кільці
Екран аналізу: розпізнані позиції з орієнтовною вагою, одна позиція ще оцінюється
Аналіз · спершу назви, потім порції
Екран результату: тост з авокадо та яйця всмятку, 516 ккал, макроелементи й кнопка Add to my day
Результат · додати одним дотиком
Екран Today: смуга тижня, лишилося 1 056 ккал, макроелементи, остання страва й вечері, що підходять
Today · скільки лишилося

Роль ШІ

Він бере на себе рутину

ШІ називає, що на тарілці, оцінює кожну порцію, рахує все відносно сьогоднішніх цілей і пропонує, що підійде далі. Контроль лишається за людиною.

Коли ШІ не впевнений, він так і каже. Якщо дві страви згори схожі, Zest питає “Is it one of these?” (це одна з цих?) і показує, наскільки впевнений: паста з песто — 82 %, паста з кабачком — 58 %. Людина вибирає одну або вводить назву сама.

Ask Zest

Вкладка Zest — це чат про їжу, який уже знає, як минає день. На “Can I still have pasta tonight?” (чи можна мені ще пасту ввечері?) він спершу відповідає фактом — “Yes, it fits your calories” (так, у калорії вкладається), — показує бюджет із доданою пастою і чесно називає компроміс: вуглеводів буде на 21 г більше за 260. Далі пропонує варіанти: запланувати пасту на вечерю, взяти пів порції або щось легше.

Неоднозначне розпізнавання: Is it one of these? Паста з песто — впевненість 82 %, паста з кабачком — 58 %
Невпевненість · 82 % і 58 %
Чат Ask Zest: Can I still have pasta tonight? Yes, it fits your calories — з карткою бюджету й пропозиціями
Ask Zest · спершу факти, потім варіанти

Рецепти під те, що лишилося

Рецепти й сторінка рецепта

Екран Recipes відкривається добіркою “Dinners that fit what is left” (вечері під те, що лишилося): у запасі 540 ккал і 24 г білка, і кожен рецепт вкладається в обидві цілі. На кожній картці написано, скільки лишиться в запасі, наприклад “Leaves 60 kcal spare”, тож список упорядкований за днем, а не за популярністю.

Сторінка рецепта простими рядками пояснює “why this fits you” (чому це вам підходить): страва дає 480 ккал, на 60 менше, ніж лишилося; 38 г білка покривають 24 г, яких ще бракує. Вона називає й компроміс: жиру буде на 5 г більше за 80 г, а 100 г лосося замість 140 г утримають його в межах.

Екран Recipes: вечері під те, що лишилося, з фільтрами й картками, де видно калорії, білок і запас ккал
Recipes · порядок за днем
Сторінка рецепта: лосось місо із зеленню, 480 ккал, блок why this fits you, макроелементи й інгредієнти
Сторінка рецепта · чому підходить

Без оцінок

Коли день виходить за план

Саме на перевищенні плану більшість людей кидає, тож тут тон важить найбільше. Коли день виходить за ціль, Today каже “Here’s where today landed” (ось чим завершився день): на 120 ккал більше за 2 400, на 5 % понад план. Примітка: “Dinner went 120 kcal past plan, 5 %. Tomorrow starts fresh at 2,400.” (вечеря вийшла на 120 ккал понад план, 5 %; завтра все з нуля — 2 400). Жодного червоного попередження, жодного «не впоралися».

Екран History працює так само. Календар показує смужку для кожного дня, її довжина — частка від 2 400 ккал, а маленький «+» позначає день, що вийшов за план. Він фіксує, що сталося, і не дає оцінок.

Денну ціль перевищено: Here's where today landed, на 120 ккал більше за 2 400, завтра все з нуля
Понад план · факт, а не провал
Екран History: календар вересня зі смужками для кожного дня, плюсом для днів понад план і підсумком дня
History · смужки й тихий «+»

Поза ідеальним сценарієм

Коли застосунком користуються в неочікуваних умовах, Zest тримається тих самих правил: спершу факт, без оцінок, один зрозумілий наступний крок.

Їжу не знайдено: I can't find a plate here, з варіантами Retake the photo і Type it instead
Їжу не знайдено · перезняти або ввести
Неоднозначне розпізнавання: два варіанти з рівнем впевненості
Неоднозначна страва · вибрати одну з двох
Зображення надто темне: увімкніть спалах або підійдіть ближче до світла
Надто темно · як виправити світло
Спалах увімкнено, тарілка в кадрі
Спалах увімкнено · тарілку знову видно
Немає з’єднання: фото збережено й поставлено в чергу, його розпізнають, щойно з’явиться мережа
Немає інтернету · фото збережено в черзі
Штрихкод не знайдено: його ще немає в базі, сфотографуйте таблицю поживної цінності
Штрихкод не знайдено · прочитати етикетку
Камера для етикетки: вмістіть усю таблицю поживної цінності в рамку
Камера для етикетки · значення на 100 г
Денну ціль перевищено: на 120 ккал більше за 2 400
Понад ціль · завтра все з нуля
Порожній стан першого дня: ваш перший день починається зараз, у запасі 2 400 ккал
Перший день · порожньо, але не пусто
Виправлення оцінки: тост на заквасному хлібі, змініть 60 г, якщо скибка була більша чи менша
Виправлення · змінити один рядок
Доступ до камери вимкнено: увімкніть камеру або введіть страву вручну
Камера вимкнена · інший шлях

Дизайн-система

Токени, компоненти, стани

Кожен екран зібраний із компонентів, а кожен колір, розмір, відступ, радіус, обведення, розмиття й налаштування шрифту беруться зі змінних. Токени розкладені на три колекції: Primitives містять сирі значення й приховані; Zest · Natural надає їм сенсу (ground, bloom, ink, action, macro, surface, space, radius тощо); Typography містить гарнітуру, накреслення, розміри, інтерліньяж і трекінг.

Інтерактивні компоненти мають стани як варіанти: звичайний, натиснутий і неактивний, а також вибраний чи завантаження там, де вони потрібні. Вони налаштовані як інтерактивні компоненти, тож прототип натискається й перемикається, як справжній застосунок.

Деякі стани втілюють правила продукту. Картка бюджету має чотири стани — від порожнього дня до дня понад план, — і перевищення показане як “+120 kcal over” у тому самому спокійному стилі. Об’єктив камери теж має чотири стани: кадрування, розпізнавання, невпевненість і мало світла.

Компонент картки бюджету в чотирьох станах: порожній, до, після й понад план
Картка бюджету · порожньо, до, після, понад план
Компонент об’єктива в чотирьох станах: кадрування, розпізнавання, невпевненість і мало світла
Об’єктив · кадрування, розпізнавання, невпевненість, мало світла

Як це вимірювали б

Цілі, а не результати

Zest не запущено, тож жодних цифр для звіту немає. Це метрики, за якими оцінювали б продукт.

Головна метрика
Частка прийомів їжі людини, записаних за активний день, на 4-му тижні.
Допоміжні
Медіанний час від відкриття камери до підтвердженого запису. Кількість виправлень на один записаний прийом їжі — вона має зменшуватися, поки Zest вчиться оцінювати порції. Чи записують люди їжу в дні після перевищення бюджету. Кількість запланованих рецептів на тиждень.

Що я перевірила б далі

Дизайн ще не тестували з користувачами. Перші перевірки, які я провела б, прямо стосуються гіпотези:

  • Чи справді одне фото швидше? Заміряти, скільки часу люди витрачають на запис тих самих страв через фото і через ручний пошук, і порахувати, як часто їм доводиться виправляти оцінку.
  • Чи допомагає відмова від оцінок не кидати записи? Показати день понад план із червоним «не впоралися» і без нього та спитати, чи записали б вони наступну страву.
  • Чи змінюють вибір пояснення «чому підходить»? Попросити людей вибрати вечерю з упорядкованого списку з поясненнями і без них і подивитися, чи вибирають вони швидше й чи лишаються при своєму виборі.

Сподобався проєкт?

Створімо продукт, яким люди користуватимуться й далі.

Наступний проєктGlobal Print NordІнтернет-магазин друкарні