Геймифицированная лид-форма с карточной механикой
- РольWeb & Interaction Designer
- Зона ответственностиКонцепция, логика сценария, UI, интерактивный прототип, анимации
- ПлатформаDesktop Web
- ПродуктAgreegain
Контекст и ограничение бизнеса
Agreegain собирал B2B-лиды через трёхшаговую форму из 15 обязательных полей. Уменьшить количество данных было нельзя: PAM-система, лицензии, регионы и другие параметры были необходимы отделу продаж для первичной квалификации клиента.
При этом сама задача от бизнеса была сформулирована очень просто:
"Форма выглядела слишком скучно — хотелось сделать её более интересной и вовлекающей."
Дизайнерский вызов
Как превратить обязательную B2B-анкету из 15 полей в самостоятельный интерактивный опыт, не потеряв ни одного необходимого параметра?
Исходное направление
Стейкхолдер предложил формат интерактивного «официального письма». Я проработал эту концепцию в wireframes, но увидел возможность изменить не только визуальную подачу формы, а сам принцип взаимодействия.
Моя концепция
Я предложил переосмыслить сценарий через механику блекджека.
Связь с казино естественно продолжает продуктовую среду Agreegain, а каждый ответ можно превратить в игровой ход: пользователь вытягивает карту вместо выбора пункта в обычном списке.
Концепцию утвердили после демонстрации промежуточного прототипа.
Ключевые решения
Разделение сложной формы на игровые раунды
Вместо одной длинной последовательности я разбил 15 параметров на 7 коротких раундов. Первые шаги состоят только из выбора карт — пользователь не сталкивается со всей сложностью формы и не должен сразу переходить к клавиатурному вводу.
Контактные данные остаются на финале
Имя, компания и контакты появляются только в последнем раунде. Это позволяет сохранить первые шаги полностью интерактивными и продолжить игровую механику до момента, когда сценарий переходит к отправке заявки.
Состояния выбора и контроль сценария
В вопросах с несколькими вариантами выбранные карты остаются на столе и визуально фиксируются. Confirm появляется после первого выбора и позволяет пользователю самому завершить ход.
Interaction & Motion
Интерфейс должен был ощущаться как игра
Крупье не является декоративным персонажем: он задаёт контекст перед вопросом и реагирует после выбора карты.
Сами карты имеют физическое поведение — при hover приподнимаются, при выборе фиксируются на столе, а колода показывает продвижение по сценарию.
Interactive Prototype — главный визуальный момент
Полный интерактивный прототип
После утверждения концепции я собрал весь сценарий в Figma — переходы между раундами, состояния карт, реплики крупье и микроанимации.
Промежуточный прототип из нескольких экранов использовался для согласования направления до полной проработки сценария.
Результат
Концепция
Blackjack-направление и логика сценария были утверждены продуктовой командой и руководством.
Prototype
Полный интерактивный прототип с состояниями и анимациями был подготовлен для дальнейшей разработки
Статус
Проект остановился на стадии подготовки к реализации после моего ухода из компании
post-launch метрики мне недоступны.
B2B Client Portal
Дашборд, Product Board и UI-система для управления B2B-платформой и её расширением.
Смотреть кейс
B2B-платформа автозапчастей
Редизайн сложного закупочного сценария: поиск, корзины, заказы и аналитика.
Смотреть кейс