Результат в цифрах
Контекст
Изображения – важная составляющая работы с email-рассылками. Маркетологи постоянно добавляют баннеры, фотографии товаров, логотипы и другие визуальные материалы. При этом в Mindbox не было единого места, где можно загрузить файл один раз, быстро найти его и повторно использовать в следующем письме.
При сборке каждой рассылки пользователям приходилось возвращаться к папкам на компьютере, искать нужную версию и заново загружать изображение. Это замедляло работу в конструкторе и превращало простой шаг в повторяющуюся рутину.
Дополнительную сложность создавала совместная работа. В аккаунте клиента обычно работают несколько сотрудников: одни собирают рассылки, другие готовят изображения или используют их в других каналах коммуникации. Без общего хранилища им приходилось пересылать файлы друг другу и зависеть от того, у кого сохранился оригинал. Если коллега был недоступен или уходил в отпуск, найти нужный материал становилось ещё сложнее.
Бизнес-мотивация
Чтобы клиенты могли быстро собирать рассылки на потоке, работа с изображениями должна была стать частью самого конструктора: загрузить файл, найти ранее добавленный, выбрать его и использовать повторно – без переключения между Mindbox, локальными папками и переписками.
К тому же нужно было дать команде клиента общее пространство с актуальными материалами, чтобы ускорить сборку писем, помочь поддерживать порядок и снизить зависимость сотрудников друг от друга.
Мой вклад
- Получил вводные от продакт-менеджера, сформулировал уточняющие вопросы и инициировал второй раунд исследования.
- Определил скоуп сценариев, которые должна закрыть галерея.
- Спроектировал загрузку, выбор, повторное использование и удаление изображений.
- Продумал организацию изображений по папкам.
- Подготовил чистовые макеты и интерактивный прототип.
- Протестировал решение на 15 клиентах и скорректировал спорные места до реализации.
- Передал решение в разработку и сопровождал запуск.
Подробнее про ключевые проблемы и решения
Спроектировал полный путь работы с изображением
Проблема
Раньше работа с изображением сводилась к разовой загрузке. Пользователям приходилось каждый раз искать файл на компьютере и загружать его заново, а в продукте не было места, где можно сохранить изображение, вернуться к нему и управлять им.
Решение
Я спроектировал галерею как единое место для хранения и повторного использования изображений. Пользователь может загрузить файл, увидеть результат, выбрать его в следующей рассылке, переименовать или удалить. Для ключевых действий я продумал empty, loading и error states, ограничения файлов и обратную связь интерфейса.
Что изменилось
Изображение достаточно загрузить один раз – оно сохраняется в продукте и остаётся доступным для следующих рассылок.
Показать макеты в Figma
Помог быстро находить и различать изображения
Проблема
В общей медиатеке быстро накапливаются похожие изображения и версии одного файла под разные форматы. Пользователь может помнить только часть названия, не видеть размеры по превью, а после загрузки – потерять новый файл среди уже существующих.
Решение
Я добавил поиск по части названия с подсветкой совпадения. В tooltip вывел полное название и размеры изображения, а новые загрузки выделил зелёным и поместил вверх списка, чтобы их можно было сразу заметить в галерее.
Что изменилось
Пользователю стало проще найти нужный файл, отличить похожие версии и сразу перейти к только что загруженному изображению.
Поиск по части названия
Организовал медиатеку с помощью папок
Проблема
По мере накопления файлов галерея превращалась в сплошное полотно изображений. Материалы разных маркетинговых кампаний, проектов и брендов смешивались, а без смысловой группировки становилось всё сложнее поддерживать порядок и находить нужное.
Решение
Я добавил папки и спроектировал все основные действия с ними: создание, переименование, удаление и перенос изображений. Пользователь может группировать материалы по нужным ему смысловым единицам и сохранять порядок по мере роста медиатеки.
Что изменилось
Вместо плоского полотна изображений появилась понятная структура, которая упрощает навигацию и регулярную работу с материалами.
Показать макеты в Figma
Улучшил решение после запуска
Проблема
В первой версии галереи я разместил загрузку изображения с компьютера и загрузку по ссылке на разных вкладках. В дизайн-системе ещё не было подходящего паттерна, который позволил бы явно и компактно объединить оба контрола на одном экране, а сценарий загрузки по ссылке казался второстепенным.
После запуска выяснилось, что для части клиентов добавление по ссылке – это основной сценарий, поэтому при каждой загрузке им приходилось совершать лишний переход между вкладками.
Решение
Когда в дизайн-системе появились «островки» для визуальной группировки, я предложил команде вынести оба способа добавления на один экран, обосновал ценность доработки и договорился о ресурсе разработки.
Что изменилось
Частый сценарий стал доступен сразу, а экран сохранил понятную визуальную иерархию.
Показать макеты в Figma
Сделал вход в галерею изображений очевиднее
Проблема
Раньше галерея открывалась только по клику на маленькую иконку внутри контрола. Точка входа была неочевидной, поэтому часть клиентов не понимала, как открыть галерею.
Решение
Я доработал сам контрол в дизайн-системе: сделал кликабельной всю его область, а не только маленькую иконку. Теперь пользователь может открыть галерею кликом по любой части контрола – без необходимости искать отдельную точку входа.
Что изменилось
Вход в галерею стал заметнее и предсказуемее – пользователю больше не нужно попадать в маленькую иконку, достаточно кликнуть по самому контролу.
Показать макеты в Figma
Результаты подробнее
Закрытые клиентские запросы
Что измеряли: количество клиентов, чьи обращения были связаны с отсутствием полноценной работы с изображениями.
- Результат: закрыты обращения 16 клиентов
- Что появилось: загрузка, хранение, повторный выбор, удаление и организация изображений
Влияние. Галерея закрыла накопленный пласт клиентских задач и убрала повторяющуюся ручную работу с файлами.
Проверка решения на клиентах
Что измеряли: масштаб качественной проверки ключевых сценариев до реализации.
- Результат: прототип протестирован на 12 клиентах
- Проверяли: понятность структуры, загрузку, выбор, повторное использование и управление изображениями
Влияние. Проверка на клиентах позволила до начала разработки подтвердить, что решение закрывает ключевые задачи, проверить понятность сценариев и снизить риск последующих переработок.
Влияние на переход в новый конструктор
После запуска галереи многие клиенты отметили, что работа с нашим конструктором значительно упростилась. Четверо клиентов после этой доработки полностью перешли на новый конструктор.
Влияние. Галерея стала не только улучшением удобства, но и продуктовым аргументом в пользу перехода на новый инструмент создания рассылок.
Что изменилось для продукта
Клиентам больше не нужно начинать работу с изображениями заново при создании каждой рассылки. В Mindbox появился единый сценарий работы с изображениями: файлы можно хранить, находить, повторно использовать и структурировать, не возвращаясь к локальным папкам. Галерея стала самостоятельной частью продукта и основой для работы с изображениями не только в email-конструкторе, но и в других каналах.
