Редизайн b2b-агрегатора Finlab

Главное о кейсе

Финлаб — финансовый b2b онлайн-агрегатор. По сути, ребята подбирают фин.продукты для бизнеса.

Мы сделали им редизайн. На основе новых прототипов полностью переупаковали сервис в лучших трендах фин.сервисов и банков.

Результат:
• Работала команда из 3-х человек: Арт-директор, Миддл дизайнер, Джуниор дизайнер
• Помогли клиенту быстро запустить MVP
• Запустили сразу 5 финансовых продуктов сервиса
• Сделали современный дизайн сервиса

Как проект изменил жизнь пользователей

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

Бизнес-задача и ее решение

Задачи:
• Нужно было упаковать сервис на уровне современных банков (Тинькофф, Сбер, Альфабанк), чтобы вызвать доверие к сервису и ощущение «свойскости»
• Также, клиент хотел придумать стилистику для 3D-иллюстраций
• Сделать получение банковских продуктов таким же простым как и для физических лиц
• Доказать при первом контакте с пользователем, что банковские продукты для бизнеса легко выбрать, сравнить и оформить онлайн
• Показать, как одной заявки достаточно для нескольких банков сразу.


Как мы работали:
1. Дискавери:
• Провели несколько интервью с бизнесом, чтобы лучше понять как он работает
• Проанализировали целевую аудиторию на основе данных клиента
• Проанализировали другие b2b агрегаторы, b2c агрегаторы в текущем рынке и смежных, чтобы найти больше инсайтов и механик.

2. Проектирование (Клиент приходил к нам со своими прототипами):
• Изучили прототипы клиента, сделали экспресс ux-аудит и предложили улучшения
• Внесли изменения в прототипах на основе ux-аудита и конкурентного анализа

3. Дизайн-концепция:
• Собрали 3 мудборда, чтобы синхронизироваться с клиентом по стилистике
• Придумали дизайн-концепцию. Основной константой для стиля мы взяли логотип: его пластику, цвет, принципы посторения знака
• Параллельно с этим придумали стиль 3D-иллюстраций и их матераилов
• В итоге из логотипа взяли следующие принциипы: верстка, плотно прибитая к краям, контурные иконки, написание с маленькой буквы, общая блочность дизайна

4. Дизайн остальных страниц:
• Когда концепт утвердили — приступили к дизайну остальных внутренних страниц
• На протяжении 2-х месяцев рисовали страницы продуктов сервиса, страницу скоринга компании пользователя, страницы блога и статей, процесс оформления заявки на фин.продукт
• Собрали первичный UI-kit

Крафт (мастерство), реализация, технические детали

Одной из задач, которые ставил перед собой клиент, была: «Доказать при первом контакте с пользователем, что банковские продукты для бизнеса легко выбрать, сравнить и оформить онлайн».

Поэтому, мы продумали процесс оформления заявки таким образом, что клиент, сравнивая предложения просто набирает их в «Корзину» — как в классическом интернет магазине. После чего он может посмотреть все предложения, куда хочет отправить заявку, сравнить их или удалить лишние.

Таким образом, пользователю сервиса не приходится отправлять заявки в каждый банк, а можно отправить одну сразу во все!

Еще, мы придумали уникальную фичу: выводить на карточке предложения вероятность того, что банк одобрит вам финансовый продукт. Мы назвали ее «ликвидность». Если индикатор ликвидности зеленый, значит вашу заявку с большей вероятностью одобрит банк.

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Клиент хорошо знаком с технологиями и процессом передачи макетов в разработку. Поэтому, к нам было требование заложить модульную систему дизайна в макетах, кратную 8 или 4, чтобы фронд-енду в дальнейшем было проще верстать макеты на компонентах.

Также, на основе этой модульной системы мы сделали UI-kit. Каждый отступ и размер был кратен модулю, который мы задали.к
Таким образом, это позволило быстрее реализовывать фронт-енд и собирать макеты в дизайне.

Скриншоты