Приклади B2B-сайтів: 11 сайтів компаній і що кожен робить добре

B2B-сайт читають двічі. Спершу одна людина поспіхом, яка за хвилину вирішує, чи пересилати посилання. Потім стіл людей, яких не було на першій розмові: фінансовий директор, юрист, керівник операцій, і кожен шукає свою відповідь. Перемагає сайт, який витримує друге читання.

Починаємо з власних B2B-робіт Figmatica, з відео з кейсів, бо там можна показати весь шлях від брифу до запуску. Далі девʼять B2B-сайтів, відзначених на конкурсах веб-дизайну: рекрутингова фірма, логістичний оператор, Ethereum-казначейство, підрядник підземних гірничих робіт, виробник матеріалів для ракет, фірма з AI-трансформації, софт для фінансових радників, виробник морських дронів і виробник палет. Для кожного те, що він робить добре, і що взяти у власне ТЗ.

Головне

• 01Показуйте послугу в роботі, а не в описі. Перший екран Acvian розгортає логотип у мережу людей і послуг; RothFinder ставить на перший екран порівняння «до і після» для клієнта.
• 02Три числа відповідають другому читачеві. United Carriers: 2 500+ відправлень на місяць, 98,2% вчасно. Aspen Search: 500+ працевлаштувань, пропозиції в діапазоні $1–5 млн.
• 03Показуйте роботу там, де вона відбувається. CoMinVi відкривається машиною в темній шахті, FMI ракетою над Землею, APC зйомкою свого двору з дрона.
• 04Дайте команді інструмент, а не сайт. Маркетологи Acvian самі збирають статті з CMS-блоків; клієнти United Carriers стежать за вантажем у живому порталі.
• 05Дизайн це причина вам повірити. Applica перебудувала бренд і сайт з Figmatica, і тепер більша частка візитів закінчується заявкою.

B2B-сайти від Figmatica

Агенція росту для мобільних застосунків, глобальний HR-партнер, компанія з розробки програм, стартап з аналітики даних, компанія із закупівлі реклами і консалтинг із систем управління в Німеччині. Шість B2B-бізнесів, шість різних покупців, одна робота для кожного сайту: змусити незнайомця довіритися компанії, з якою він ще не знайомий. Кожна картка програє сайт; нижче дві історії повністю.

ApplicaАгенція росту для мобільних застосунків. Бренд і сайт з нуля; більша частка візитів закінчується заявкою.AcvianГлобальний HR-партнер. 30+ сторінок на Webflow за 60 днів, переїзд з WordPress.HoverlaSoftКомпанія з розробки програм. Бренд і сайт з 3D-графікою.InvisiblesМіжнародна компанія із закупівлі реклами. Сайт для команди, що купує рекламу на різних ринках.JMHКонсалтинг із систем управління, Німеччина.Data RhythmЛендинг для стартапу з аналітики даних.

Сайт агенції: Applica, робота Figmatica

Applica допомагає мобільним застосункам нарощувати дохід, конверсії й утримання. До нас вона прийшла по одну річ, презентацію. Презентація вийшла кращою, ніж вони очікували, тож ми запропонували UX-дослідження, і за два місяці весь дизайн Applica перейшов до нашої команди: бренд, сайт, маркетингові матеріали, дизайн-система.

Сьогодні сайт одним рядком каже, що робить агенція: We build growth systems for mobile teams. Поруч не обіцянка, а доказ: картка кейсу, How AirHelp launched a global flight tracking app, 330 000 завантажень після запуску, середня оцінка 4,7 і 11+ локалізованих ринків; гайд; дзвінок зі стратегом. Під першим екраном ряд застосунків-клієнтів. Усе це для другого читача, того, хто перевіряє, чи агенція, яка продає ріст, може показати власний.

Почали з етапу дослідження: інтервʼю і аудит старого сайту, далі вайрфрейми для кожної сторінки, далі дизайн і збірка на Webflow. Після перезапуску більша частка візитів на сайт Applica почала закінчуватися заявкою, і сайт ріс разом з агенцією: послуги розділилися на ріст продукту й оптимізацію продукту, у кожної своя сторінка. Уся історія, від однієї презентації до виділеної дизайн-команди, у статті Як ми стали дизайн-відділом стартапу.

Сайт HR-сервісу: Acvian, робота Figmatica

Acvian допомагає компаніям наймати людей у будь-якій країні: бере на себе договори, виплату зарплат і документи, які захищають обидві сторони. Компанія переросла сайт на WordPress, і її ТЗ ставило поруч дві дороги: редизайн на тому самому WordPress або переїзд на Webflow, де маркетинг сам збирає сторінки. Ми прорахували обидві, виграли закритий тендер і зробили понад 30 сторінок за 60 днів.

Перший екран виріс з логотипа. Знак Acvian це маленьке деревце з точок і ліній; на головній воно розгортається в мережу: люди в колах, а між ними послуги, через які працівник проходить дорогою до нової компанії. Під заголовком по черзі друкуються три рядки: знайти таланти, найняти за 24 години, керувати командою і платити їй.

На перший показ ми принесли сім концепцій, від мережі з точок до акварельного пейзажу, людини на першому екрані, темної планети і цифрового футуризму. Acvian обрав першу і третю. Згодом клієнт сказав, що з трьох обирати було б легше, і відтоді ми показуємо щонайбільше три.

Частина, яку B2B-команда відчуває щотижня: статті, які маркетинг збирає сам. Маркетолог відкриває статтю в редакторі Webflow, натискає плюс і обирає блок: заголовок потрібного рівня, галерею, список, таблицю одного з трьох видів, банер із кнопкою, цитату клієнта. Відступи вже задані в дизайні. Уся дошка в кейсі Acvian, а сам переїзд у статті Редизайн чи новий сайт з нуля.

Що сказав операційний директор Acvian, коли ми спитали, в який момент він відчув, що проєкт іде в правильному напрямку.

«Цей момент стався на самому початку, коли ми отримали перші драфти дизайну. Ми попросили вас створити кілька візій нового сайту, бо нам потрібен був погляд збоку і дизайнерський підхід. Ми отримали кілька варіантів, порівнювали їх, ви прислухались до наших правок і пропонували свої ідеї. Завдяки цьому все вийшло дуже добре.»

Сайт рекрутингової фірми: Aspen Search

Aspen влаштовує інженерів, кількісних дослідників і фахівців з AI/ML у трейдингові фірми та технологічні компанії, і перший екран зроблено як трейдерський стіл: два живі годинники у верхній смузі, Нью-Йорк і Лос-Анджелес, сітка чорних, сірих і мʼятних панелей, назва величезними літерами. У мʼятній панелі позиція одним реченням: We don't move volume. We move careers that compound. Під нею Recent hires from і ряд логотипів.

Далі три числа для другого читача: 500+ працевлаштувань, пропозиції в діапазоні $1–5 млн, 19+ років у цих кімнатах найму. Головна кнопка каже Start a conversation, а нижче Talk to a partner.

Що взяти: одягніть сторінку у світ клієнта. Кількісний аналітик бачить годинники і сітку і розуміє, що фірма говорить його мовою, ще до першого слова.

Сайт логістичної компанії: United Carriers

Темний глобус, підсвічений помаранчевим уздовж маршрутів, і обіцянка капітелями: One operator, every leg of the journey. Експедирування, наземні перевезення і митне оформлення в Азійсько-Тихоокеанському регіоні під однією відповідальною командою. Над меню стрічка новин про ставки фрахту і два інструменти, якими клієнт користується щодня: калькулятор викидів і портал живого відстеження.

Числа йдуть одразу: 2 500+ відправлень на місяць, 98,2% доставок вчасно, підтримка 24/7 від живих людей. Текст називає біль, який знімає: ніхто не перекладає відповідальність між підрядниками, ніщо не губиться на передачах.

Що взяти: поставте щоденний інструмент клієнта в шапку. Портал відстеження поруч із логотипом каже, що стосунки тривають і після договору.

Сайт для інвесторів: Sharplink

Sharplink веде Ethereum-казначейство для інвесторів, і перший екран виглядає як скульптура: срібний кристал обертається в тунелі з білих стрічок, три слова, Ethereum with an Edge. Продає дрібний текст: казначейська платформа Ethereum інституційного рівня, розумніший і продуктивніший спосіб володіти ETH. У нижньому куті Proudly listed on Nasdaq, навпроти свіжа новина компанії.

Під скульптурою числа, які перевіряє інвестор: загальні запаси ETH і винагороди за стейкінг, наживо, з посиланням на повний дашборд ETH. Далі імена: компанію очолюють колишній керівник цифрових активів BlackRock і співзасновник Ethereum, і партнерів теж названо.

Що взяти: живі числа і справжні імена. Читач, який вкладає гроші, хоче бачити баланс і людей за ним на одній сторінці.

Сайт промислового підрядника: CoMinVi

Підрядник підземних гірничих робіт з Гуанахуато, і перший екран виглядає як кадр з фільму: машина з увімкненими фарами в темній печері, пил у променях, один рядок, Your trusted partner in underground mining. Біля машини пливе маленький лічильник: за весь час понад 1 000 000 погонних метрів. Дві картки в куті відкривають послуги і технології; сайт перемикається між англійською та іспанською.

Далі робота в шести числах: 1 млн погонних метрів, 20 млн тонн видобутої руди, 1,7 тис. прямих робочих місць, 5,1 тис. непрямих, 7 активних проєктів, 36 зданих. Кожна з пʼяти послуг має одне речення про те, що бригада робить під землею, а метали подано клітинками таблиці Менделєєва: Au 79, Ag 47, Pb 82, Cu 29, Zn 30.

Що взяти: знімайте роботу там, де вона відбувається. Найсильніша картинка підрядника це місце, куди клієнт ніколи не спускається.

Сайт промислового виробника: FMI

FMI робить жаростійкі композити для ракетних двигунів, входу в атмосферу і гіперзвукових польотів, і перший екран показує саме це: ракета піднімається над вигином Землі, обрій світиться помаранчевим. Quality proven in extreme environments. Абзац поруч міг би висіти на стіні ангара: ми виробляємо не матеріали, ми виробляємо впевненість. Поки інші ще моделюють навантаження, ми вже його витримуємо.

Під настроєм каталог, потрібний інженеру: вуглець-вуглецеві, керамоматричні, абляційні і радіопрозорі композити, кожен зі своєю властивістю простими словами, далі три галузі, космос, оборона й авіація, послуги випробувань і сертифікація AS9100.

Що взяти: покажіть найжорсткіше застосування продукту. Матеріалу, який витримує ракету, не потрібен прикметник.

Сайт AI-консалтингу: Anveril

Фірма з AI-трансформації, яка обрала для картинки важку промисловість: гігантська турбіна в залі випробувань під заголовком Intelligence Without Limits. Підзаголовок каже, що вони продають: від стратегії до продакшну, AI-амбіції, перетворені на вимірюваний результат бізнесу. Банер на фото веде до маніфесту компанії.

Метод це чотири слова: діагностувати, структурувати, побудувати, трансформувати. Галузі названо, охорона здоровʼя, страхування, оборона, енергетика, інфраструктура, і для кожної сайт ставить у пару вузьке місце і систему, яка його прибирає: оборонні організації обробляють розвідувальні дані й дані готовності в захищених середовищах, тож Anveril будує AI-процеси, де чутливі дані під контролем, а затверджує людина.

Що взяти: вузьке місце і система для кожної галузі. Читач знаходить свій сектор і бачить рішення, описане його словами.

Сайт B2B-сервісу: RothFinder

RothFinder продає фінансовим радникам, і перший екран робить те, що робить продукт: робить математику очевидною. Під заголовком порівняння, яке можна перемикати між трьома розмірами портфеля: $2 082 000 зі стратегією RothFinder проти $1 240 000 без неї, $842 тис. додаткового капіталу після податків, $310 тис. збережених податків, на 8 років швидше до мети. Дві вкладки в куті ділять аудиторію: фінансові фахівці і клієнти.

Відгуки теж несуть числа: понад $3 млн у воронці, понад 200% зростання продажів, кожен з імʼям радника, ініціалом і посадою.

Що взяти: поставте результат клієнта на перший екран. Радник бачить слайд, який сам покаже своєму клієнту.

Сайт B2B-техніки: Seasats

Ocean Autonomy That Works поверх човнів-дронів на спокійній воді. Далі перелік, що читається як бриф місії: координати тіньового флоту, шлях ураганів, місця контрабанди і незаконного вилову, сигнали підводних човнів, стан трубопроводів. No matter the unknown, we will find it.

Заперечення закупівлі закрито чотирма короткими заголовками: розгортається руками, одна-дві людини; летить будь-куди комерційним чи військовим літаком; освоюється легко, без багатотижневого навчання; ціна для масштабу, достатньо доступна, щоб купити без зайвої бюрократії закупівель. Далі характеристики: 50+ корисних навантажень, місії до 6 місяців, сповіщення одразу на телефон того, хто ухвалює рішення.

Що взяти: відповідайте закупівлі заголовками. Людина, яка підписує замовлення, читає заголовки, а не абзаци.

Сайт виробника: APC

Нідерландський виробник палет, і перший екран це зйомка з дрона його двору: стоси палет, вантажівки, зелені поля до обрію. Makers van pallets, «Виробники палет». Пропозиція з першого скролу ділиться на три: нові палети, вживані, перероблені, а далі євро, дисплейні, на замовлення і сітчасті контейнери.

У куті першого екрана маленька панель: Liever snel in contact?, «Хочете звʼязатися швидше?», з кнопками телефону і пошти. Одне число несе місію: понад 700 000 палет щороку отримують нове життя.

Що взяти: покажіть справжнє місце. Для виробника зйомка двору з дрона доводить масштаб краще за будь-який рендер.

Одинадцять B2B-сайтів поруч

Що має бути на B2B-сайті: спільне в найсильніших

Поставте одинадцять поруч, і вигляд не має нічого спільного: трейдерський стіл Aspen, поля APC, ракета FMI. Деталі під виглядом повторюються. Якщо ви пишете ТЗ на сайт B2B-компанії, візьміть цей перелік разом із референсами.

• 01Один рядок про те, що ви робите і для кого. Applica: допомагаємо застосункам нарощувати дохід, конверсії й утримання. United Carriers: один оператор на кожному відрізку шляху.
• 02Три числа для другого читача. Обсяг, якість, досвід: відправлення на місяць і частка вчасних; працевлаштування і діапазон пропозицій.
• 03Послуга, показана в роботі. Схема архітектури, порівняння «до і після», мережа, що розгортається з логотипа, дашборд. Коли сервіс і є продукт, його екрани заслуговують на ту саму увагу: продуктовий дизайн для SaaS і фінтех-стартапів.
• 04Страхи, названі й зняті. Як вам платять, хто відповідає, що буде на перевірці, що потрібно закупівлі.
• 05Названі люди. Клієнт на відео, партнер, з яким можна поговорити, відгуки з іменем і посадою.
• 06Сайт, яким команда може керувати. CMS-блоки для статей і сторінок кейсів, щоб маркетинг публікував без розробника.

Ми проєктуємо і робимо B2B-сайти на Webflow і Next.js: агенції, консалтинг, HR і логістика, програмні продукти. Якщо папка референсів уже відкрита, надішліть її разом з компанією, і на дзвінку ми пройдемо, які з цих деталей потрібні вашому сайту першими.