Bill_line

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

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

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

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

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

1. Проаналізувати конкурентів на ринку платіжних систем. Виробити концепцію бренд айдентики, 
   яка відповідає потребам потенційних клієнтів та вирізняє компанію серед конкурентів.
2. Розробити айдентику. Створити логотип, який відображає концепцію роботи компанії.
3. Створити вайрфрейми. Узгодити структуру майбутнього сайту.
4. Створити дизайн сайту, фронтент та бекенд реалізацію.
5. Переосмислити та зробити редизайн кабінету мерчанта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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