Как Lynksen оживила сайт сложной B2B-платформы с помощью Spline

Elecctro создаёт программные системы для автоматизированных сервисов без персонала — торговых автоматов, зарядных станций для электромобилей и автоматических автомоек. Их продукты охватывают и железо, и софт и работают в сегменте рынка, который исторически общался с B2B-покупателями через громоздкие спецификации и технические схемы. Миссия компании — модернизировать сервисы без персонала с помощью умных подключённых решений.

Elecctro нужен был сайт. Но не какой угодно. Такой, который удержит внимание покупателя достаточно долго, чтобы действительно объяснить, чем занимается компания, визуально выделит её среди десятков похожих компаний и быстро подведёт посетителя к решению.

«Им нужно было передать много информации, — рассказывает Таня, менеджер проекта в Lynksen, агентстве цифрового дизайна, которое пригласили переделать сайт. — Но они также хотели выделиться в очень технологичной нише».

Ответом стало не больше контента, а совершенно иной тип интерактивного интерфейса.

Главная, которую исследуют, а не просто читают

Ключевая идея Lynksen была обманчиво простой: позволить пользователям исследовать систему, а не объяснять её одними словами.

Главная страница превратилась в интерактивную 3D-сцену — пространственный обзор всей линейки продуктов Elecctro, где можно наводить курсор, кликать и перемещаться в своём темпе. Каждый объект в сцене ведёт на отдельную страницу продукта. Путь от «что это за продукт?» до «я готов обсудить» сократился до нескольких кликов.

Пользователи заходят на главную, видят всё, делают один клик — и уже движутся к тому, чтобы передать Elecctro нужную информацию.

Это был существенный сдвиг. Большинство B2B-сайтов используют главную как оглавление. Lynksen сделала главную Elecctro пространством, по которому перемещаются, а не текстом, который читают сверху вниз.

Почему Spline?

Видение было ясным, но как его воплотить?

Традиционные 3D-инструменты отпали сразу. Одно только их освоение съело бы весь проект. А главное, команда Elecctro должна была сама поддерживать сайт после запуска. Значит, никаких непрозрачных конвейеров, никакой зависимости от узких специалистов, никаких инструментов, на освоение которых уходят месяцы, лишь бы поменять один ассет.

Lynksen оценила Spline и увидела другой путь:

• Создавать и итерировать в одной среде.
• Прототипировать взаимодействия прямо в инструменте.
• Выпускать готовые к продакшену ассеты без сложной цепочки передачи.

Мы прошли путь от почти нулевого опыта до полноценного проекта с первой попытки.

Сделать это позволили не только инструменты, но и сообщество. Ещё до первой строчки кода команда Lynksen провела время в библиотеке сообщества Spline: изучала ремиксы, разбиралась, как другие дизайнеры подходят к взаимодействиям, и подбирала приёмы, которые можно адаптировать для клиентского проекта.

Такое место, как сообщество Spline, — с разными проектами и возможностью сделать ремикс и посмотреть, как люди подходили к разным взаимодействиям, — очень помогло нам в обучении.

Для Elecctro был важен ещё один фактор — долговечность.

Им нужно было решение, которым их команда сможет по-настоящему владеть после запуска.

Не нужно быть сильно технически подкованным, чтобы добавить объект, сделать другое взаимодействие и поддерживать проект после того, как мы его передадим. Для нас это было ключевым преимуществом.

Создание опыта

Процесс Lynksen начался вообще без движения.

Статичные вайрфреймы. Плоские макеты интерфейса. Чёткая информационная иерархия — ещё до появления первой анимации. И только когда структура стала прочной, команда начала добавлять слои.

«Мы всегда начинаем со статики, а потом добавляем анимацию слой за слоем, — говорит Таня. — Мы определяем ключевые состояния в вайрфреймах и скетчах, а при реализации настраиваем движения камеры, играем с анимациями и следим, чтобы всё сложилось так, как задумано».

Эта дисциплина не дала проекту рухнуть под тяжестью собственных амбиций. Команда придерживалась простого принципа: движение поддерживает повествование.

На практике это означало:

• Едва заметные состояния при наведении и микровзаимодействия на 3D-ассетах
• Появление элементов при скролле, которое направляет внимание, не требуя его
• Переходы камеры, которые помогают сориентироваться, а не ослепляют
• Выразительность — для второстепенных моментов (футер, страница 404), где маленькие сюрпризы радуют, а не отвлекают

Страница 404 стала одной из любимых у команды. Полностью созданная в Spline, она позволяет кликать и открывать спрятанные 3D-ассеты. Маленькая пасхалка, которую большинство посетителей никогда не найдёт, но которую команда Lynksen явно с удовольствием делала.

«Здорово спрятать маленькую пасхалку, — говорит Росс. — Если кто-то её найдёт, мы как дизайнеры будем очень рады».

Детали 3D-иконок в навигационном меню сайта.

Результаты

Обновлённый сайт запустили, и цифры сразу пошли вверх.

Число активных пользователей выросло на 524%, а проект получил 5 наград.

Сайт набрал 20 000 новых просмотров, и дизайн-сообщество обратило на него внимание.

Эти результаты отражают то, что команда создавала осознанно: не просто красивый сайт, а по-настоящему эффективный. Такой, который работает и для покупателей, которым нужна ясность, и для команды клиента, которой нужно поддерживать его без штатного разработчика на подхвате.

Командам, которые думают о 3D

Командам, которые впервые задумываются о 3D в вебе, Таня советует просто: не начинайте с традиционных инструментов.

В Spline порог входа вполне посильный. За считаные дни человек с дизайнерскими навыками может в нём освоиться. Наша команда сделала крепкий MVP в первую же неделю работы.

Росс видит в этом более широкий сдвиг в подходе команд к 3D: вместо того чтобы собирать воедино несколько сложных инструментов и процессов, можно проектировать, итерировать и выпускать в одной среде — и интерактивное 3D с самого начала становится гораздо доступнее.

Если хотите работать в одной среде без глубоких технических знаний и выпускать именно то, что видите, — выбирайте Spline.

Для дизайн-агентств, которые предлагают клиентам интерактивные веб-проекты, этот проект — убедительное доказательство: с правильным инструментом можно за один проект пройти путь от нулевого опыта до сайта-призёра.

Начните работать со Spline

Как и Lynksen, агентства могут использовать Spline, чтобы помогать клиентам рассказывать о сложных продуктах через интерактивный опыт — более понятный, простой в поддержке и запоминающийся.

Для Elecctro это означало превратить техническую B2B-платформу в интерактивный сайт, который проясняет продукт, ускоряет принятие решений и помогает бренду выделиться на переполненном рынке.

Агентство вы, создающее проект для клиента, или внутренняя команда — Spline помогает быстрее пройти путь от идеи до продакшена, без сложного 3D-конвейера и узкоспециальных технических навыков.

Связаться с отделом продаж