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