На 40% меньше обращений в поддержку
По данным клиента, после запуска обновлённого интерфейса количество обращений в поддержку снизилось на 40%.
Hyperise — редизайн платформы персонализации контента
Hyperise уже был работающим продуктом: с клиентами, отлаженной технологией и примерно 60 интеграциями с источниками данных.
Его возможности позволяли персонализировать изображения, сообщения и контент сайтов, а у существующих пользователей уже сложились привычные сценарии работы. Интерфейс больше не соответствовал зрелости продукта: многоуровневые меню и разрозненные настройки затрудняли доступ к нужным инструментам.
Поэтапный UX/UI-редизайн должен был сделать интерфейс понятнее и дать больше контроля, сохранив привычные сценарии для существующих пользователей.
Для этого требовалось упорядочить панели и навигацию, сделать инструменты персонализации доступнее и сформировать общую логику для новых экранов. Обновления вводились последовательно, чтобы переход к новой структуре оставался понятным и пользователи могли продолжать привычную работу.
- −40%
- обращений в поддержку после запуска
- 2×
- отмечен на Product Hunt
- 4 месяца
- поэтапный UX/UI-редизайн
О проекте
Зрелый продукт с устаревшим интерфейсом
Hyperise помогает маркетологам персонализировать изображения, сообщения для привлечения клиентов и контент сайтов, используя данные примерно из 60 интегрированных источников.
Работа началась с редактора изображений и постепенно охватила весь продукт: его интерфейс требовалось сделать проще, последовательнее и удобнее для дальнейшего развития.
Продукт
Веб-платформа персонализации контента для маркетинга и продаж.
Клиент
Зона ответственности
- UX/UI редактора изображений, инструментов персонализации, панелей, навигации и сценария Hyper-Campaign.
- Развитие дизайн-системы.
Работа над проектом
Структура редактора
Часто используемые инструменты собраны в одной панели, справка размещена рядом с соответствующими действиями.
Ключевые сценарии
Этапы Hyper-Campaign объединены в последовательный сценарий.
Дизайн-система
Подготовлены переиспользуемые компоненты, дизайн-токены, состояния предварительного просмотра и авторские иконки.
Инструменты скрывались в многоуровневых меню
Инструменты и настройки были распределены по многоуровневым меню. Непоследовательное визуальное оформление делало продукт менее надёжным на вид, чем позволяла его технология.
Вместо работы над кампаниями пользователям приходилось тратить время на навигацию.
Что замедляло привычные задачи
По материалам интервью с пользователями и обращений в поддержку.
Рабочая область
Конкурирующие элементы управления
Инструменты редактора занимали место, необходимое для самой работы.
Навигация
Слишком много уровней
Чтобы добраться до часто используемых действий, требовалось несколько переходов.
Освоение продукта
Зависимость от документации
Прежде чем начать эффективно работать, пользователям приходилось изучать большой объём справочных материалов.
Поддержка
Функции было трудно найти
Многие обращения в поддержку касались возможностей, которые уже были в продукте.
Две цели редизайна
Ближайшая цель
Разгрузить редактор изображений и сделать инструменты персонализации доступнее.
Долгосрочная цель
Создать устойчивую систему интерфейса, которая поддержит развитие новых функций.
Редактор: частые действия на одном экране
Часто используемые элементы управления собраны в одной боковой панели. Компоненты добавляются в рабочую область перетаскиванием. Инструменты доступны напрямую, без переходов по вложенным меню, а справочные пояснения размещены рядом с действиями, для которых они нужны.
Hyper-Campaign: единая последовательность
Hyper-Campaign связывает электронное письмо, страницу продажи и ретаргетинг. В обновлённом интерфейсе все три этапа показаны как единая последовательность действий.
Компоненты для новых экранов
Переиспользуемые компоненты, дизайн-токены, состояния предварительного просмотра и авторские иконки создали устойчивую основу продукта. Подготовлены переиспользуемые шаблоны с предпросмотром в реальном времени. Новые экраны могли строиться по той же логике.
Поэтапный переход для существующих пользователей
У Hyperise уже были пользователи, знакомые с прежним продуктом. Обновление началось с визуального языка, затем были изменены панели и навигация, а после — компоновка интерфейса целиком.
Каждый этап сводил необходимость переучиваться к минимуму и давал время оценить реакцию пользователей перед следующим изменением. Генеральный директор Hyperise описал результат так:
Три Lean-спринта
Исследование
Обзор конкурентов, интервью с пользователями и фиксация проблем в сценариях работы.
Дизайн-система
Дизайн-токены, компоненты, состояния предварительного просмотра и единый визуальный язык иконок.
Проектирование интерфейсов
Редактор, сценарий кампании и детально проработанные макеты экранов. Готовые макеты переданы для разработки в Figma.
Результат
Дважды отмечен на Product Hunt
Hyperise дважды был отмечен на Product Hunt.
Инструменты персонализации стали доступнее. Настройка кампании, прежде распределённая по нескольким экранам, собрана в единый сценарий. Существующие пользователи продолжали работать с продуктом во время перехода.