Доступні для нових проектів з Квітня. Напишіть нам щоб забронювати команду 👈
Доступні для нових проектів з Квітня. Напишіть нам щоб забронювати команду 👈
Доступні для нових проектів з Квітня. Напишіть нам щоб забронювати команду 👈

Bill_line NEW - goodface.agency

Платіжна система для онлайн-бізнесу

Індустрія

  • фінтех

Експертиза

Редизайн особистого кабінету, розробка веб-сайту та бренд айдентики

Період розробки

2022

Про клієнта

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

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

Завдання

Сайт Bill_line давно не оновлювали: логотип та візуал застаріли. А налаштування особистого кабінету важко давались навіть постійним клієнтам. Нам поставили завдання — привести сайт до рівня сучасних платіжних систем та спростити кабінет користувача.

Website before.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency
Website after.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency
Avatar.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency
Максим БороненкоCDBO Bill_line
“Колеги з іншої фінтех компанії рекомендували оновити сайт разом з Goodface. Ми переглянули роботи на сайті агентства і залишились у захваті від візуалу. Тому вирішили довірити проєкт Goodface.”

Стратегія проєкту

Процес

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

Далі ми розробили стратегію проєкту:

  1. Проаналізувати конкурентів на ринку платіжних систем. Виробити концепцію бренд айдентики, 
    яка відповідає потребам потенційних клієнтів та вирізняє компанію серед конкурентів.
  2. Розробити айдентику. Створити логотип, який відображає концепцію роботи компанії.
  3. Створити вайрфрейми. Узгодити структуру майбутнього сайту.
  4. Створити дизайн сайту, фронтент та бекенд реалізацію.
  5. Переосмислити та зробити редизайн кабінету мерчанта.
Billline 3.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency
Avatar.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency
Максим БороненкоCDBO Bill_line
“Я дуже прискіпливий до деталей. Щоб довести сайт до результату, Goodface створили ефективний робочий механізм. Стратегію узгоджували через щотижневі дзвінки. А покрокові рішення обговорювали в чаті.”

Лого та айдентика

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

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

Logo before.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency
Logo After.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency

Концепти

Ми створили кілька концептів з шрифтової
назви компанії та лінії — провідного елементу
логотипу. Лінія в концептах символізує частину назви
компанії – Bill_Line.

Порадившись з клієнтом, використали два, показані на картинці. Спочатку користувач бачить 
перший логотип — з прямою лінією (Bill_line). А згодом лінія за допомогою моушн-дизайну
округлюється.
 Це символізує посмішку, основну ідею нового позиціонування — client care.

Рішення

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

Зараз логотип виглядає на рівні міжнародних конкурентів, і в той же час — адаптований під тренди.

Billline 7-min-2.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency
Billline 8-min.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency
Billline 9-min.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency

Розробка сайту

Дизайн сторінок сайту Bill_line продовжує концепцію айдентики. Ми використали кольори логотипу
та лаконічність. Інтерактивним елементам додали стилізацію в моушн-дизайні.

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

В кожному нашому проєкті моушн-дизайн — перевага, а не перепона. Наш відділ фронт-енд 
розробки досягає швидкості завантаження в 98-99 зі 100 за Google Page Speed. 
Тому частіше ми додаємо анімації через програмування, а не використовуємо відео.

Billline 10-min.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency
Billline 11-min.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency

Дизайн сторінок

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

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

Billline 12-min.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency
Billline 13-min.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency

Кабінет користувача

Щоб адаптувати інтерфейс під потреби клієнтів
та сучасні діджитал-традиції, запропонували клієнту нову концепцію UX/UI дизайну.

Минулий кабінет був заважким і не інтуїтивним. Інтерфейс не допомагав, а навантажував клієнтів. 
Наприклад, важко пройти процедуру реєстраці. А в кабінеті не було підказок, як керувати аналітикою 
та звітами. Самі аналітичні дані нагромаджені в купу — треба добре розуміти інтерфейс, щоб оперувати параметрами звітності.

Billline 14-min.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency

Інтуїтивний інтерфейс

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

Billline 15-min.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency
Billline 16-min.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency

Дашборд

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

UX/UI кожної сторінки продумали до деталей. Наприклад, для реєстрації створили
початкове вікно з підказками, сторінку підтвердження, зміни та відновлення паролю.
Презентували екрани клієнтові у Figma.

Goodface agency, case Bill_line, User's Account Before.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency
Goodface agency, case Bill_line, User's Account After.png - Редизайн особистого кабінету, розробка сайту та бренд айдентики для української платіжної системи Bill_line - goodface.agency

Результати

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

Сучасний лого та бренд айдентика

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

Оновлений презентаційний сайт

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

Особистий кабінет користувача

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

Посилання

Відгук клієнта

5.0
Star - goodface.agency
Quality 5.0Schedule 5.0Cost 5.0Willing to refer 5.0

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

Інші проєкти

Corefy - goodface.agency

Corefy

  • фінтех
  • IT

UX/UI дизайн, розробка сайту та бренд айдентика для великої платіжної платформи

Переглянути проєктArrow - goodface.agency
  • фінтех
  • IT
КейсArrow - goodface.agencyArrow - goodface.agency
Cascad - goodface.agency

Cascad

  • фінтех

Проектування та розробка сайту.
Логотип та дизайн інтерфейсу особистого кабінету для платіжної системи

Переглянути проєктArrow - goodface.agency
  • фінтех
Arrow - goodface.agencyArrow - goodface.agency
PayAtlas - goodface.agency

PayAtlas

  • фінтех

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

Переглянути проєктArrow - goodface.agency
  • фінтех
Arrow - goodface.agencyArrow - goodface.agency
Всі проєктиArrow - goodface.agency
Отримати пропозиціюSmile - goodface.agency
Перехід бізнесу 

на
 новий рівень 
в одній простій дії
Написати GoodfaceSmile - goodface.agency
Cat
Close
Checkmark - goodface.agency

Заповніть простий бриф

Ми відповімо найближчим часом на email

Close

ПОЛІТИКА КОНФІДЕНЦІЙНОСТІ

Ласкаво просимо до Повідомлення про конфіденційність Goodface.

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

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

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

ІНФОРМАЦІЯ, ЯКУ МИ ЗБИРАЄМО

Коли ви відвідуєте наш веб-сайт, наші сервери можуть автоматично реєструвати стандартні дані, надані вашим веб-браузером. Ці дані вважаються "неідентифікуючою інформацією", оскільки вони не ідентифікують Вас особисто. Він може включати:

  • Адреса Інтернету (IP) вашого комп’ютера;
  • Тип і версія браузера;
  • Сторінки, які ви відвідуєте;
  • Час та дата вашого візиту;
  • Час, проведений на кожній сторінці;

ІНШІ ДЕТАЛІ

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

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

Ми оброблятимемо персональні дані та спілкуватимемось з вами лише в тому випадку, якщо:

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

2. Виконання контракту

3. Де ми маємо законний інтерес для зв’язку з вами стосовно наших продуктів та послуг

ВИКОРИСТАННЯ ІНФОРМАЦІЇ

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

Права та вибір:

  • Подивіться, які дані ми маємо про вас, якщо такі є;
  • Змінюйте / виправляйте будь-які дані, які ми маємо про вас;
  • Попросіть нас видалити будь-які дані про вас;
  • Подивіться, які заходи безпеки ми застосовуємо до ваших даних;
  • Висловіть будь-яке занепокоєння щодо використання нами ваших даних;

Ви можете будь-коли відмовитися від будь-яких майбутніх контактів від нас за адресою електронної пошти, вказаної на нашому веб-сайті: goodface.agency