Начало проекта, постановка задачи
В связи с переходом сервисов Mailion на новую дизайн-систему Chameleon, основанную на фреймворке React и компонентах Material Design (MUI), была проведена работа по редизайну существующих интерфейсных решений календаря, а в частности, его инструментов создания, редактирования и просмотра событий.
Кроме того, появилась возможность, не ограничиваясь визуальными правками, внести изменения в логику расположения функциональных блоков и отдельных интерактивных элементов
Планирование работ, первичный анализ
Состав запланированных в проекте рабочих процессов:
1) UX-анализ первой фазы (Анализ конкурентов, составление CJM и гипотез, юзабилити тестирование, сортировка и приоритизация UX-тикетов);
2) Проектирование (wireflow, UI драфты, обсуждение драфтов с командой, проектирование первой итерация чистовой версии интерфейса календаря);
3) UX- анализ второй фазы (юзабилити-тестирование первой итерации чистовой версии, анализ результатов тестирования для проектирования второй итерации);
4) Работа с UI-китом (проектирование новых компонентов, требующихся в решениях второй итерации, их заведение в дизайн-систему)
Анализ конкурентов и внутренних решений
Любой объемный сценарий начинается
с UX-анализа и исследований текущего состояния рассматриваемого сценария на проде (в случае если планируется доработка существующего пользовательского пути) или, если продукт или его часть разрабатывается с нуля, с исследований схожих решений конкурентов в общедоступном или инсайдерском пользовании
Проектирование CJM, cоставление гипотез
После анализа конкурентов и текущего решения на проде, изучил аудиторию, продумал персонажей
Персонализация позволяет понять, кто пользуется календарем, какие функции используются наиболее часто, каких функций не хватает, какие сложности возникают в процессе работы с композером событий
На основе этих данных создал “карту путешествий клиента” (CJM) и сформулировал гипотезы по улучшению продукта
Сортировка и приоритизация
UX-Tickets
До начала процесса редизайна мною, с помощью продуктовой команды, была проведена серия юзабилити-тестирований на основе интерактивных прототипов, которые позволили выявить ряд “болей”, возникающих при использовании текущей версии продукта
Список этих проблем составил базу UX-анализа, предваряющего работу с UI-проектированием
Сборка Wireflow
При помощи Wireflow-схемы показал ключевые сценарии, распланировал путь пользователя от входа в календарь до выполнения целей
Редизайн композера событий (mini)
На основе результатов UX-анализа был разработан новый дизайн календарного композера в fullscreen и mini версиях
Редизайн композера событий (fullscreen)
Итоги
Благодаря обновлению дизайн-системы Mailion и улучшению основных пользовательских сценариев, в том числе и календарного композера, была заключена сделка по продаже сервиса крупнейшим финансовым организациям РФ на сумму более 1 млрд. рублей.
Повышение скорости работы пользователей в календаре после редизайна составило в среднем 28% по сравнению с работой
в предыдущей версии
На этом краткий обзор проделанной с календарным композером работы завершен.
Спасибо за внимание.