Проект выполнен в условиях NDA. Демонстрация дизайн-макетов возможна на собеседовании.
В текущей реализации «Биллинг» — раздел CRM-системы для оформления и управления подпиской: сравнения планов, редактирования количества мест и выбора срока подписки.
Роль
Продуковый дизайн, CX, IA
UX/UI дизайн
Team Lead
Продолжительность
Ноябрь - Декабрь 23
Задача
Переработать раздел биллинга, расширить его функционал, добавить больше возможностей по управлению подпиской и способами оплаты
Оптимизировать пользовательский опыт, проработать кейсы ошибок
Сделать процесс подбора плана более нативным
Этапы
Анализ задачи
Сбор бизнес-требований, выстраивание коммуникации со стейкхолдером
Сбор технической информации и НФТ
Аудит компонентов продакшена
Постановка задачи дизайнеру, написание тикета, брифинг
Информационная архитектура
Разработка hi-fi драфтов
Согласование со стейкхолдерами
Формирование библиотеки компонентов по задаче
Коммуникация с разработкой по техническим возможностям и ограничениям, а также по поиску оптимальных решений с точки зрения ресурсов
Разработка пиксель-перфект макетов
Описание работы раздела через screen-flow, проработка целевых кейсов, корнер-кейсов, состояний ошибки, технических сообщений
Фидбек для дизайнера по результатам работы
Документация по проекту
Презентация проекта
Вызовы
В ходе проекта команда столкнулась с рядом вызовов и вот как мы их решили:
отсутствие четкой постановки задачи
наладила коммуникацию со стейкхолдером для сбора требований и обмена фидбеком
проработала целевые сценарии
проработала корнер-кейсы и состояния ошибок
разработала ИА проекта и презентовала стейкхолдеру в виде скрин-флоу
предусмотрела возможное масштабирование для апгрейда биллинга до полноценного личного кабинета
как результат, презентованы и утверждены новые стандарты по выполнению задачи. ИА, скрин-флоу/юзер-флоу внедрены как часть стандарта по работе над проектами
работа в отсутвии дизайн системы, код ферст подход
проведена инвентаризация компонентов в коде, необходимые компоненты перенесены из текущей кодовой базы в Figma и задокументированы
недостающие компоненты собраны по стандартам системы, согласованы с разработкой и фронтенд-архитектором для дальнейшего добавления в формирующуюся ДС
как результат — самостоятельный набор стандартизированных элементов, позволивший ускорить скорость работы дизайнеров, разработки и QA по ряду задач
презентовать обновленный дизайн в отуствии ДС
и с учетом легаси
проведён аудит текущего интерфейса и легаси-ограничений, определены области, где допустимы визуальные изменения
как результат, предложен более современный визуал, наследующий принципы и подходы брендинга промо, при этом вписывающийся в эстетику системы
Результаты
Полностью переработан раздел биллинга, представлен новый функционал с учётом уже существующих фич
Проработаны кейсы изменения плана подписки при пробном периоде, при истекшем пробном периоде, при активной и неактивной подписке, при превышенных лимитах
Проработаны кейсы продления и отмены подписки, кейсы увеличения лимитов
Добавлена возможность хранения и редактирования платежных данных
Проработаны флоу первой покупки с оплатой картой, оплатой платежными системами PayPal и Bex. Проработан флоу повторного платежа
Предусмотрена история платежей со статусом и возможностью формирования документа
Предоставлена возможность управления рекуррентными платежами
Представлен обновленный дизайн, сочетающий в себе брендинг промо и при этом базирующийся на визуальных принципах системы
Новые компоненты разработаны с учетом легаси, сопроводены спецификацией для разработки и согласованы с ФЕ-архитектором
Продумана логика реактивационных писем и системных сообщений, уведомлений о скором окончании подписки, уведомлений о неуспешном автосписании в случае рекуррентных платежей
Подготовлена MVP-версия апгрейда раздела биллинга для уменьшения нагрузки на разработку и плавного перехода пользователей на новый дизайн
Time-on-task: среднее время на оформление/изменение подписки в прототипе сократилось на ~20%;
SUS/удовлетворённость: суммарная оценка удобства по SUS для прототипа выше текущего решения на ~10 пунктов;
Снижение нагрузки на саппорт: потенциальное снижение обращений по вопросам подписки/платежей на ~10–15% за счёт явных статусов, истории платежей и ошибок с понятными действиями;
До 80% экранов второй итерации собираются из стандартизированных компонентов - ожидаемая экономия разработки и QA ~15–20% за счёт реюза;
*Оценки основаны на внутренних юзабилити-тестах прототипов и отражают ожидаемый эффект и готовность к внедрению
Детали ключевых этапов
Структура
После сбора требований со стороны бизнеса и разработки и проведения анализа собранных данных была разработана базовая структура, основанная на ключевом сценарии:
Драфты
На следующем этапе стейкхолдеру были показаны hi-fi-драфты. Каждый экран выполнен в нескольких версиях: близких к дизайн-системе продукта и с использованием принципов бренда промо-сайта. Для всех экранов учтены основные и ошибочные состояния.
Формат hi-fi выбран для наглядности и получения точной обратной связи. На этом шаге дизайн прошёл до семи итераций, чтобы охватить весь диапазон решений. Продумывались варианты как по визуальным решениям, так и по контенту страниц. Это дало стейкхолдеру основу для выбора и показало, какие информационные блоки наиболее уместны.
Коллекция компонентов по задаче
В связи с отсутствием ДС была проведена инвентаризация системы. Для каждого кейса собран ряд подходящих компонентов. В связке с разработкой отобраны оптимальные компоненты и перенесены в Figma по принципу code-first в соответствии с продакшн-реализацией.
Информационная архитектура
Финальная информационная архитектура предоставлена в формате Screen flow с использованием пиксель-перфект-макетов, прошедших аудит фронтенд-архитектора.
Архитектура включает в себя все проработанные кейсы, состояния ошибок и технические сообщения.
Вторая итерация
В связи с высокими затратами на разработку полного апгрейда был предложен «облегчённый» вариант. Вторая итерация не подразумевает принципиальных изменений в работе секции, при этом сосредоточена на оптимизации пользовательского опыта. Это способно обеспечить итеративный переход, облегчить как нагрузку на разработку, так и адаптацию пользователей к апгрейдам интерфейса. В данный момент проект находится в бэклоге.
