Начать
Кейс: FinTech

Как NeoBank повысил конверсию через цвет

Разбор реального проекта: как финтех-стартап из Москвы перестроил визуальный язык, отказавшись от «скучного синего» в пользу глубокого фиолетового, и увеличил регистрации на 25% за квартал.

Смотреть результаты Читать интервью
Сравнение интерфейса NeoBank до и после редизайна с использованием палитры Pixly
---

Проблема: старый и скучный интерфейс

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

Данные аналитики показывали, что 60% пользователей покидали страницу регистрации до ввода email. Психологический барьер был слишком высок — приложение выглядело «серьезно», но не «дружелюбно».

Метрика

Отказ на экране онбординга составлял 62%. Пользователи не чувствовали доверия к бренду визуально.

---
Стратегия

Задача: создать доверие и динамику

Ребридинг должен был решить две противоположные задачи

01

Технологичность

Необходимо было уйти от образа «консервативного банка» к образу современного финтех-продукта, использующего AI и автоматизацию.

02

Эмоциональная связь

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

03

Единый стандарт

Синхронизация визуального стиля между мобильным приложением (React Native) и веб-версией без рассинхрона токенов.

---
Решение

Выбор сине-фиолетовой палитры

Мы выбрали глубину (#09080E) как основу, чтобы создать премиальный фон, и добавили электрический голубой (#00F0FF) для акцентов действия и неоновый розовый для CTA.

Основной фон

Dark Matter: #09080E

Глубокий темный фон снижает нагрузку на глаза и выделяет контент.

Акцент (Доверие)

Electric Blue: #00F0FF

Используется для графиков, баланса и технической информации.

Действие (CTA)

Neon Pink: #FF2E93

Кнопки отправки, подтверждения и перехода. Привлекает взгляд.

---

Процесс работы с Pixly

Команда NeoBank использовала Pixly для централизации управления цветами. Это позволило сократить время внедрения дизайн-системы вдвое.

  • 01.
    Генерация токенов

    Создание семантических токенов (surface, primary, accent) вместо жесткого кодирования HEX значений.

  • 02.
    Интеграция API

    Подключение Pixly API к сборке React Native для автоматического обновления цветов при смене темы.

  • 03.
    Проверка WCAG

    Встроенный инструмент Pixly автоматически отклонил 3 варианта текста как недостаточно контрастные.

// pixly-config.json

{
  "palette": "neobank-dark",
  "tokens": {
    "bg-deep": "#09080E",
    "primary": "#7000FF",
    "accent": {
      "value": "#FF2E93",
      "usage": "cta-button"
    }
  }
}
---

Результаты: +25% к регистрации

Показатели за первые 3 месяца после запуска нового интерфейса

+25%

Конверсия в регистрацию

-40%

Отказ на онбординге

1.8s

Среднее время до CTA

4.9

Рейтинг в AppStore (UI)

---
АК

Алексей Ковалев

Арт-директор, NeoBank

«Раньше мы тратили часы на синхронизацию цветов между дизайнерами и разработчиками. Кто-то менял HEX в Figma, а в коде оставалось старое значение. С Pixly мы создали палитру один раз, и она мгновенно обновилась во всех наших продуктах. Это дало нам свободу экспериментировать с градиентами без страха сломать UI.»

Мы перешли на платформу Pixly Enterprise в марте 2023 года, и это стало одним из лучших решений для нашей дизайн-системы.

---

Хотите такого же результата?

Попробуйте создать свою первую палитру в Pixly прямо сейчас. Бесплатно для команд до 5 человек.

Создать аккаунт