От хаотичного процесса к понятному конструктору

О проекте

В разделе «Электронная карта» пользователь настраивает карту лояльности для своего заведения. Процесс был непредсказуемым: создание карты начиналось через баннер, выбранный шаблон автоматически становился активной картой, а свободная загрузка изображений часто приводила к неаккуратному результату. Чтобы получить красивую карту, пользователям приходилось самостоятельно обрезать логотипы и баннеры в сторонних редакторах.

Я превратла хаотичный процесс в понятный и предсказуемый сценарий. Разработала мастер-макет, который всегда сохраняет аккуратный внешний вид, правила загрузки контента и добавила встроенные инструменты для подготовки изображений.

Контекст

iikoWeb — B2B SaaS-платформа для автоматизации ресторанного бизнеса. В экосистеме уже существовал большой модуль лояльности, но настраивать его могли только партнерские организации за деньги. Это было приемлемо для больших сетей, но становилось лишними расходами для малого бизнеса.

Digital Hub (новый self-service лояльности) создавался как самостоятельное решение для небольших ресторанов и кофеен, чтобы владельцы могли запускать программу лояльности самостоятельно.

Проблема

Электронные карты настраивали единицы
Негативная обратная связь от пилотных клиентов: говорили, что процесс занимает слишком много времени
Потеря пользователей: продолжали выбирать сторонние сервисы
Низкое качество результата: созданные карты часто выглядели непрезентабельно

Как было

Неочевидный вход в создание новой карты: через баннер и кнопку «Выбрать шаблон».

Экран раздела «Электронная карта»: вход в создание новой карты через баннер и кнопку «Выбрать шаблон»

После выбора шаблона карта автоматически попадала в список созданных и сразу становилась активной (видимой для гостей ресторана). Пользователь мог даже не заметить, что уже опубликовал её.

Экран с галереей шаблонов и списком электронных карт: выбранный шаблон сразу добавлен в список и отмечен как активный — После клика на шаблон он превращался в активную карту, которая показывалась гостям заведения

Активная карта и черновики выглядели одинаково. Активная карта отмечалась едва заметным радиобаттоном и легко терялась в списке.

Список электронных карт: активная карта отмечена радиобаттоном и визуально не отличается от черновиков — Активную карту тяжело идентифицировать в списке черновиков

Настройка карты была разбита на разные вкладки: в одной пользователь отмечал, какие блоки показывать, а в другой заполнял их содержимое. Чтобы понять итоговый результат, приходилось постоянно переключаться между вкладками.

Экран настройки электронной карты: блоки включаются в одной вкладке, а их содержимое заполняется в другой — Итоговый вид карты приходилось собирать в голове, постоянно переключаясь между табами

Размер карты менялся в зависимости от количества включённых блоков, поэтому внешний вид был непредсказуемым.

Карты лояльности разной высоты: размер карты менялся в зависимости от количества включённых блоков — Если на карте не было большинства элементов, она становилась непрезентабельной

Загруженные пользователем логотипы и баннеры часто ломали композицию карты. Чтобы получить аккуратный результат, приходилось заранее редактировать изображения в сторонних программах.

В итоге пользователь мог потратить много времени на настройку и всё равно получить карту, которая выглядела случайной и неаккуратной.

Исследование

UX-аудит существующего решения

Прошла полный путь создания электронной карты и проанализировала существующий интерфейс. Стало понятно, что проблема заключается не в отдельных экранах. Разные сценарии проектировались в разное время и постепенно перестали складываться в единый пользовательский опыт.

Анализ существующих карт

Посмотрела реальные карты клиентов. Пользователи загружали логотипы любых размеров и пропорций, изображения с белыми полями, прозрачные PNG, длинные тексты и баннеры разного качества. Внешний вид карты практически полностью зависел от качества исходных материалов, а не от самого конструктора.

Аналитика

На момент проектирования аналитика не была подключена. Электронные карты использовали немногие клиенты, поэтому выводы приходилось делать по обратной связи от пилотных внедрений и UX-аудиту.

Гипотезы

Гипотеза 1

Предполагаю, что если сделать процесс создания и настройки карты более быстрым и предсказуемым, пользователи будут чаще создавать и активировать карту для своего заведения.

Как можно было бы оценить

Количество пользователей, создавших хотя бы одну карту
Количество активных карт

Гипотеза 2

Если встроить в конструктор инструменты подготовки изображений, шаблоны и ограничения, пользователи будут тратить меньше времени на оформление карты и реже сталкиваться с неаккуратным результатом.

Как можно было бы оценить

Время создания карты
Количество отказов при создании и настройке карт

Решение

Главная идея: не пользователь должен думать о том, как сделать карту красивой — интерфейс помогает ему получить хороший результат.

Понятный сценарий создания

Создание карты начинается одной кнопкой. Пользователь сразу выбирает один из двух вариантов: создать карту с нуля или использовать готовый шаблон. Шаблоны стали частью сценария создания, а не отдельным разделом продукта.

Главный экран раздела «Электронная карта» с кнопкой создания карты — Главный экран: создание карты начинается primary-кнопкой "Создать"

Выбор способа создания карты: с нуля или по шаблону — Один выбор из двух вариантов: создать карту с нуля или использовать готовый шаблон

Создание карты по шаблону прямо в сценарии создания — Создание по шаблону: пользователь может ввести текст рекламного предложения и начать пользоваться

Создание карты с нуля: пользователь настраивает карту самостоятельно — Создание с нуля: пользователь настраивает карту самостоятельно

Понятный сценарий публикации

Создание карты и её публикация стали разными действиями. Теперь пользователь самостоятельно принимает решение, когда сделать карту активной. Черновики и активные карты получили разные статусы и больше не путаются между собой.

Активная электронная карта в конструкторе со статусом опубликованной — Активная карта: статус публикации виден сразу, и карту легко отличить от черновиков

Диалог подтверждения активации электронной карты — Подтверждение выбора: публикация карты — отдельное осознанное действие пользователя

Черновик электронной карты со статусом, отличным от активной карты — Черновик: карта сохранена, но не опубликована, пока пользователь сам не сделает её активной

Мастер-макет карты

Главным элементом проекта стал единый мастер-макет. Он определяет единый размер карты, видимость контента, ограничения текста. При этом пользователь полностью свободен в выборе цветов, изображений и содержимого.

Вкладка «Контент и дизайн» с полностью заполненной картой: логотип, название заведения, сообщение, включённые блоки бонусного баланса, держателя карты и кэшбэка, загруженный баннер и цвета — Один экран управления дизайном: видимость элементов и их содержимое настраиваются в одном месте — меньше кликов

Вкладка «Контент и дизайн» после удаления баннера: карта сохраняет единый размер и композицию, поле баннера вернулось в исходное состояние — Удалили баннер — мастер-макет сохраняет единый размер и композицию карты

Встроенные инструменты для обрезки

Чтобы пользователь смог отредактировать границы логотипа или баннера перед их загрузкой на карту, сделали кроп-обрезку.

Обрезка баннера: рамка с фиксированными пропорциями, изображение двигается и масштабируется внутри неё прямо в конструкторе

Обрезка логотипа: границы подстраиваются под композицию карты прямо в конструкторе, без сторонних редакторов — Обрезка логотипа со свободными пропорциями, но строгие правила размещения на карте (логотип всегда расположен слева, fill по высоте контейнера)

Защитные механизмы

Чтобы карта выглядела аккуратно при любом контенте, появились встроенные ограничения:

правила размещения логотипа внутри контейнера;
кроп баннера с фиксированными пропорциями;
ограничение количества строк;

Правила кропа и размещения логотипа: квадратный и длинный логотип обрезаются по пропорциям кроп-рамки, готовый логотип всегда прижат к левому краю карты — Правила размещения логотипа: пропорции кроп-рамки заданы заранее, а готовый логотип всегда прижат к левому краю карты

Пять вариантов карты с разным набором включённых элементов выглядят единообразно и сохраняют один размер — Карта выглядит единообразно вне зависимости от того, какие элементы на ней включены

Карта с максимальным объёмом контента: две строки заголовка и две строки текста, лишнее скрыто за многоточием, при меньшем контенте высота карты не уменьшается — Ограничение количества строк: не больше двух строк заголовка и двух строк текста, лишнее прячется за многоточием, а высота карты не меняется

Что оказалось самым сложным

Самой сложной частью проекта оказался не интерфейс, а проектирование сценариев. Конструктор объединял создание карты, работу с шаблонами, редактирование, статусы активной карты, черновики, ошибки, предупреждения.

В итоге решение охватило 14 пользовательских сценариев и 129 состояний интерфейса. Большая часть времени ушла именно на описание логики переходов между ними и продумывание всех подтверждений.

Figma-проект со всеми сценариями электронной карты: пустое состояние, главный экран, новая карта с нуля и по шаблону, настройки черновика и активной карты, ошибки — Проект в Figma со всеми сценариями

Фрагмент сценария: переходы между экранами настройки карты, подтверждение сохранения изменений, удаление карты и смена статуса на активный — Фрагмент сценария: переходы и подтверждения

Экраны сценариев электронной карты: пустое состояние, главный экран, назначение активной карты, дублирование, удаление активной карты, настройки активной карты и ошибки — Экраны сценариев: создание, активация, дублирование и ошибки

Экраны работы с логотипом карты: загрузка логотипа, логотип загружен, логотип не загружен и смена статуса карты на активный — Экраны сценариев: работа с логотипом и статусами карты

Результат

появился понятный и предсказуемый сценарий создания и редактирования карты
карта выглядит всегда хорошо, даже если нет баннера, логотипа или других элементов
пользователю больше не нужно использовать сторонние редакторы для подготовки изображений
раздел электронных карт стал популярен и спустя полгода собирает около 6700 посещений за 30 дней

Электронная карта гостя в новом конструкторе: вкладки «Активная карта» и «Все карты», статусы карт и действие «Сделать активной»

Один экран «Контент и дизайн»: видимость элементов и контент внутри них настраиваются вместе

Карта выглядит единообразно вне зависимости от того, какие элементы на ней включены

Рефлексия

Малому бизнесу нужны быстрые преднастроенные сценарии, которые помогают быстро получить хороший результат.
В конструкторах важно не только дать пользователю свободу, но и задать правильные ограничения. Именно они делают интерфейс предсказуемым и снижают вероятность ошибок.
Если интерфейс позволяет пользователю легко создать некачественный результат, проблема чаще всего в самом интерфейсе.
Чем сложнее сценарий, тем важнее заранее продумать все состояния системы. Именно они занимают большую часть работы и определяют качество пользовательского опыта.