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