Процесс создания страницы по оформлению пролонгации UX/UI-дизайнером
Пролонгация — продление срока действия договора займа. Позволяет клиенту увеличить срок возврата займа без уплаты штрафных санкций за просрочку.
Сперва получаю задачу от менеджера проекта — сделать страницу, на которую будут попадать клиенты после получения sms или e-mail. Задача страницы — пояснить то, что клиент не вернул займ вовремя и во избежание уплаты штрафных санкций предложить ему оформить пролонгацию.
Преследуем две основных цели:
Автоматизировать процесс и снизить работу колл-центра. Сейчас они обзванивают каждого клиента и рассказывают о пролонгации.
- Повысить количество продаж пролонгаций.
Обсуждаем детали, беру карандаш с бумагой, делаю эскиз главного экрана. Сперва прорабатываю мобильную версию т.к. больше 80% пользователей взаимодействуют с сервисом через мобильные устройства.
Арт-директор: это будет похоже на типичный лэндос, давай дадим понять пользователю, что мы пытаемся ему помочь, донеся до него выгоду, а не что-то «втюхать».
Появляется мысль ознакомиться со скриптом колл-центра, который они используют при общении с клиентом на тему оформления пролонгации и прослушать несколько успешных звонков. Хочу понять клиента, на каком этапе он принимает решение оформить пролонгацию и что является для него триггером. В ходе прослушивания успешных звонков и изучения скрипта, составляю для себя путь клиента к принятию решения:
Я его назвал — «столкновение с реальностью». Клиента информируют о том, что его общий долг составляет n-сумма.
- Как так получилось? Клиенту объясняют, что в связи с тем, что он не вернул займ в срок, ему начислен штраф.
Что теперь делать? Клиенту сообщают о возможности выйти с минимальными потерями из данной ситуации, оформив пролонгацию. Рассказывают о преимуществах данной услуги для него.
- Можно я подумаю? Клиент понимает выгоду, но еще сомневается. Тут успешные сотрудники колл-центра обращали внимание на то, что сумма долга растет каждый день т.к. штраф начисляется ежедневно и чем раньше он примет решение, тем лучше для него.
Хорошо, сколько это стоит? Клиент соглашается оформить пролонгацию и уточняет еще раз условия.
После прослушивания звонков и вспомнив слова Арт-директора появляется идея создать на первом экране некий интерактив для клиента.
Арт-директор: мне нравится, давай доработаем до бумажного прототипа, если тебе удобно работать с бумагой, и покажем менеджеру проекта.
Переношу вышеописанный путь принятия решения клиентом на прототип, показываю менеджеру проекта.
Менеджер проекта: мне нравится, согласовываю.
После согласования переношу прототипы в Sketch, пишу тексты, часть элементов беру из нашего UI-kit.
Арт-директор: надо тексты сделать короче без потери смысла, сейчас слишком длинные.
Соглашусь, правлю.
Арт-директор: еще короче.
Правлю, самому нравится, что смысл остался, а текст стал гораздо короче.
Арт-директор: отлично!
Накатываю UI, ищу референсы с карточками, нахожу один интересный вариант и развиваю его.
Арт-директор: карточки и иконки огонь! График надо доработать, можем сделаем его тоже интерактивным?
Дорабатываю график. Набрасываю кликабельный прототип в Figma, через приложение Figma Mirror запускаю на телефоне. В выходные встречаюсь с друзьями, рассказываю каждому предысторию и прошу открыть страницу, при этом комментировать — Что видишь? Что думаешь? Что хочешь сделать? Удается протестировать страницу на 8 людях. Найдено 2 больших недочета:
При выборе движении ползунка вправо, меняется сумма долга т.к. штраф и процент на штраф перечеркиваются, но пользователь не сразу это замечает т.к. это не бросается в глаза. В результате пользователь не может понять — почему сумма поменялась?
При взаимодействии с ползунком большой палец закрывает стоимость, которая указана на кнопке, позже пользователь удивляется — так это платно?
Вношу изменения в прототип, в понедельник рассказываю о результатах тестирования Арт-директору.
Арт-директор: согласен, так лучше, давай дадим покликать прототип менеджеру проекта.
Менеджер проекта: мне всё нравится, но, по-моему, мало информации о том, когда клиенту потребуется вернуть долг? Сейчас немного непонятно.
Решаю проверить гипотезу на коллегах, прошу прокомментировать — Что видишь? Что думаешь? Что хочешь сделать? После нажатия кнопки оформить уточняю, как они поняли — Какую сумму и до какого числа им потребуется вернуть. Проверяю на 4 людях, но уже понятно, что слова менеджера проекта подтверждается. Правлю макет, после снова тестирую, задаю те же вопросы, в этот раз всё отлично, все пользователи трактуют информацию верно.
Менеджер проекта: круто! Мне нравится, согласовываем с фронтом и запускаем в работу.
Кому понравилась статься, вы также можете ознакомиться с работой на Behance.
Какие ограничения вы получаете вместе с задачей? Временные, технические?
Складывается ощущение, что их нет и вы можете:
- тратить столько времени на задачу, сколько посчитаете нужным
- не соотносится с текущими возможностями технической реализации (есть ли в системе необходимые для интерфейса данные, сколько ресурсов потребуется для реализации и т.д.).
И второй вопрос — у вас продуктовая или заказная разработка?
Хотелось бы об этих вещах услышать:)
Спасибо за статью!
Вы круто к задаче подошли, очень обстоятельно:
- послушали записи общения с настоящими клиентами (это прямо супер)
- провели коридорные тестирования на друзьях, а позже – на коллегах (это тоже прекрасно)
На этих двух этапах вы получили ценнейшие данные для решения задачи. Не все знакомые юиксеры это делают.
Скажите, а почему вы рисовали сначала прототип в Скетче, потом в Фигме? UI проекта хранится в формате Скетч?
Кстати, прототипы Фигмы можно смотреть на телефоне без Figma Mirror, просто по ссылке на прототип, а не на проект (в ссылке после figma.com должно быть proto, а не file)
Спасибо за обратную связь!
Изначально работаем в Sketch, а в Figma перенес чтобы сделать кликабельный прототип.
Да, я знаю про ссылку :)
Круто, это заслуживает лайка и подписки 🤡