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

Founded in 2014 in Helsinki, Master dance and sports school has evolved from a small studio to Finland's largest dance school. It became a training ground for both amateurs and future champions, with graduates winning numerous awards at national and international competitions.

However, despite the school's rapid development, its online presence had remained unchanged since its founding. The website was created on Wix and had an outdated design and limited content management capabilities. This no longer met the current needs of the school or reflected its status.

The owners decided to build a new website that would reflect their organization's scale and excellence while meeting modern user expectations.

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

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

The client presented us with the following requirements:

• intuitive interface for visitors.
• stylish, aesthetic look that reflects the spirit of creativity
• full optimization for smartphones
• preserving search engine positions during the update
• easy updates without developer involvement
• readiness for future expansion
• interactive elements that add dynamics
• supporting multiple languages for diverse audiences
• Розробка технічного рішення і механізму взаємодії для забезпечення поступової міграції проєкту на Webflow без втрати SEO-позиції, 404 / 301 помилок і просадки в user experience (сумісно з технічною командою клієнта).
• Забезпечення поточної консистентності функціоналу проєкту під час міграції
• Створення бібліотеки компонентів з широкими можливостями кастомізації та поєднання між собою. 
• Розробка Page Builder для статичних сторінок. Конструктора для маркетинг-команди, який на 100% відповідає вимогам і дизайн-системі клієнта.

We began by analyzing the school's existing website. We needed to thoroughly study the information architecture to ensure a smooth migration to the new website. Concurrently, we reviewed the technical specifications and the client's wishes for updating the structure.

We also analyzed competitors' sites, focusing primarily on their structure. We aimed to find the best solutions in the industry. Competitors were divided into 3 categories: direct (from Helsinki), indirect (companies offering similar services to a different audience or with a different approach), and market leaders from different countries.

This project was unique for us in many ways, including the design concept phase. Our client is both creative and systematic in their approach. For the first time in our Ambi’s history, we prepared 6 design concepts.

For each iteration, we presented 2 concepts. We received constructive, structured feedback – and proceeded with the next step. Our main goal was to create a quality product with which the customer would be 100% satisfied.

After deciding on the concept, were had several more iterations searching for the right color palette and fonts. As happens in 90% of cases, the color and font originally proposed by the designer were ultimately approved. The client was very involved in the process and was satisfied with this exploration. After the concept’s final approval, the designers celebrated with a glass of wine and proceeded to apply the concept across all pages of the website.

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

This stage involved long and painstaking work, considering the number of web pages. The client experienced delays in content preparation, so the entire process took considerable time. But our team and the customer team successfully completed the task.

After creating all the layouts, the designers prepared a UI kit and approved references for animating key sections of the site. We then held a joint call with the development team and the customer to transfer all materials.

The development began with defining the project architecture, the methodology for naming classes, and analyzing technically complex modules and non-standard animations. This was handled by the project team.

To ensure consistency and project monumentality, we created a style guide defining all service classes for headings, text blocks, buttons, images, etc. Before starting, it was important to determine the layout type and website behavior on different desktop devices (1440, 1920, 2560, etc.). Our approach was a “rubber” layout with adaptors at breakpoints. The maximum container width was 1380 pixels.

Static page layout took about 6 weeks. As always, after completing this stage, we submitted the project to the client for review. Based on their feedback, we performed certain edits.

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