Розробка сайту, мобільного додатку та UX/UI-дизайн терміналів самообслуговування для YUFAMI
Сайти для банків і фінтех
Опис проєкту
YUFAMI - сервіс для купівлі та продажу криптовалюти, з яким користувач працює через сайт, мобільний додаток і мережу криптобанкоматів. Команда artARTERY створила всі цифрові точки контакту сервісу: виконала UX/UI-дизайн, розробила сайт, особистий кабінет і мобільний додаток, спроєктувала інтерфейси терміналів і системи управління.
Обсяг виконаних робіт - близько 125 основних екранів у чотирьох каналах і ще 40-50 станів: спливаючі вікна, повідомлення про помилки, порожні екрани. Разом із мобільною версією сайту - близько 135 екранів. Усі вони побудовані на одній дизайн-системі, тому користувач бачить знайомий інтерфейс у будь-якому каналі.
| Канал | Обсяг |
|---|---|
| Публічний сайт | близько 30 екранів |
| Мобільна версія сайту | близько 10 екранів |
| Особистий кабінет (комп'ютер) | близько 18 екранів і 10 спливаючих вікон |
| Мобільний додаток iOS та Android | близько 45 екранів |
| Термінал (криптобанкомат) | близько 32 екранів |
| Разом | близько 135 екранів і 40-50 станів |
Завдання проєкту
Команда artARTERY отримала завдання виконати UX/UI-дизайн і розробку сайту з особистим кабінетом для YUFAMI, дизайн і розробку мобільного додатку для iOS та Android, а також UX/UI-дизайн інтерфейсів криптобанкоматів і системи управління мережею терміналів. Тобто створити всі інтерфейси, через які користувачі та оператори працюють із сервісом.
Головною вимогою був однаковий досвід у всіх каналах. Користувач, який купив криптовалюту на сайті, мав без навчання повторити ту саму операцію в додатку або на терміналі самообслуговування: з однаковою логікою кроків, однаковими назвами дій і спільною дизайн-системою.
Окремим напрямом стала інтеграція AI-асистента, який підказує користувачам сайту й особистого кабінету, як виконати операцію, а на терміналах працює голосом. Серверну частину розроблено на Go і PHP, дані зберігаються в PostgreSQL і Redis.
- UX/UI-дизайн сайту, особистого кабінету, мобільного додатку й терміналів
- Створення дизайну сайту та єдиної дизайн-системи для всіх каналів
- Розробка сайту і особистого кабінету користувача
- Адаптивна мобільна версія сайту
- Сценарій купівлі та продажу криптовалюти у 3 кроки: монета, сума, підтвердження
- Курси криптовалют у режимі реального часу зі зміною у відсотках
- Дизайн і розробка мобільного додатку для iOS та Android
- UX/UI-дизайн інтерфейсів криптобанкоматів і терміналів самообслуговування
- Вхід на термінал за QR-кодом із додатку, для гостей - за електронним паспортом
- Пошук терміналів на сайті
- Проєктування інтерфейсів системи управління мережею терміналів для операторів
- API-інтеграція із сервісом верифікації користувачів (KYC) і біржовими API
- Зв'язка особистого кабінету й мобільного додатку з терміналами
- AI-асистент для сайту, особистого кабінету й терміналів із голосовим режимом на терміналі
- Стани інтерфейсу: спливаючі вікна, помилки, порожні екрани, очікування підтвердження операції
Результати розробки сайту, додатку та інтерфейсів терміналів
Команда artARTERY розробила сайт з особистим кабінетом і мобільний додаток для iOS та Android, виконала UX/UI-дизайн усіх каналів, включно з інтерфейсами криптобанкоматів, і об'єднала їх в одну систему. Близько 125 основних екранів і 40-50 станів інтерфейсу побудовано на спільній дизайн-системі, тому купівля і продаж криптовалюти працюють за однією логікою онлайн і біля термінала.
UX/UI-дизайн: близько 135 екранів в одній дизайн-системі
Найбільший обсяг роботи в проєкті припав на UX/UI-дизайн. Він охопив сайт, його мобільну версію, особистий кабінет, мобільний додаток і термінали: близько 135 екранів і 40-50 станів інтерфейсу, а також інтерфейси системи управління для операторів. Усе зібрано на одній дизайн-системі зі спільними компонентами, кольорами, шрифтами й назвами дій, тому нові екрани додаються без перемальовування наявних.
Окрім основних сценаріїв, у дизайні опрацьовано граничні стани: помилки мережі, очікування підтвердження операції, порожні екрани, завершення сесії. Головні кнопки зроблено однаковими в усіх каналах, а фірмовий червоний колір залишено лише для акцентів, щоб його не плутали з кнопкою скасування.
Сайт і особистий кабінет: купівля криптовалюти у 3 кроки
Головний сценарій сайту зведено до трьох кроків: вибрати монету, ввести суму і підтвердити операцію. Сума й кількість монет перераховуються одразу, а курс і комісію показано поруч із кнопкою. Популярні монети винесено на перший екран, інші знаходяться через пошук. Для тих, хто віддає перевагу готівці, на сайті реалізовано пошук терміналів. Зміну курсу позначено не лише кольором, а й стрілками ▲▼.
Мобільний додаток для iOS та Android
Мобільний додаток став найбільшим каналом проєкту - близько 45 екранів. У ньому реалізовано ключові сценарії сайту, а сам додаток виконує роль ключа до термінала: користувач показує QR-код із додатку на сканері криптобанкомату і продовжує операцію без введення логіна й пароля.
UX/UI-дизайн терміналів самообслуговування (криптобанкоматів)
Інтерфейс термінала самообслуговування спроєктовано під вертикальний сенсорний екран і роботу в публічному місці: великі зони натискання, мінімум кроків, зрозумілі стани очікування підтвердження, помилки мережі й завершення сесії. Для гостей без додатку передбачено вхід за електронним паспортом.
Кольори кнопок узгоджено з фізичною клавіатурою термінала: кнопку підтвердження зроблено не червоною, бо на пінпаді червоний означає скасування, а успішне завершення операції позначено зеленим.
Інтерфейси системи управління
Для операторів мережі спроєктовано інтерфейси системи управління: карта і моніторинг стану терміналів, керування операціями, звітність і робота зі зверненнями клієнтів. Інтерфейс розраховано на оператора, який одночасно стежить за багатьма пристроями, тому пріоритетом були щільність інформації і швидка реакція на події.
AI-асистент, інтеграції та безпека даних
На сайт, в особистий кабінет і на термінали інтегровано AI-асистента. Він підказує, як виконати операцію, і відповідає на типові запитання, а на терміналах працює голосом і веде користувача по кроках.
Для захисту користувачів асистента налаштовано так, що він не запитує і не обробляє персональні дані: паролі, коди підтвердження, ключі гаманців і дані документів. На терміналі він не озвучує персональну інформацію. Завдяки інтеграції з KYC-сервісом і біржовими API користувач отримав один обліковий запис для сайту, додатку й терміналів.
Результат для клієнта
YUFAMI отримав сайт з особистим кабінетом, мобільний додаток для iOS та Android, інтерфейси криптобанкоматів і системи управління в одній дизайн-системі, а також AI-асистента для користувачів. Купівля й продаж криптовалюти займають кілька кроків у будь-якому каналі, а користувач, який переходить із сайту до термінала, працює зі знайомим інтерфейсом.
Експертний матеріал. Матеріал базується на практичному досвіді Digital-агентства artARTERY: з 2003 року - понад 650 реалізованих web- і digital-проєктів, 37+ банків-клієнтів і понад 76 проєктів для банків і FinTech.
Поширені питання про розробку криптосервісу: сайт, додаток, термінали
Що входить у розробку особистого кабінету для криптосервісу?
Розробка особистого кабінету для криптосервісу включає UX/UI-проєктування сценаріїв купівлі й продажу, дизайн, програмування серверної частини, інтеграцію з KYC-сервісом і біржовими API, а також опрацювання всіх станів: помилок, очікування підтвердження, порожніх екранів.
Чим інтерфейс криптобанкомату відрізняється від інтерфейсу сайту?
Користувач термінала стоїть у публічному місці, часто поспішає і може бачити сервіс уперше. Тому інтерфейс криптобанкомату має великі зони натискання, мінімум кроків, кольори кнопок, узгоджені з пінпадом, і чіткі стани очікування й помилок. Сайт може показати більше інформації, термінал - лише те, що потрібно для поточного кроку.
Чи можна замовити UX/UI-дизайн інтерфейсу термінала самообслуговування в Україні?
Так. artARTERY проєктує інтерфейси терміналів самообслуговування і банкоматів: сценарії операцій, стани очікування й помилок, екрани під орієнтацію і розмір дисплея конкретної моделі термінала. Для YUFAMI команда artARTERY спроєктувала інтерфейс криптобанкомату - близько 32 екранів в одній дизайн-системі із сайтом і мобільним додатком.
Чи безпечно використовувати AI-асистента в криптосервісі?
Так, якщо асистент не працює з персональними даними. AI-асистент YUFAMI не запитує паролі, коди підтвердження, ключі гаманців і дані документів, а на терміналі не озвучує персональну інформацію. Таке правило захищає і від шахраїв: будь-який запит коду від імені сервісу - ознака підробки.
Скільки екранів має фінтех-сервіс із сайтом, додатком і терміналами?
Це залежить від кількості сценаріїв. У проєкті YUFAMI створено близько 125 основних екранів у чотирьох каналах і ще 40-50 станів: спливаючі вікна, помилки й порожні екрани, без яких інтерфейс не готовий до реальних користувачів.
Чи можна замовити лише UX/UI-дизайн без розробки?
Так. artARTERY виконує UX/UI-дизайн інтерфейсів окремо від розробки: у проєкті YUFAMI інтерфейси системи управління для операторів були окремим дизайн-напрямом без програмування. Макети передаються команді розробки разом із дизайн-системою.
Комплексна розробка сайту, мобільного додатку та UX/UI-дизайн терміналів у Києві
У проєкті YUFAMI artARTERY виконала комплексну розробку: сайт з особистим кабінетом, мобільний додаток, інтерфейси терміналів самообслуговування і системи управління створено однією командою в одній дизайн-системі. Якщо вашому сервісу потрібні сайт, додаток і термінали, що працюють як одне ціле, digital-агентство artARTERY з Києва проведе проєкт від UX/UI-дизайну до запуску.
