Дизайн
MYLIFEINMYHANDS
1912

Процесс создания страницы по оформлению пролонгации UX/UI-дизайнером

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

В закладки

Сперва получаю задачу от менеджера проекта — сделать страницу, на которую будут попадать клиенты после получения sms или e-mail. Задача страницы — пояснить то, что клиент не вернул займ вовремя и во избежание уплаты штрафных санкций предложить ему оформить пролонгацию.

Преследуем две основных цели:

  1. Автоматизировать процесс и снизить работу колл-центра. Сейчас они обзванивают каждого клиента и рассказывают о пролонгации.

  2. Повысить количество продаж пролонгаций.

Обсуждаем детали, беру карандаш с бумагой, делаю эскиз главного экрана. Сперва прорабатываю мобильную версию т.к. больше 80% пользователей взаимодействуют с сервисом через мобильные устройства.

Арт-директор: это будет похоже на типичный лэндос, давай дадим понять пользователю, что мы пытаемся ему помочь, донеся до него выгоду, а не что-то «втюхать».

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

  • Я его назвал — «столкновение с реальностью». Клиента информируют о том, что его общий долг составляет n-сумма.

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

  • Можно я подумаю? Клиент понимает выгоду, но еще сомневается. Тут успешные сотрудники колл-центра обращали внимание на то, что сумма долга растет каждый день т.к. штраф начисляется ежедневно и чем раньше он примет решение, тем лучше для него.
  • Хорошо, сколько это стоит? Клиент соглашается оформить пролонгацию и уточняет еще раз условия.

После прослушивания звонков и вспомнив слова Арт-директора появляется идея создать на первом экране некий интерактив для клиента.

Арт-директор: мне нравится, давай доработаем до бумажного прототипа, если тебе удобно работать с бумагой, и покажем менеджеру проекта.

Переношу вышеописанный путь принятия решения клиентом на прототип, показываю менеджеру проекта.

Менеджер проекта: мне нравится, согласовываю.

После согласования переношу прототипы в Sketch, пишу тексты, часть элементов беру из нашего UI-kit.

Арт-директор: надо тексты сделать короче без потери смысла, сейчас слишком длинные.

Соглашусь, правлю.

Арт-директор: еще короче.

Правлю, самому нравится, что смысл остался, а текст стал гораздо короче.

Арт-директор: отлично!

Накатываю UI, ищу референсы с карточками, нахожу один интересный вариант и развиваю его.

Арт-директор: карточки и иконки огонь! График надо доработать, можем сделаем его тоже интерактивным?

Дорабатываю график. Набрасываю кликабельный прототип в Figma, через приложение Figma Mirror запускаю на телефоне. В выходные встречаюсь с друзьями, рассказываю каждому предысторию и прошу открыть страницу, при этом комментировать — Что видишь? Что думаешь? Что хочешь сделать? Удается протестировать страницу на 8 людях. Найдено 2 больших недочета:

  • При выборе движении ползунка вправо, меняется сумма долга т.к. штраф и процент на штраф перечеркиваются, но пользователь не сразу это замечает т.к. это не бросается в глаза. В результате пользователь не может понять — почему сумма поменялась?

  • При взаимодействии с ползунком большой палец закрывает стоимость, которая указана на кнопке, позже пользователь удивляется — так это платно?

Вношу изменения в прототип, в понедельник рассказываю о результатах тестирования Арт-директору.

Арт-директор: согласен, так лучше, давай дадим покликать прототип менеджеру проекта.

Менеджер проекта: мне всё нравится, но, по-моему, мало информации о том, когда клиенту потребуется вернуть долг? Сейчас немного непонятно.

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

Менеджер проекта: круто! Мне нравится, согласовываем с фронтом и запускаем в работу.

Кому понравилась статься, вы также можете ознакомиться с работой на Behance.

{ "author_name": "MYLIFEINMYHANDS", "author_type": "self", "tags": [], "comments": 4, "likes": 18, "favorites": 87, "is_advertisement": false, "subsite_label": "design", "id": 122976, "is_wide": false, "is_ugc": true, "date": "Sat, 25 Apr 2020 11:19:32 +0300", "is_special": false }
0
4 комментария
Популярные
По порядку
10

Какие ограничения вы получаете вместе с задачей? Временные, технические?
Складывается ощущение, что их нет и вы можете:
- тратить столько времени на задачу, сколько посчитаете нужным
- не соотносится с текущими возможностями технической реализации (есть ли в системе необходимые для интерфейса данные, сколько ресурсов потребуется для реализации и т.д.).

И второй вопрос — у вас продуктовая или заказная разработка?

Хотелось бы об этих вещах услышать:)

Ответить
1

Спасибо за статью!
Вы круто к задаче подошли, очень обстоятельно:

- послушали записи общения с настоящими клиентами (это прямо супер)
- провели коридорные тестирования на друзьях, а позже – на коллегах (это тоже прекрасно)

На этих двух этапах вы получили ценнейшие данные для решения задачи. Не все знакомые юиксеры это делают.

Скажите, а почему вы рисовали сначала прототип в Скетче, потом в Фигме? UI проекта хранится в формате Скетч?
Кстати, прототипы Фигмы можно смотреть на телефоне без Figma Mirror, просто по ссылке на прототип, а не на проект (в ссылке после figma.com должно быть proto, а не file)

Ответить
0

Спасибо за обратную связь!

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

Да, я знаю про ссылку :)

Ответить
0

Круто, это заслуживает лайка и подписки 🤡

Ответить

Прямой эфир