Developing a website for Finland’s largest dance & sports school

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.

The client presented us with the following requirements:

• Ease of use: intuitive interface for visitors.
• Modern design: stylish, aesthetic look that reflects the spirit of creativity
• Mobile Adaptation: full optimization for smartphones
• Safe migration: preserving search engine positions during the update
• Content editing: easy updates without developer involvement
• Scalability: readiness for future expansion
• Animations: interactive elements that add dynamics
• Multilingualism: supporting multiple languages for diverse audiences

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.

Based on all the materials studied, we created a site map for the new project. The client approved all our ideas for structural optimization, and we proceeded to wireframe the main page.

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.

Next, we started designing the Webflow CMS. The client didn't require complex CMS functionality, so we moved quickly. However, it was important to ensure maximum ease of use for a non-technical client. Therefore, everything needed to be as clear as possible. We named and described each database field. All secondary fields or those not intended for client use were specifically marked.

When the entire project was completed, we once again submitted it for client review. Yes, we prefer close interaction with the client to ensure:

• They remain calm, see work progress, and understand our current stage
• They stay emotionally involved in the process

Last but not least, we created animation scripts. Traditionally, we used native Webflow animation and, of course, the GSAP library (for animating titles and main page screens). We also used SplideJS to implement sliders.

The project featured many sliders, each with slightly different functionality. Additionally, each slider that contained fewer slides than could fit on the page converted to a static block.

The project includes 27 static pages and 4 CMS collections (with 4 unique dynamic pages). The total implementation took about 16 months, a record project duration for our team. This extended timeline was due to the client's particular workload and limited availability for providing quick feedback. Since client comfort is our priority, we adapted accordingly.

Curious about how deadlines affect project outcomes? Read our article: “Web Project Timelines: How Clients and Contractors Affect Deadlines.”

We submitted the fully finished project to the client for the final review and received a response with additional requests, which took about 10 days to implement.

The client was satisfied with our work. We are proud to be able to be so helpful