Edita
С нуля спроектировал интерфейсы CMS, на которой сегодня работает более 50 сайтов ИТМО.
Продолжаю развивать продукт: упрощаю сложные сценарии, проверяю решения с пользователями и сопровождаю их реализацию.
Направления работы
CMS ИТМО · Product Design · UX Research
Одна платформа для сайтов ИТМО
Одна платформа для сайтов ИТМО: создание страниц, оформление и управление контентом.
Моя роль в продукте
Отвечал за дизайн
Проектировал UX/UI, исследовал пользовательские сценарии и принимал решения по интерфейсам. Руководил дизайн-ревью и контролировал качество реализации.
Работал вместе с командой
Согласовывал решения с PM и разработчиками. Приоритеты, направление развития продукта и планы определяли совместно.
Вложенные страницы
Ожидает разработки
Предложил убрать технические разделы из интерфейса редактора и проверил новую модель в юзабилити-тесте.
Цветовая архитектура
В продукте
Разделил акцентный цвет сайта и оформление блоков. Предложил систему, которая даёт больше гибкости без потери фирменного стиля.
Вложенные страницы
Вместо работы со страницами редакторы настраивали разделы
Что показали наблюдения
Редакторы путали страницы и разделы, пропускали настройку главной страницы и терялись во вложенности. Перемещение контента вызывало сложности.
Наблюдения из работы с сайтами и обращений в поддержку.
В чём была проблема
Чтобы создать вложенную страницу, сначала приходилось создавать раздел, настраивать его и назначать главную страницу.
Отдельная сущность: раздел
Переключение между разделами и страницами
Лишние действия при перемещении страницы
Зависимость от главной страницы при перемещении
Страницы вместо технических разделов
Я предложил изменить саму модель: редактор работает только со страницами и их вложенностью, а технические разделы CMS создаёт автоматически.
Старая модель
Раздел
Назначение главной страницы
Страница
Вложенный раздел
Главная страница
Страница
Страница
Страница
Страница
Новая модель
Ожидает разработки
По новой модели CMS сама создаёт технические разделы и связывает их со страницами.
Ожидает разработки
Единая структура страниц
Редактор видит привычную иерархию страниц, а CMS берёт на себя всю техническую логику.
Единая структура
Многоуровневая вложенность
Перемещение страниц
Юзабилити-тест · 3 участника
Время перемещения страницы
Старая модель
153
сек.
→
Новая модель
30
сек.
В сравнительном тесте участники выполняли задачу перемещения страницы в среднем за 30 секунд вместо 153.
Время выполнения по участникам
Проверяли перемещение страницы с учётом вложенности и настройки главной страницы.
Тест выявил проблему
Участники понимали иерархию, но не всегда замечали стрелку раскрытия. Я сделал её заметнее перед следующим этапом.
До
После
При коридорном тестировании проблема с раскрытием вложенности больше не проявилась.
Цветовая архитектура
Один цвет мог перегрузить всю страницу
Изначально оформление строилось на нескольких фиксированных сочетаниях цветов. На реальных страницах они ограничивали выбор и нередко перегружали большие блоки яркими оттенками.
Прежние цветовые сочетания
Комбинации цветов в готовых палитрах
Насыщенные цвета меняли восприятие целых блоков, а не только фирменных акцентов.
Разделил фирменный стиль и оформление блоков
Предложил единый акцентный цвет для интерактивных элементов и отдельную палитру оттенков для оформления страниц. Согласовал новый подход и вместе с командой довёл его до внедрения.
Фирменный стиль сайта
Тема оформления: Light / Dark
↓
Глобальный акцент
↓
Кнопки · Иконки · Интерактивные состояния
≠
Оформление блоков
Цветовая палитра
↓
Светлые и тёмные оттенки
↓
Фоны · Поверхности · Градиенты
Акцент выделяет важные действия автоматически, а цвета фонов и блоков настраиваются отдельно.
Больше возможностей оформления для одних и тех же страниц
До
Раньше оформление зависело от нескольких фиксированных палитр.
После
Новая система сохраняет выразительные акценты и даёт больше вариантов для фонов блоков и их элементов.
В продукте
Настройки цвета в редакторе
Новая система уже работает в Edita. Редакторы выбирают тему и акцентный цвет сайта, а для отдельных блоков выбирают палитры оттенков, сплошные цвета и градиенты.
Тема и акцентный цвет сайта: Светлая
Тема и акцентный цвет сайта: Тёмная
Палитра блоков
Настройка градиентов
Новый подход к структуре страниц и оформлению сайтов
Разные сайты: одна цветовая система
Что проверю дальше
Структура страниц
После внедрения новой модели повторю тест на большей выборке и проверю, стало ли меньше ошибок.
Настройки оформления
Посмотрю, как редакторы используют акцентные цвета и палитры блоков на реальных сайтах.
Самостоятельная работа
Проверю, какие задачи редакторы выполняют без помощи дизайнеров и технической поддержки.
