Кейс: Редизайн личного кабинета пользователя МФК
История о том, как из ничем не примечательного личного кабинета пользователей микрокредитной компании сделать удобный и интересный инструмент взаимодействия с клиентами.
Интро
Предыдущая версия личного кабинета разрабатывалась больше года назад под формат займов PDL (pay-day-loans, то есть краткосрочные займы). За это время у бизнеса заказчика появились новые цели и задачи: необходимо было развивать потенциал долгосрочных займов, захотелось сделать все максимально user friendly, внедрить геймификацию, чтобы добавить в работу с серьезным финансовым продуктом немного драйва и увеличить лояльность пользователей к бренду.
Преображением личного кабинета занималась команда Devim во главе с Product Owner Таней Яшниковой. По результатам работы мы решили поделиться опытом трансформации личного кабинета и решениями, которые удалось реализовать.
Задачи
- Развитие функционала онлайн-займов;
- Проработка нового формата долгосрочных займов;
- Создание легкого и понятного интерфейса личного кабинета;
- Упрощение работы с займами;
- Разработка программы лояльности и геймификация работы с займами;
- Интеграция с партнерскими сервисами.
Решение №1: Выбор цветов и работа с дизайн-элементами
При редизайне особый акцент делался на обновление цветовой палитры. Предыдущий вариант личного кабинета был визуально тяжеловат, так как в нем задействовали преимущественно цвета логотипа: красный и оранжевый. В веб-среде эти оттенки используются для обозначения ошибок/уведомлений, поэтому необходимо было создать новую палитру фирменных цветов и обеспечить визуальный интерес и лояльность пользователей, а также добавить ощущение легкости и порядка в интерфейсе.
Ведущий дизайнер проекта Виталик Капустянов выбрал для работы оттенки базового оранжевого и определил акцентные цвета, добавив к ним графитовый цвет и его вариации. В результате получилась достаточно гибкая и комфортная цветовая палитра, которая помогла нашей команде решить ключевые задачи в работе над интерфейсом. Основной фон решено было сделать белым, чтобы визуально не перегружать пространство.
Решение №2: Выбор дизайн-системы 8pt
Так как личный кабинет кредитной организации — задача масштабная, необходимо было выбрать дизайн-систему, справляющуюся с большими объемами работ. За основу была взята система 8pt, так как:
- Множество современных девайсов имеют размер экрана в пикселях кратный восьми;
- В системе просто поддерживать единый ритм элементов интерфейса: шаг в восемь пикселей дает достаточное количество разных вариантов, не перегружая переменными;
- 8pt обеспечивает удобное взаимодействие дизайнеров и разработчиков;
- Система дает постоянство в дизайне, а это вызывает доверие у клиентов.
Выбранная система полностью устраивает и дизайнеров, и frontend-разработчиков: несмотря на большое количество экранов (около 500 экранов с разными разрешениями), с интерфейсами легко работать на всех уровнях.
Решение №3: Проектирование интерфейсов
Ключевым решением в проектировании было разделение контентной части на 2 блока:
- 1 блок: юзербар с идентификационной информацией о клиенте, привязанные банковские карты.
- 2 блок: калькулятор займов, который решили сделать компактнее и разместить горизонтально, во всю ширину контентной области. Благодаря такому решению на первом экране появилось место для дополнительной важной информации.
Конечно же, помимо десктопной версии был разработан адаптив с дополнительной версией визуального и текстового контента, удобной для восприятия с экранов гаджетов любого формата.
Решение №4: Программа лояльности и геймификация
Геймификация популярна в самых различных сферах и онлайн-пространствах, и наш новый кабинет заемщика не стал исключением.
Мы добавили прогресс-бар заполнения заявки, каждый шаг при этом сопровождается мотивационным геймплеем: пользователь видит текстовые подсказки и получает награды за заполнение полей.
Пока пользователь ожидает решение по заявке, ему демонстрируется видео с информацией о компании и ее преимуществах:
После оформления займа, пользователь может отслеживать действия с займом и историю начислений:
У каждого пользователя в процессе взаимодействия с займами формируется кредитный рейтинг с текстовыми подсказками о его статусе:
Также разработана бонусная программа, позволяющая улучшать кредитный рейтинг и пользоваться различными привилегиями:
Решение №5: Визуализировать способы получения займа
В личный кабинет интегрированы партнерские сервисы, поэтому нам нужно было визуализировать пункты выдачи займов. В результате мы добавили стилизованные иконки на карту, фильтр с наименованиями партнеров, и пользователь буквально двумя кликами выбирает точку выдачи средств.
По нашим прогнозам, новый личный кабинет позволит оптимизировать показатель конверсии, так как интерфейс стал удобнее, а количество шагов для оформления займа сократилось. Благодаря разработанной бонусной программе с элементам геймификации мы планируем увеличить время работы пользователя в личном кабинете и повышать лояльность заемщиков.
Пару слов о себе и заказчике
Мы — Devim, и мы делаем финтех-продукты. Заказчик проекта — федеральная микрофинансовая компания "До зарплаты".