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

Школа танцев и спорта Master, основанная в 2014 году в Хельсинки, прошла путь от небольшой студии до крупнейшей танцевальной школы Финляндии. Здесь тренируются как любители, так и будущие чемпионы, а выпускники школы завоевали множество наград на национальных и международных конкурсах.

Однако, несмотря на быстрое развитие школы, ее присутствие в Интернете осталось неизменным с момента основания. Сайт, созданный на платформе Wix, имел устаревший дизайн и ограниченные возможности управления контентом. Это не соответствовало современным потребностям школы и ее статусу.

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

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

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

Клиент предъявил нам следующие требования к реализации сайта:

• интуитивно понятный интерфейс для посетителей.
• стильный, эстетичный внешний вид, соответствующий духу творчества.
• полная оптимизация для смартфонов.
• необходимо было максимально безопасно обновить сайт для позиций в поисковых системах
• возможность легко обновлять информацию без привлечения разработчиков
• предусмотреть возможность расширения предложений в будущем.
• интерактивные сценарии, добавляющие динамику.
• поддержка нескольких языков для разных аудиторий.
• Розробка технічного рішення і механізму взаємодії для забезпечення поступової міграції проєкту на Webflow без втрати SEO-позиції, 404 / 301 помилок і просадки в user experience (сумісно з технічною командою клієнта).
• Забезпечення поточної консистентності функціоналу проєкту під час міграції
• Створення бібліотеки компонентів з широкими можливостями кастомізації та поєднання між собою. 
• Розробка Page Builder для статичних сторінок. Конструктора для маркетинг-команди, який на 100% відповідає вимогам і дизайн-системі клієнта.

Мы начали работу со знакомства с текущим сайтом школы. Необходимо было тщательно изучить информационную архитектуру, чтобы обеспечить плавный переход на новый сайт. Параллельно изучались технические характеристики и пожелания клиента по обновлению структуры

Не обошли стороной мы и изучение сайтов конкурентов. Основное внимание было уделено именно структуре. Мы стремились найти лучшие решения в отрасли. Конкуренты были разделены на 3 категории: прямые (из Хельсинки), косвенные (компании, предлагающие аналогичные услуги, но для другой аудитории или с другим подходом), лидеры рынка из разных стран

Этот проект во многом уникален для нас, и одной из уникальных вещей является именно стадия создания концепции дизайна. Наш клиент — очень творческая личность, но в то же время имеет системный подход к работе. Впервые за время существования нашей студии мы подготовили целых 6 дизайн-концепций

Для каждой итерации было предложено 2 концепции. Мы получали экологическую, структурированную обратную связь и делали следующий подход. Наша главная задача — сделать качественный продукт, чтобы клиент был доволен на 100%

Когда мы определились с концепцией, было проведено еще несколько итераций поиска цветовой гаммы и шрифтов. Как и в 90% случаев, в итоге цвет и шрифт, предложенные дизайнером с самого начала, были одобрены. Но клиент был очень вовлечен в процесс и остался доволен этим поиском. После окончательного утверждения концепции дизайнеры выпили бокал вина и приступили к воспроизведению концепции на всех страницах сайта

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

Тут особенно нечего выделить. Этот этап — долгая и кропотливая работа, учитывая количество страниц. Со стороны клиента возникали задержки с подготовкой контента, поэтому весь процесс оказался довольно долгим. Но наша команда и команда заказчика отлично справились с задачей

Сделав все макеты, дизайнеры подготовили UI-kit и утвердили референсы для анимации ключевых разделов сайта. Затем состоялся совместный звонок с командой разработчиков и заказчиком, где были переданы все материалы

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

Перед началом верстки для удобства и монументальности проекта мы создаем руководство по стилю, в котором определяем все сервисные классы для заголовков, текстовых блоков, кнопок, изображений и т. д. Также перед началом работы важно определить тип верстки и поведение сайта на разных расширениях пк (1440, 1920, 2560 и т.д.). Наш вариант — резиновая верстка с адаптивами на ключевых брейкпоинтах. Максимальная ширина контейнера — 1380 пикселей.

Работа над версткой статических страниц заняла около 6 недель. Как всегда, после завершения этого этапа мы представили проект клиенту на рассмотрение. По результатам обратной связи мы внесли правки.

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 за високу професійність в організації командної роботи та довіру, яка дозволила нам проявити себе з найкращого боку. Такий видатний результат є можливим лише за умови справжньої синергії між усіма учасниками процесу.