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

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

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

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

Задачи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#редизайн #финтех #интерфейсы #кейс #devim