От прототипа к вовлекающему интерактиву: дизайн панели для Credit Europe Bank
О проекте
Мы подключились к проекту, когда банк решил попробовать новый способ коммуникации в офлайне. Цель была простой, но нетривиальной: показать технологичность банка через развлекательный, интуитивный опыт.
Панель не предназначена для генерации лидов, а создаёт спонтанное взаимодействие с посетителями ТЦ «Депо». Пользователи могут попробовать интерактив с ИИ без установки приложений и регистрации.
Панель не предназначена для генерации лидов, а создаёт спонтанное взаимодействие с посетителями ТЦ «Депо». Пользователи могут попробовать интерактив с ИИ без установки приложений и регистрации.
На входе у нас были готовые прототипы панели — они показывали логику пользовательского пути и порядок шагов, но оставляли пространство для дизайнерских решений. Наша задача заключалась в визуальной реализации: сделать интерфейс заметным, понятным и соответствующим брендбуку банка.
СПЕЦИАЛИСТЫ ПРОЕКТА
1 Дизайнер
|
1 PM
|
Задачи
Адаптировать прототипы под офлайн-панель
Привести сценарий в линейный вид
Сделать интерфейс заметным в торговом центре
Интегрировать айдентику банка
В ходе работы мы детализировали каждый экран и сценарий, согласовывая логику и визуальные решения с заказчиком.
Решение
Сократили путь пользователя до ключевых шагов: активация панели, съёмка, генерация образа, скачивание через QR‑код. Элементы экранов переместили с учётом позиции пользователя и зоны внимания.
Убрали лишние экраны и переходы. Последовательность действий интуитивна без инструкций.
Увеличили ключевые элементы и подсказки, чтобы они были легко различимы и доступны для взаимодействия.
Применили фирменные цвета, шрифты и иконки, адаптировав их под формат большого интерактивного экрана.
детали проекта
Вводные данные
Что получили на входе
Прототип панели:
служил для общего понимания логики пути пользователя. Расположение экранов, зоны взаимодействия и адаптация под движения посетителей продуманы нами, чтобы обеспечить цельный и удобный интерактивный опыт.
служил для общего понимания логики пути пользователя. Расположение экранов, зоны взаимодействия и адаптация под движения посетителей продуманы нами, чтобы обеспечить цельный и удобный интерактивный опыт.
Фирменная айдентика:
цветовая палитра, шрифты, логотипы и визуальные элементы. В условиях ограниченного времени уточняли детали по открытым источникам и материалам параллельной команды, которая готовила видео для панели.
цветовая палитра, шрифты, логотипы и визуальные элементы. В условиях ограниченного времени уточняли детали по открытым источникам и материалам параллельной команды, которая готовила видео для панели.
Макет стенда:
конструкция панели с размерами, раскадровки и метражи. Эти данные определяли расположение экранов, элементов интерфейса и комфорт использования панели для посетителей разного роста.
конструкция панели с размерами, раскадровки и метражи. Эти данные определяли расположение экранов, элементов интерфейса и комфорт использования панели для посетителей разного роста.
Опыт предыдущих стендов:
использовался как ориентир для успешных решений в офлайне.
использовался как ориентир для успешных решений в офлайне.
Мы провели детальный анализ этих исходных данных и нашли, где прототип требовал проработки.
Макет был достаточен, чтобы понять путь пользователя, но нам нужно было продумать физические зоны взаимодействия, последовательность действий и визуальные акценты, чтобы опыт был цельным и понятным.
Макет был достаточен, чтобы понять путь пользователя, но нам нужно было продумать физические зоны взаимодействия, последовательность действий и визуальные акценты, чтобы опыт был цельным и понятным.
детали проекта
Как мы реализовали проект
Логика пользовательского пути
Мы спроектировали интерфейс как последовательность экранов с чётко заданной логикой и понятным следующим шагом, без лишних переходов и «мертвых зон».
Сплеш-скрин и видеоролик
привлекают внимание, задают контекст интерактива и автоматически готовят пользователя к следующему шагу.
привлекают внимание, задают контекст интерактива и автоматически готовят пользователя к следующему шагу.
Экран съёмки:
камера и элементы интерфейса расположены так, чтобы лицо попадало в кадр, а кнопки и подсказки находились в центре внимания. Пользователь видит всё, что нужно, и не отвлекается.
камера и элементы интерфейса расположены так, чтобы лицо попадало в кадр, а кнопки и подсказки находились в центре внимания. Пользователь видит всё, что нужно, и не отвлекается.
Экран генерации образа:
результат визуализации появляется сразу после съёмки. Элементы выстроены по центральной оси, чтобы пользователь интуитивно понимал, где смотреть и что делать дальше.
результат визуализации появляется сразу после съёмки. Элементы выстроены по центральной оси, чтобы пользователь интуитивно понимал, где смотреть и что делать дальше.
Экран выдачи с QR‑кодом:
крупный, считываемый с расстояния. Позволяет мгновенно скачать изображение и встроен в поток интерфейса без лишних действий.
крупный, считываемый с расстояния. Позволяет мгновенно скачать изображение и встроен в поток интерфейса без лишних действий.
Так мы обеспечили простой и предсказуемый путь: от подхода к панели до получения результата
Учёт физических и технических ограничений
Конструкция стенда определяла расположение экранов и взаимодействие с пользователем. Интерфейс спроектирован с учётом этих ограничений:
Центральная зона внимания
важные кнопки и подсказки вынесены в центр, взгляд пользователя остаётся на ключевых элементах.
важные кнопки и подсказки вынесены в центр, взгляд пользователя остаётся на ключевых элементах.
Удаление лишних элементов сверху
чтобы не отвлекать внимание и не заставлять высоко поднимать голову.
чтобы не отвлекать внимание и не заставлять высоко поднимать голову.
Расположение элементов относительно камеры
лицо пользователя всегда попадает в кадр, интерфейс остаётся интуитивным.
лицо пользователя всегда попадает в кадр, интерфейс остаётся интуитивным.
Экран с QR‑кодом
крупный, хорошо видимый с расстояния, позволяет мгновенно скачать изображение.
крупный, хорошо видимый с расстояния, позволяет мгновенно скачать изображение.
Взаимодействие получилось естественным, удобным и предсказуемым.
Дизайн и визуальный язык
Мы связали визуальный язык с задачей: показать технологичность и работу ИИ через игру и интерактив.
Ритм экранов
баннеры, подсказки и графические акценты направляют пользователя, не перегружая внимание.
баннеры, подсказки и графические акценты направляют пользователя, не перегружая внимание.
Игра и вовлечённость
лёгкая анимация и динамика экранов создают эффект присутствия, усиливая интерактив.
лёгкая анимация и динамика экранов создают эффект присутствия, усиливая интерактив.
Согласованность с брендом
цвета, шрифты и графические элементы отражают айдентику и технологический образ банка.
цвета, шрифты и графические элементы отражают айдентику и технологический образ банка.
Каждый элемент направляет действия пользователя и подчёркивает технологичность интерактива.
Продуктовые решения
Мы связали визуальный язык с задачей: показать технологичность и работу ИИ через игру и интерактив.
Все активные элементы размещены в центре, чтобы взгляд пользователя оставался на ключевых точках.
Круговая форма камеры гармонирует с интерфейсом и корректно фиксирует лицо.
Кнопки увеличены, тексты сокращены, элементы управления интуитивны.
Экран с QR‑кодом крупный, легко доступный и встроенный в поток интерфейса.
Все решения объединены одной целью: создать понятный, предсказуемый и вовлекающий интерактивный опыт.
Итоги проекта
Бизнесовые результаты
Панель готова к использованию и обеспечивает увлекательный опыт: пользователи понимают последовательность действий, видят результат своих действий и могут мгновенно скачать его.
Панель демонстрирует технологический образ банка и привлекает внимание посетителей ТЦ.
Панель демонстрирует технологический образ банка и привлекает внимание посетителей ТЦ.
Технические результаты
Интерфейс работает стабильно, анимации и интерактивные элементы отрабатывают корректно.
Расположение элементов учитывает удобство пользователей.
Расположение элементов учитывает удобство пользователей.
Организационные результаты
Проект выполнен в срок, все этапы согласованы, критические вопросы решены. Интерфейс готов к расширению функционала в будущем.
Мы создали полностью готовое решение, которое помогло достичь всех целей проекта.
Также остались идеи для следующих итераций: например, внедрение лидогенерации через e‑mail или Telegram-бота.
Мы создали полностью готовое решение, которое помогло достичь всех целей проекта.
Также остались идеи для следующих итераций: например, внедрение лидогенерации через e‑mail или Telegram-бота.