Корпоративний портал IT-outsource компанії Techstack

Міжнародна product engineering компанія Techstack зі штаб-квартирою у Вроцлаві (Польща) займає міцні позиції на західному ринку. Проте наразі компанія активно реалізує стратегію домінування на ринках США та Європейського Союзу (ЄС), зосереджуючись на пріоритетних технологічних напрямках та високих стандартах розробки.

Вебсайт клієнта був побудований на базі традиційного технологічного стеку: React + CMS Ghost / Contentful. В розвиток проєкту було інвестовано значні ресурси, завдяки чому він досяг міцних SEO-позицій за низкою пріоритетних пошукових запитів.

Проте ключовою перешкодою для внутрішньої маркетингової команди стала критична залежність від технічного персоналу. Це значно ускладнювало оперативне масштабування сайту, швидке впровадження A/B тестування та самостійне розгортання нових цільових сторінок.

Head of Marketing Techstack Анастасія Дуднік звернулась до Ambi за рекомендацією колег. Від знайомства до співпраці ми надали серію консультацій і пройшли дві умовні співбесіди технічної команди клієнта. Це дозволило нам відчути метч між командами, а також впевнетись в можливості реалізації нашою командою всіх проєктних вимог клієнта.

Перед підписанням контракту ви маєте запевнитись в експертизі обраного підрядника. В нашій практиці попередні консультації є нормою, яка призводить до успішного партнерства.

Клієнт поставив перед нами такі вимоги:

• Проєктування компонентної архітектури, розрахованої на масштабування проєкту впродовж кількох років. 
• Ітераційна розробка нових сторінок, в узгодженні з маркетинговими пріоритетами.
• Адаптація під всі види планшетних та мобільних пристроїв.
• Серверний захист форм від спаму та ботів. Інтеграція зі Slack.
• Імплементація низки вимог від SEO-підрядників.
• Advanced SEO & Performance optimization
• Cookie consent згідно GDPR.
• Інтеграція з CMS Ghost для відображення релевантних статей в проєкті Webflow
• Розробка технічного рішення і механізму взаємодії для забезпечення поступової міграції проєкту на Webflow без втрати SEO-позиції, 404 / 301 помилок і просадки в user experience (сумісно з технічною командою клієнта).
• Забезпечення поточної консистентності функціоналу проєкту під час міграції
• Створення бібліотеки компонентів з широкими можливостями кастомізації та поєднання між собою. 
• Розробка Page Builder для статичних сторінок. Конструктора для маркетинг-команди, який на 100% відповідає вимогам і дизайн-системі клієнта.

Щоб зняти ці занепокоєння та продемонструвати нашу експертизу, ми запропонували пілотний проєкт: реалізацію однієї ключової сторінки з фіксованою вартістю (фікс-прайс), що повністю відповідала технічному завданню.

Цей підхід є нашим стандартом для ключових клієнтів. Він дозволяє нам довести свою компетентність на практиці та переконати вибагливих замовників із високими вимогами до виконання у нашій здатності забезпечити найвищу якість.

Управління проєктом на цьому етапі стало зразковим прикладом злагодженої взаємодії, що досягло рівня мистецтва.

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

Паралельно на кожному скоупі ми модифікували компоненти:

• виносили нові проперті для швидкої зміни екземплярів
• проєктували нові варіанти стилів
• забезпечували можливість взаємної інтеграції
• систематизували бібліотеку
• описували їх для нетехнічної команди

На той момент ми ще не знали про амбітну мету клієнта (згодом повідомимо), але проактивно закладали фундамент для повної консистентності дизайну.

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

Після реалізації критичної кількості сторінок на новій платформі, постало завдання безшовної (поетапної) міграції без переведення всього домену на Webflow. Для цього, спільно з технічною командою клієнта, було впроваджено нетривіальне рішення на базі зворотного проксі-сервера (Reverse Proxy).

Принцип роботи:

1. При надходженні запиту до певного URL на існуючий хостинг, проксі-сервер спершу перевіряє, чи відповідає цей шлях (path) новій сторінці, реалізованій на Webflow.

2. У разі відповідності, проксі-сервер тихо запитує сторінку з хостингу Webflow, кешує її та ретранслює кінцевому користувачу під власним доменом.

Такий підхід дозволив поетапно виводити оновлені сторінки в live-режим, зберігаючи SEO-позиції та забезпечуючи повну консистентність домену під час перехідного періоду.

Згідно з Product Requirement Document (PRD), важливою частиною проєкту було забезпечення повної самостійності команди клієнта в роботі з оновленим сайтом. Наша робота в напрямку передачі знань була комплексною:

• Технічна документація: Ми детально описали всі компоненти та прокоментували скрипти, забезпечивши повне розуміння архітектури проєкту.
• Навчальні матеріали: Підготовлено вичерпні відеоінструкції для ефективного користування платформою.
• Спільний онбординг: Проведено спільну навчальну сесію (call) з командою Клієнта для практичного освоєння функціоналу.
• Поглиблена освіта: Основний редактор контенту з боку Клієнта успішно пройшов курс Webflow Fundamentals у нашій школі, що гарантувало високий рівень внутрішньої експертизи.
• Пост-релізна підтримка: Ми досі надаємо безкоштовну технічну підтримку представникам Клієнта, демонструючи гарантоване відчуття турботи та постійної присутності в разі потреби.

Для нас було вкрай важливо, щоб клієнт відчував повну підтримку. Той факт, що наразі проєкт успішно розвивається без нашої прямої участі, є найкращим свідченням досягнення бажаного результату та успішного трансферу знань.

• Дизайн та архітектура: 100% консистентний проєкт, реалізований на базі єдиної дизайн-системи.
• Якість верстки: Pixel-perfect верстка, стабілізована та підготовлена до майбутнього масштабування завдяки компонентному підходу.
• Надійність: Функціональні рішення працюють стабільно на будь-яких сторінках у будь-якій послідовності.
• Технічна чистота: Архітектура виключає можливість накопичення технічного боргу (tech debt).
• Продуктивність: Повна SEO-відповідність (Full SEO-compliance) та показники Core Web Vitals > 90 ("зелена" зона).
• Безшовність: Успішно завершена поетапна міграція.
• Самостійність: Впроваджено Page Builder для швидкого створення статичних лендінгів.
• Спільна робота: Підтримка Real-time Collaboration (одночасна робота команди в проєкті).

Ми безмежно вдячні компанії Techstack за високу професійність в організації командної роботи та довіру, яка дозволила нам проявити себе з найкращого боку. Такий видатний результат є можливим лише за умови справжньої синергії між усіма учасниками процесу.