TickPoint: мультилендинг для сервиса ремонта судов
Веб-приложение превращает план судна в рабочий список: точки работ на чертеже, теги, комментарии, выгрузка на верфь. Категорию в поиске не ищут — софтовые формулировки дают ноль показов в месяц, поэтому сайт работает не на трафик, а на демонстрацию и пробный период. Разбор того, как под B2B-продукт собрали посадочные под задачи техменеджера.
Задача
Действующий сайт партнёра закрыт от индексации, без цен и кейсов; из фирстиля — акцентный цвет и гарнитура. Читают его с десктопа в офисе и с телефона в доке. Нужны страницы, которые отличаются предметом, а не заголовком: у каждой задачи своя боль, свои доказательства и свой состав экранов. Иначе набор страниц под одну подстановку — дорвей и в глазах поиска, и в глазах инженера.
Что сделано
Ниша и соперники
Спрос замерен по четырём сегментам по живой выдаче; разобран ближайший зарубежный аналог. По разрывам страниц принята резолюция: шесть блоков обязательны, часть заведена пустой до данных партнёра, часть отклонена.
Направление дизайна
«Чертёж общего плана»: первый экран — продольный разрез и три палубы с помещениями, двенадцать работ стоят на своих местах. Акцент и гарнитура сняты замером с продукта, а не придуманы.
Канвас как источник
Страницы разложены на блоки-артборды; вёрстка снимается из канваса и собирается скриптом, руками не правится. Сверка производной вёрстки с утверждённой на 1440, 991, 768 и 375 px — 0 различающихся пикселей.
Графика и интерактив без JS
Шесть настоящих экранов сервиса переключаются вкладками; фильтр состояний гасит на плане и в ведомости всё, кроме выбранного; точка на плане раскрывает карточку работы. Всё на CSS, работает с клавиатуры и уважает prefers-reduced-motion.
Посадочные под задачи
Дефектация, докование, план судна, приёмка из ремонта, ремонтная ведомость и страница для судовладельцев: у каждой общие блоки плюс два-три своих. Цена страницы считается своими блоками, а не целой страницей.
Результат
Семь страниц готовы в статике под контракт переноса в WordPress и Greenshift. На главной и странице для судовладельцев детектор анти-паттернов не нашёл ничего; на 390 px — без прокрутки вбок и без тап-целей меньше 44 px. Перенос на домен партнёра и открытие для поиска — следующий этап, после его материалов. Имена клиентов, суда и числа пользователей в кейс не выносятся.
На телефоне
Сайт читают с телефона в доке, поэтому план судна и ведомость проверялись на 390 и 320 px: без прокрутки вбок, тап-цели не меньше 44 px.
Другие кейсы
У автора курса не было бренда. Три визуальных мира на одних текстах, главная и посадочные в каждом, сайт собран из канваса без ручной вёрстки и выкачен статикой.
Старый сайт потерян вместе с доменом. Новый статический сайт на 14 страниц в мире «Счёт по нулям», три посадочные под спрос и честная бронь на формах.
Юридическая практика выходила на четыре языковые аудитории одним сайтом. Дизайн перенесён в WordPress попиксельно, поверх легла SEO-обвязка: меты, микроразметка, карта сайта и языковые версии.
Продукт для узкой B2B-ниши, которую не ищут в поиске?
Сайт такого продукта продаёт демонстрацию, а не позиции. По описанию продукта и покупателей отвечу, какие страницы нужны и чем они должны отличаться друг от друга.