Daria Tsukali
Product Designer · UX/UI
С 2019 года проектирую интерфейсы, с 2023-го — в продуктовом дизайне: веду задачи от интервью и гипотез до макетов и дизайн-системы. Открыта к предложениям из разных индустрий. Работаю удалённо из Бишкека, английский B2.
Конструктор витрин
- Роль
- Product Designer
- Команда
- Продуктовая команда и разработчики компании, пользователи из отдела монетизации
- Формат
- Штат, Click2Money
- Дата
- 2024
- Стек
Результат
Отдел монетизации собирает витрину за минуты, а не ждёт разработчика часами и днями
Контекст
Витрина в Click2Money это страница со списком предложений рекламодателей, на которую отдел монетизации направляет трафик и на которой проверяет гипотезы: через витрины шла заметная часть выручки отдела. Собирали их вручную, менеджер описывал, разработчик верстал, и с ростом трафика даже простая витрина ждала очереди на разработку.
Редактор или конструктор
Продуктовая команда, и я в том числе, хотела визуальный редактор, как у конкурентов, но разработчики оценили его как долгий и дорогой: шаблонов много, и редактор пришлось бы поддерживать почти под каждый. От редактора отказались всей командой, а задача осталась: отдел запускает витрины без разработки.
Интервью и первая версия
Чтобы понять, что в конструкторе необходимо, провела 8 глубинных интервью с внутренними отделами компании и выделила основной сценарий: указать страну и домен, подобрать предложения, расставить их по порядку, настроить вид и сохранить. Всё, что в этот путь не входило, выносила за пределы первой версии, а когда просили добавить ещё одну функцию, возвращалась к интервью: решает ли она задачу из основного сценария. Первый вариант сценария не прошёл юзабилити-тесты, и я переделала его до релиза. Всего за проект провела 10 юзабилити-тестов.
Встраивание в другие проекты
После запуска конструктор понадобился другим проектам компании с другими интерфейсами, и разработчики решили встраивать его через iFrame, то есть вставлять внутрь чужих страниц. Я пересобрала интерфейс под этот формат на готовой дизайн-системе Chakra, заново проверила сценарии на юзабилити и заодно убрала то, что в первой версии осталось компромиссом ради скорости.
Шаблоны
Из интервью вышло, что визуальный дизайн на конверсию не влияет, а почти весь трафик мобильный, поэтому задача шаблона уместить как можно больше предложений на одном экране телефона. Шаблоны собрала на отдельной дизайн-системе на токенах, о ней рассказываю в отдельном кейсе.
Настройки: страна и язык, свой домен, аналитика и уведомления о проблемах с предложениями
Шаблон: акцентный цвет, тема и вид карточки предложения, превью сразу рядом
Контент: блоки витрины по порядку, у баннера своя картинка и своё предложение
Группа предложений: заголовок, дизайн карточек и их вид на телефоне и десктопе
Промо-окна: когда и где всплывают и какое предложение ведут
Инструкция: ответы на частые вопросы по каждой вкладке открываются поверх витрины
Первая версия: настройки, список предложений с порядком и вид карточки на одной странице
Так собранная в конструкторе витрина выглядит на телефоне: один шаблон в тёмной и светлой теме с разными акцентами