Оффтоп Devim Team
598

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

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

В закладки

Интро

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

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

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

Задачи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Devim Team", "author_type": "self", "tags": ["\u0444\u0438\u043d\u0442\u0435\u0445","\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d","\u043a\u0435\u0439\u0441","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","devim"], "comments": 2, "likes": 3, "favorites": 7, "is_advertisement": false, "subsite_label": "flood", "id": 38082, "is_wide": false, "is_ugc": true, "date": "Wed, 23 May 2018 11:17:01 +0300" }
{ "id": 38082, "author_id": 171228, "diff_limit": 1000, "urls": {"diff":"\/comments\/38082\/get","add":"\/comments\/38082\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/38082"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

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

Популярные

По порядку

1

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

Ответить
0

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

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления