Задача
Инфраструктурный продукт трудно продать одним экраном. Решение принимает платёжный провайдер или финтех-компания, и до первого письма им нужно понять, что шлюз закрывает, подходит ли он под их случай и с чего начинается интеграция.
Поэтому объясняет сама страница. Мы разложили продукт на блоки, и у каждого блока одна задача: что шлюз делает, кому он нужен, как подключиться. Фотографировать в платёжной инфраструктуре нечего, поэтому вся графика на странице — свои 3D-рендеры.
Что сделали
Первый экран сайта платёжного шлюза
Страница открывается предложением обычными словами: платежи под вашим брендом. Ниже один абзац о том, что такое шлюз и что он снимает с клиента.
Рядом с заголовком — 3D-объект с карточкой прошедшего платежа. Одна кнопка ведёт вниз по странице, и всё, что нужно для решения, лежит на ней же — потеряться негде.
Что шлюз делает — по блокам
Следующий блок перечисляет, что закрывает платформа: одна интеграция вместо многих эквайеров, правила маршрутизации и токены карт, локальные методы оплаты, REST API и страница оплаты на своей стороне. Под ним — логотипы платёжных систем, охват виден без таблицы.
Дальше девять коротких карточек: эквайринг, локальные методы, маршрутизация, риск-проверки, кабинет мерчанта, white label, разработка, подключение и где всё это работает. В каждой по две строки — провайдер осматривает продукт за минуту.
Кому нужен white-label шлюз
Четыре аудитории, у каждой своя карточка: мерчанты, которые принимают платежи за рубежом; высокорисковые направления, которым нужно разводить объём по эквайерам; финтех, встраивающий оплату внутрь продукта; и провайдеры, перепродающие шлюз под своим брендом.
Блок ниже рассказывает, кто делает и держит платформу, с именами контактов. Для такого продукта это не менее важно, чем список функций: покупатель выбирает поставщика, а не только софт.
Своя 3D-графика вместо стоков
Вся страница держится на нашей графике: каркасные объекты в преимуществах, изометрические сцены рядом с блоками возможностей и внутри карточек сценариев.
У них одна палитра и один свет, поэтому сайт читается как целое, а не как набор найденных картинок. И все изображения на странице принадлежат клиенту.
Техническая часть
Ниже — то, что измерено на живой странице: как быстро она открывается, что с неё читают поисковики и мессенджеры и что происходит после отправки формы.
Скорость
Скорость загрузки по замерам
Lighthouse ставит странице 97 из 100 за скорость загрузки на телефоне и 100 на компьютере.
Векторная графика с ленивой загрузкой
Из 58 изображений на странице 43 векторные, поэтому остаются чёткими на любом экране.
Как ведёт себя мобильная версия
На экране шириной 390 пикселей страница укладывается в ширину, вбок скроллить нечего.
Поиск и превью
Что со страницы читает поиск
По разделу SEO в Lighthouse страница набирает 100 из 100 и на мобильном, и на десктопе.
Ссылка разворачивается в карточку
Ссылка на сайт, вставленная в чат, разворачивается в карточку с картинкой, заголовком и описанием.
Надёжность
Обе формы закрыты от ботов
Две формы заявки закрыты Cloudflare Turnstile.
За посетителем никто не следит
Проверка не нашла на странице ни счётчиков, ни рекламных пикселей, ни менеджеров тегов.
Соединение только по https
Запрос по обычному http переадресуется на https, а браузеру сказано ходить только по https ближайшие два года.
Мобильная версия
Что получилось
- Сложный B2B-продукт объясняется на одной странице
- Заявка — в двух кликах из любой точки страницы
- Вся графика — свои 3D-рендеры, стоков нет
Первый разговор теперь ведёт сама страница. Провайдер читает, что закрывает шлюз, находит свой сценарий среди четырёх, видит, кто держит платформу, и пишет с этого же экрана. Объяснять базовые вещи на созвоне больше не нужно.
