Пользователи часто ищут праздничные темплейты, которых в галерее не хватает.
Падение метрики Time-to-Task при поиске нужного темплейта, из-за отсутствия функциональной системы фильтрации по категориям.
Скрытая навигация, из-за которой были обращения в поддержку с вопросами: «Где посмотреть остаток кредитов?» и «Как отменить/изменить тариф?».
«Слетала» генерация в модальном окне, много генераций прерывались из-за того, что пользователи случайно кликали на зону за пределами модалки, закрывая окно процессинга.
Крупные селлеры и маркетинговые агентства упирались в лимит единственного тарифного плана, есть необработанный спрос на "Бизнес тарифы".
Я перевела боли пользователей в продуктовые гипотезы. Задача состояла в стремительном развитии и улучшении продукта (после выхода с этапа MVP), поэтому гипотезы приоритезировали по критериям "влияние" и "уверенность".
Выбрали следующие:
Гипотеза 1: Если вынести фильтры категорий (VFX overlay, Packshot, UGC, Abstract) в горизонтальный скролл-бар над поисковой строкой на главном экране, это сократит Time-to-Task.
Гипотеза 2: Переход от модального окна к выделенному экрану генерации с пошаговым степпером и раскрывающейся панелью Advanced Settings (ракурсы, пол модели, числовой инпут) снизит Drop-off rate на этапе процессинга.
Гипотеза 3: Перенос разделов меню из выпадающего списка профиля в сайдбар снизит когнитивную нагрузку, и позволит добавлять новые фичи, не перегружая экран настроек.
Гипотеза 4: Создание таба Profile в сайдбаре с выводом статуса тарифа, даты обновления и баннером апсейла, повысит конверсию в апгрейд подписки.
Следующим этапом работы было составление флоу обновленного веб-приложения. За время работы над вынесенными гипотезами и выпуском нового функционала накопилось много таких флоу..)
Визуализация решения и дизайн-система
Создание фирменного стиля и прототипирование
Поскольку стояли две важные задачи — редизайн и расширение функционала, я параллельно вела два процесса: собирала низкоуровневые прототипы для быстрой валидации флоу и закладывала фундамент дизайн-системы.
Так, за 3 месяца работы, в процессе выполнения потоковых задач, я сформировала новый UI-кит, который стал основой полноценной дизайн-системы.
Интеграция дизайн-токенов в разработку
Чтобы исключить человеческий фактор и ускорить верстку, я построила сквозной процесс передачи визуальных параметров (цветов, отступов, радиусов, типографики) напрямую в код.
С помощью плагина вся база токенов преобразуется в структурированный .json файл и экспортируется в виде ZIP-архива. Разработчику достаточно подтянуть этот JSON-файл в свой проект, и все переменные на стороне фронтенда обновляются автоматически.
Результат: Любое изменение цвета или отступа в Figma применяется в коде за секунды. Это убрало недопонимания между дизайном и разработкой, сократило время на UI-ревью и ускорило сборку интерфейса в несколько раз.
Проектирование состояний и Handoff
Для каждого интерактивного элемента (инпуты, кнопки, чипсы) я проработала полную матрицу состояний: Default, Hover, Focus, Active, Disabled, а также пограничные состояния (длинный текст, пустые инпуты).
Описала логику поведения компонентов и добавила отдельную страницу с документацией в Figma. Как результат — чистая реализация pixel-perfect без бесконечных созвонов и правок.
UX-тестирование и инсайты
Когда интерактивные прототипы ключевых сценариев были готовы, я провела серию тестов, отправив ссылку на прохождение флоу команде, друзьям, и парочке сговорчивых постоянных пользователей. Нам важно было понять, насколько интуитивно взаимодействие с ИИ-редактором, прозрачна ли механика дополнительных настроек, системы подписок.
Инсайты:
Пользователи высоко оценили удобство новой фильтрации темплейтов на главной странице.
Часть респондентов испытывала трудности с пониманием ценности платных пакетов и логики списания кредитов, не хватало явного фокуса на стоимости действия. Чтобы добавить прозрачность, я переработала логику кнопки генерации — теперь на ней жестко зафиксирована стоимость операции (Generate - 10 credits), что предотвращает случайные клики.
На этапе выбора целей использования приложения (Onboarding) пользователи путались в абстрактных формулировках. Процесс был упрощен до четырех понятных бизнес-целей, влияющих на персонализацию стартового экрана.
На этапе ожидания генерации контента, не хватило конкретики — сколько ждать, сохранится ли результат, если закрыть редактор, где потом искать готовый контент. Поэтому я поговорила с разработчиками, и добавила таймер ожидания генерации, а также пояснительный текст.
После сборки и раскатки тестовой версии платформы на dev, я провела комплексное дизайн-ревью. Собрала лог интерфейсных багов и несоответствий с макетами (отступы, поведение автолейаутов). Большинство несоответствий были исправлены фронтенд-разработчиками до релиза на проде.
🎉Итоговый дизайн макетов
Сравнительное до/после главной страницы
Личный кабинет и подписка
Поиск темплейта по ключевым словам
Загрузка, настройка, и рендер контента
Мы провели совместный груминг с PO по планам на следующие спринты. Ближайший приоритет — запуск А/Б теста для проверки гипотез по оптимизации конверсии в платные подписки, сбор и анализ количественных данных в Mixpanel, а также запуск повторных глубинных интервью и UX-тестов, чтобы собрать обратную связь по реальному повседневному опыту использования платформы.