Решение:
- UI
- За основу выбрал концепцию вкладочного интерфейса - четкая структура инструментов редактора по разделам
- Выбрал стиль Бэнто - интерфейс с явными границами
- Переехали на единую библиотеку иконок и цветов.
- Презентовал концепт команде, дизайн директору и департаменту
- UX
- Для наполнения вкладов провел закрытую карточную сортировку и скрин-тест
- В рамках проработки решения проводил регулярные А/В и немодерируемые тесты для проверки гипотез
Ресеч:
- Провел модерируемые интервью по базовым сценариям с использованием Eyetracker'а
- Проверил гипотезы, определил проблемы и составил бэклог улучшений
Описание
Цель:
- Повысить метрики SUS и CSAT
- Уменьшить когнитивную нагрузку пользователей и увеличить скорость работы
- Повысить уровень конкурентоспособности
Проблема:
- Сложная навигация в интерфейсе (низкий уровень NPS)
- 3 библиотеки иконок (визуальный хаос)
- Устаревший и отсталый дизайн (анализ конкурентов)
Общий итог:
- Реализован редизайн трёх веб-редакторов
- Создана единая библиотека иконок, новая структура меню, внедрена вкладочная навигация и новый визуальный язык Бенто
- SUS выросла с 63 до 65
- CSAT выросла с 49% до 57%
Финальный дизайн:
- Отрисовка и описание финальных макетов и документации
- Разделение редизайна на мелкие фазы
- Поддержка на этапах разработки и тестирования
- Финальный опрос на пользователей с целью определить уровень NFC
Скрин-тест
Цель:
Назвать вкладки максимально ожидаемо для пользователей
Метод:
Пользователь должен выбрать 1 из 3 вариантов для имени группе инструментов указанных на картинке.
Итог:
С учетом выбранных вариантов вкладки названы максимально ожидаемо для пользователей.
Закрытая карточная сортировка
Цель:
Расположить инструменты по вкладкам с наибольшей эффективностью для работы и запоминания.
Метод:
Пользователям нужно расположить инструменты по заранее названым группам.
Итог:
В исследовании суммарно были опрошены 530 респондентов. Исходя из анализа проведенного исследования вкладки вкладки получили ожидаемое наполнение.
Исследования
В рамках редизайна проводились исследования, большая часть которых была в сервисе Pathway. Ниже приведены некоторые из них.
Цвета
Для комфортного восприятия интерфейса и сохранения единого стиля бренда использовали палитру пастельных тонов дизайн-системы.
Иконки
Переехали на единую библиотеку иконок из дизайн-системы.
В рамках переезда отрисовал для своего продукта 50+ недостающих иконок.
В рамках переезда отрисовал для своего продукта 50+ недостающих иконок.
Элементы дизайн-системы
Для консистентности с другими продуктами использовали элементы дизайн-систему.
