Maryna Dmitriieva — UX/UI Product Designer

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

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

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

Family Wallet — app preview on a smartphone

Проблема

Рішення

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

Через це дитині складно бачити зв’язок між грошима, зусиллями, витратами та цілями. Батькам, у свою чергу, не вистачає простого інструменту, який допомагав би контролювати процес м’яко, без постійного тиску та ручного нагадування.

Застосунок Family Wallet стане відмінним інструментом для організації фінансової взаємодії між батьками та дитиною.

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

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

Таким чином Family Wallet має вирішити проблему хаотичного управління кишеньковими грошима, усних домовленостей про завдання та винагороди, складності з контролем витрат, відсутності зрозумілої системи накопичень і недостатньої мотивації дитини планувати свої покупки.

User Research

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

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

Parent and child using a phone — user research illustration

Що входило у дослідження

Визначення основних болей батьків і потреб дитини.

Інтерв’ю з потенційними користувачами — батьками.

Аналіз поточного процесу кишенькових грошей, завдань, витрат і накопичень.

Аналіз конкурентних та референсних рішень.

Формування key insights, user personas та JTBD.

Визначення MVP-функцій і базової логіки застосунку.

Key Insights

Батьки хочуть навчити дитину не витрачати всі гроші одразу

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

❝

«Хочеться, щоб дитина не витрачала всі гроші одразу, а вчилася відкладати на те, що їй справді важливо».

Процес кишенькових грошей часто залишається хаотичним

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

«Зараз це часто відбувається усно: дали гроші, домовились про щось, а потім складно згадати деталі».

Батькам потрібен м’який контроль, а не тотальний нагляд

Батьки хочуть бачити витрати дитини та мати можливість встановлювати базові ліміти, але при цьому не хочуть контролювати кожен крок. Важливий баланс між довірою та безпекою.

❝

«Я хочу розуміти, куди дитина витрачає гроші, але не хочу постійно її контролювати або тиснути».

Дитині потрібна візуальна мотивація

Дитині легше розуміти гроші, коли вона бачить не лише суму на балансі, а й прогрес: скільки вже накопичено, скільки залишилось до цілі. Wishlist, скарбнички та винагороди можуть зробити процес більш цікавим і зрозумілим.

❝

«Дитині легше накопичувати, коли вона бачить, наскільки вже наблизилась до бажаної покупки».

Завдання та винагороди потребують зрозумілої системи

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

❝

«Було б зручно, щоб дитина бачила завдання, суму винагороди і розуміла, що саме потрібно зробити».

Дитина часто витрачає гроші на швидкі бажання: солодощі, снеки, іграшки, косметику або трендові дрібниці.

Батькам складно контролювати готівкові витрати.

Ім'я

Софія

Роль

Дитина

Вік

9 років

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

Цілі:

Мати власні гроші. Виконувати завдання та отримувати винагороду. Купувати те, що хочеться. Накопичувати на бажані речі зі свого вішліста. Бачити прогрес до цілі. Отримувати нагороди за виконані завдання. Відчувати самостійність.

Проблеми

Складно не витратити гроші одразу.

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

Не завжди зрозуміло, скільки ще потрібно накопичити.

Немає візуальної мотивації продовжувати збирати.

Звичайні фінансові інструменти можуть бути нудними для дитини.

Потреби

Простий і яскравий інтерфейс.

Список завдань.

Нагороди за виконання.

Вішліст бажань.

Скарбнички для різних цілей.

Прогрес накопичення.

Позитивна мотивація.

Відчуття, що застосунок схожий на гру.

Зрозумілий баланс.

User persona #2

Встановлювати ліміти;

Бачити витрати дитини.

Допомагати дитині накопичувати на цілі;

Створювати завдання з винагородою.

Проблеми

Цілі:

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

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

На основі результатів user research було визначено дві ключові user personas: батько/мати та дитина.

Потреби

JTBD

Карта застосунку

Додавати готівкові гроші вручну;

Бачити баланс дитини;

Видавати кишенькові гроші регулярно або вручну;

Видавати кишенькові гроші регулярно або вручну.

Мати м’який контроль без відчуття тотального нагляду.

Підтверджувати виконання завдань.

Дитині складно відкладати гроші на більші цілі.

Дитина порівнює себе з іншими дітьми, яким “купують усе просто так”.

Усні домовленості про завдання та винагороду можуть забуватися.

Батьки не хочуть надмірного контролю, але хочуть бачити фінансову поведінку дитини.

Ім’я

Олена

Роль

Мати

Вік

35 років

User persona #1

Фахівчиня в IT-сфері та мама 10-річної доньки. Вона працює повний робочий день, має насичений графік і намагається поєднувати роботу, сімейні справи та виховання дитини.

Family Wallet

❝

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

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

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

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

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

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

Вхід / Корінь

Головний хаб

Стандартний екран

Дія / Модальне вікно

Інформаційна архітектура, ієрархія екранів та функціональні потоки

Вхід / Корінь

Головний хаб

Стандартний екран

Дія / Модальне вікно

Вхід у застосунок

Кореневий маршрут

Вітання / Онбординг

Екран вітання

Вибір ролі

Батько чи дитина

Головна дитини

Головний хаб

ГІЛКА 2 — ЗАСТОСУНОК ДИТИНИ

Панель батьків

Головний хаб

ГІЛКА 1 — ЗАСТОСУНОК БАТЬКІВ

Надіслати завдання

Фото підтвердження / статус

Додати бажання

Вставити посилання / ціну

Список бажань

Список цільових продуктів

Цілі заощадження

Прогрес цілі

Деталі цілі

Депозити та журнал

Історія витрат

Особистий журнал

Профіль дитини

Теми / налаштування аватара

Екран балансу

Швидкий статус

Огляд балансу

Детальний розбір

Доступні завдання

Список обов'язків

Деталі завдання

Інструкції

Нагороди та досягнення

Гейміфікація

Редагування профілю

Оновлення деталей

Сповіщення

Правила сповіщень

Обмеження

Безпека та ліміт

Налаштування

Загальні налаштування

Огляд бажань

Бажання дитини та тригери затвердження

Затвердити та винагородити

Завершення виплати

Перевірити завдання

Перевірка виконання

Деталі завдання

Інформація про завдання

Створити завдання

Налаштування винагороди

Центр завдань

Менеджер домашніх обов'язків

Історія витрат

Журнал аудиту

Цілі заощадження

Налаштування цілі

Налаштувати стипендію

Автоматичний розклад

Додати кишенькові гроші

Миттєвий переказ

Управління коштами

Центр виплат

Баланс дитини

Перегляд журналу

Огляд профілю дитини

Детальна статистика та статус

Профілі дітей

Вибір профілю

Wireframes

Після визначення MVP та основної логіки застосунку я перейшла до створення wireframes, щоб продумати структуру екранів, навігацію та ключові сценарії для двох ролей: батьків і дитини

Екрани батьків

Екрани дитини

Welcome / Onboarding

UI-частина та фінальні екрани застосунку наразі перебувають у розробці.

User Persona

Узагальнені думки користувачів на основі інтерв’ю

Dmitriieva Maryna

UI/UX Designer

mtkauk@gmail.com +380 93 916 55 85 Linkedin

Let's create something together

Shelter app on a smartphone held in a hand

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

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

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

Проблема

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

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

Також не всі користувачі готові одразу забрати тварину додому, але хочуть допомогти притулкам фінансово. Без зручного інструменту для донатів така підтримка часто відкладається або взагалі не відбувається.

Рішення

“Притулок” має стати зручним інструментом для пошуку, адопції та підтримки тварин із притулків.

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

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

На основі аналізу конкурентів я визначила ключову логіку взаємодії користувача із застосунком та створила user flow для сценарію пошуку, знайомства з твариною та підтримки притулку через донат.

Wireframes

Після створення user flow я перейшла до wireframes, щоб перевірити структуру основних екранів, логіку навігації та послідовність дій користувача в застосунку.

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

Основні кольори та шрифт додатку

Для візуального стилю я обрала світлий фон, чорний текст і приглушені відтінки зеленого та помаранчевого. Зелений передає спокій, довіру та турботу, а помаранчевий використовується для ключових дій: бронювання зустрічі, підтвердження та CTA-кнопок.

Шрифт Comfortaa підтримує дружній і м’який характер застосунку, роблячи інтерфейс більш теплим та легким для сприйняття.

FAFFFA

E9EDE1

D2E5C1

BCD7A0

FFC190

0A1300

CF6B21

Comfortaa

Aa  Bb  Cc  Dd  Ee  Ff  Gg  Hh  Ii  Jj  Kk  Ll  Mm  Nn  Oo  Pp  Qq  Rr  Ss  Tt  Uu  Vv  Ww  Xx  Yy  Zz

Regular   Medium  Bold

UI Design

Після wireframes я перейшла до UI-частини, щоб сформувати візуальний стиль застосунку та показати фінальний вигляд основних екранів.

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

Інтерфейс побудований так, щоб користувач міг швидко перейти від перегляду тварини до ключової дії — забронювати зустріч або підтримати притулок.

Стартовий сценарій має два варіанти: для нового та зареєстрованого користувача.

Dmitriieva Maryna

UI/UX Designer

mtkauk@gmail.com +380 93 916 55 85 Linkedin

Let's create something together

Leadership Initiative — website mockup on a laptop

Leadership Initiative — website design, screen 1

Leadership Initiative — website design, screen 2

Leadership Initiative — website design, screen 3

Leadership Initiative — website design, screen 4

Leadership Initiative — website design, screen 5

Лідерська ініціатива — це громадська організація, яка об’єднує молодь навколо волонтерства, розвитку лідерських навичок та соціально важливих проєктів.

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

Після брифінгу з клієнтом я визначила основні задачі майбутнього сайту для ГО «Лідерська ініціатива».

Організація працює з 2024 року та об’єднує молодь навколо розвитку особистісних якостей, волонтерства, командної роботи, проєктної діяльності та допомоги дітям ВПО. До створення сайту основна комунікація відбувалася через Instagram, тому важлива інформація про діяльність, напрями роботи, реєстрацію, партнерство та підтримку не була зібрана в одному зручному просторі.

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

01 Брифінг

02 Дослідження

03 Структура

04 Wireframes

05 UI Design

06 Prototype

07 Presentation

Мапа сайту

Після брифінгу з клієнтом я визначила ключові розділи майбутнього сайту та побудувала його структуру.

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

Wireframes

Після створення мапи сайту я перейшла до wireframes, щоб продумати структуру сторінок, розташування основних блоків і логіку навігації.

Айдентика, кольори та шрифт

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

UI Design

У UI-частині я зосередилась на простій структурі, зрозумілій навігації та фірмовому візуальному стилі організації.

Сайт має швидко пояснювати, чим займається «Лідерська ініціатива», показувати напрями роботи та вести користувача до основних дій: дізнатися більше, долучитися, стати партнером або підтримати організацію.

Оскільки в клієнта була обмежена кількість власних фотографій, у дизайні я використовувала наявні матеріали організації. Це дозволило зберегти автентичність сайту та показати реальну команду, події й атмосферу «Лідерської ініціативи».

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

Leadership Initiative — mobile version of the website

Dmitriieva Maryna

UI/UX Designer

mtkauk@gmail.com +380 93 916 55 85 Linkedin

Let's create something together

La Vela Arde — це бренд handmade-свічок, який створює декоративні та ароматичні свічки з натурального воску.

Бренд поєднує естетику ручної роботи, тепло та атмосферність. Свічки створюються як елемент декору, подарунок або деталь, яка додає простору затишку й індивідуальності.

Мапа сайту

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

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

Wireframes

Після аналізу конкурентів було створено wireframes.

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

Typography & Color

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

Обраний шрифт виглядає чисто й сучасно, добре читається та не відволікає від продукту. Це допомагає зберегти баланс між естетикою бренду та зручністю інтернет-магазину.

У візуальній частині було важливо передати тепло, естетику та handmade-характер бренду, але не перевантажити інтерфейс.