Кейс: Редизайн личного кабинета пользователя МФК

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

Интро

Предыдущая версия личного кабинета разрабатывалась больше года назад под формат займов PDL (pay-day-loans, то есть краткосрочные займы). За это время у бизнеса заказчика появились новые цели и задачи: необходимо было развивать потенциал долгосрочных займов, захотелось сделать все максимально user friendly, внедрить геймификацию, чтобы добавить в работу с серьезным финансовым продуктом немного драйва и увеличить лояльность пользователей к бренду.

Преображением личного кабинета занималась команда Devim во главе с Product Owner Таней Яшниковой. По результатам работы мы решили поделиться опытом трансформации личного кабинета и решениями, которые удалось реализовать.

Предыдущая версия личного кабинета
Предыдущая версия личного кабинета

Задачи

  • Развитие функционала онлайн-займов;
  • Проработка нового формата долгосрочных займов;
  • Создание легкого и понятного интерфейса личного кабинета;
  • Упрощение работы с займами;
  • Разработка программы лояльности и геймификация работы с займами;
  • Интеграция с партнерскими сервисами.

Решение №1: Выбор цветов и работа с дизайн-элементами

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

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

Обновленная и существенно расширенная палитра фирменных цветов
Обновленная и существенно расширенная палитра фирменных цветов

Решение №2: Выбор дизайн-системы 8pt

Так как личный кабинет кредитной организации — задача масштабная, необходимо было выбрать дизайн-систему, справляющуюся с большими объемами работ. За основу была взята система 8pt, так как:

  • Множество современных девайсов имеют размер экрана в пикселях кратный восьми;
  • В системе просто поддерживать единый ритм элементов интерфейса: шаг в восемь пикселей дает достаточное количество разных вариантов, не перегружая переменными;
  • 8pt обеспечивает удобное взаимодействие дизайнеров и разработчиков;
  • Система дает постоянство в дизайне, а это вызывает доверие у клиентов.

Выбранная система полностью устраивает и дизайнеров, и frontend-разработчиков: несмотря на большое количество экранов (около 500 экранов с разными разрешениями), с интерфейсами легко работать на всех уровнях.

Система 8pt: элементы интерфейса имеют размер, кратный 8
Система 8pt: элементы интерфейса имеют размер, кратный 8

Решение №3: Проектирование интерфейсов

Ключевым решением в проектировании было разделение контентной части на 2 блока:

  • 1 блок: юзербар с идентификационной информацией о клиенте, привязанные банковские карты.
  • 2 блок: калькулятор займов, который решили сделать компактнее и разместить горизонтально, во всю ширину контентной области. Благодаря такому решению на первом экране появилось место для дополнительной важной информации.
Личный кабинет после редизайна
Личный кабинет после редизайна

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

Адаптивность контента под разные типы устройств
Адаптивность контента под разные типы устройств

Решение №4: Программа лояльности и геймификация

Геймификация популярна в самых различных сферах и онлайн-пространствах, и наш новый кабинет заемщика не стал исключением.

Мы добавили прогресс-бар заполнения заявки, каждый шаг при этом сопровождается мотивационным геймплеем: пользователь видит текстовые подсказки и получает награды за заполнение полей.

Кейс: Редизайн личного кабинета пользователя МФК

Пока пользователь ожидает решение по заявке, ему демонстрируется видео с информацией о компании и ее преимуществах:

Кейс: Редизайн личного кабинета пользователя МФК

После оформления займа, пользователь может отслеживать действия с займом и историю начислений:

История всех займов на одном дашборде
История всех займов на одном дашборде

У каждого пользователя в процессе взаимодействия с займами формируется кредитный рейтинг с текстовыми подсказками о его статусе:

Рейтинг основан на кредитной истории заемщика
Рейтинг основан на кредитной истории заемщика

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

Программа лояльности
Программа лояльности

Решение №5: Визуализировать способы получения займа

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

Кейс: Редизайн личного кабинета пользователя МФК

По нашим прогнозам, новый личный кабинет позволит оптимизировать показатель конверсии, так как интерфейс стал удобнее, а количество шагов для оформления займа сократилось. Благодаря разработанной бонусной программе с элементам геймификации мы планируем увеличить время работы пользователя в личном кабинете и повышать лояльность заемщиков.

Пару слов о себе и заказчике

Мы — Devim, и мы делаем финтех-продукты. Заказчик проекта — федеральная микрофинансовая компания "До зарплаты".

2 комментария

Такой клевый цветастый дизайн личного кабинета! Будто не микрокредитования берёшь, а отель у моря бронируешь! Интересно, форма одежды у коллекторов такая же яркая и позитивная будет?

1
Ответить

Современное микрокредитование отличается от большинства представлений о нем, и совсем скоро мы напишем материал об этом. =)
Занимательный факт: у коллекторов нет форменной одежды. Это обычные офисные работники. Бо́льшая часть займов наших заказчиков закрывается на этапе soft collection, когда коммуникация с клиентами происходит удаленно посредством звонков, СМС- и push-оповещений. Более того, вся деятельность коллекторов МФК автоматизирована: работа с данными клиентов ведется через CRM-систему, обзвон производится по IP-телефонии, все действия строго регламентированы, предельно клиентоориентированы и гуманны.

Ответить