Napa: трекер звичок на інтервальному повторенні

Моя роль

Продуктова дизайнерка

Тривалість

Двотижневий спринт

Платформа

iOS і Android

Огляд

Napa — мобільний застосунок, побудований на інтервальному повторенні: методі навчання, який ставить повтори через оптимальні проміжки часу, щоб запам’ятовувати більше меншими зусиллями.

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

Проблема

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

1. Навігація ховалась усередині профілю. Категорії, усі loops, підписка, промокоди — усе лежало там. Вкладка «Профіль» робила роботу чотирьох різних розділів, і жодного з них добре.
2. На головному екрані не було мотиваційного шару. Плаский список карток за датою, без відчуття прогресу чи руху.
3. У вайрфреймах були відчутні прогалини. Не було бібліотеки — місця, де людина керує всіма своїми loops і категоріями поза сьогоднішнім розкладом. Не було онбордингу. Флоу підписки був чорновою референсною начеркою, а не справжнім дизайном.

Результат

Клієнт отримав готовий до продакшену дизайн, який покрив кожен екран, стан і крайній випадок:

• 23 розділи на повний обсяг застосунку: авторизація, онбординг, головний екран, бібліотека, створення, деталі loop, профіль (2 стани), флоу підписки, сповіщення
• Щоденна петля звички отримала мотиваційний шар
• Онбординг пояснює цінність продукту за 4 екрани
• Бібліотека дає людині контроль над її вмістом
• Візуальна система цілісна, впізнавана і масштабована
• Повний UI-кіт під дві платформи (iOS + Android)
• Логотип та іконка застосунку
• Усі крайні випадки спроєктовані й задокументовані

Процес

Discovery та інформаційна архітектура

Розібрала 40 девелоперських вайрфреймів, знайшла зламану навігацію і структурні прогалини, перебудувала інформаційну архітектуру з нуля.

Мапа сайту

Це одне рішення про перебудову зачепило всі інші частини дизайну. Воно ж зробило осмисленою нижню навігацію.

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

Мудборд і візуальний напрям

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

Обрали концепцію 4 — світло-блакитну, чисту, типографічну.

Онбординг

Кожен екран вводить рівно одне поняття. Чотири екрани, які пояснюють інтервальне повторення мовою самого продукту, без жаргону.

Віджет стріку

Лічильник днів поспіль, маленький календар зі станами «виконано», «пропущено» і «порожньо», картка підсумку дня.

Головний екран

Версія розробника: список карток за датою. Робочий, але плаский.

Моя версія: щоденний трекер звички зі стріком, фільтрами і причиною повернутися завтра.

Бібліотека

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

Перше відкриття

Loops і Categories пропонують створити перший елемент. Intervals приходять уже з трьома готовими стратегіями.

Профіль

Вкладка «Профіль» у розробника була навігаційним смітником: категорії, списки loops, підписка, промокоди, видалення й відновлення — усе жило там.

Я звела її до того, що в профілі й має бути: особисті дані, сповіщення, керування паролем, способи оплати і дії з акаунтом.

Система персонажа-чаклуна

У клієнта було одне прохання: маскот-чаклун. Мудрий старий учитель, який веде і допомагає.

Я взяла цю ідею і перетворила її на робочу систему інтерфейсу.

Флоу підписки

Спроєктувала повний флоу з нуля: екран переваг, вибір плану, промокод, оплата, стан активної підписки.