Jamstack

UI & UX

Astro.js

Scss

Free Spirit Dance

See Website
Free Spirit Dance-image

Project Overview

The primary goal of this project is to create a vibrant and engaging website for dancers, a dynamic dance school, with the aim of attracting more students and enhancing their online presence. This website will serve as a digital showcase for the school, providing comprehensive information about their dance classes, instructors, and the unique dance experience they offer.

Process

  • Define objectives
  • Gather requirements
  • Design the concept
  • Implement the concept
  • Insighs and Google Search Console

Define objectives

Our main objective is to create a website that not only performs well in search results but also acts as the main focus of our customers’ online presence. This website will get traffic from various platforms so that consumers can access in-depth details about lessons, coming events, and the attractive world of zouk dance. Additionally, by letting consumers quickly reserve their spaces in new courses via our website’s user-friendly forms, we intend to simplify the class enrollment process.

Gather requirements

The website has a blog layout and a separate “Events” page that serves as a showcase for the “articles” or event pages. Because keeping a strong SEO scorewas a crucial factor to take into account, I decided against using a single-page application. The rare changes and additions to articles also had a role in my choice of content management approach. In addition, given that the website is still under development, I predict that future updates will add advanced functions, assuring the website’s continual development and improvement.

I made the decision to use the Astro Framework after taking all of the above into account. The fact that Astro is a static site generator, which means that in final form, it would provide html files for every page, including the articles, with minimal js, was the key factor in this selection. Additionally, it has the ability of a single-page application, allowing you to design components to avoid repetition. The ability to include different frameworks into this was another feature that assisted in taking this into consideration.

Design the concept

I began by conducting research on websites that provide the similar function and looking at dance school websites designs.

To understand the layout and how the content will interact, the first step was to design a wireframe.

Wireframes Component UI

Wireframes

The idea was to create a kind of single page view (like a story), which would take the user from the hero section (the area where the user first sees the CTA), and have them scroll down to see a brief description of the dance style (since this is a school that specializes in a particular, less-popular style of dance, I opted to have a brief description). Next, we move on to courses, where the user may sign up for our newsletter and see that there are classes. After learning more about this school by scrolling up to this point, the user decides whether to enroll or not after all of the preceding information has been shown. To make this process easier, the last area of the page includes the application form, contact information, and a map.

Implement the concept

I executed the design and created some mockups that we gave to the customer, who accepted them, and in the end I was able to apply them. The website was created using Astro 3, so I was able to leverage the new enhancements given by it. The finished result may be viewed at the previous link.

Insighs and Google Search Console

After the website was created, I added the insight feature to help me understand how users interact with it and what aspects of it should be optimized more effectively. I use Google Console to see how users find pages like this one, so that I can improve the SEO component of this process. It takes a while, but one great thing I was able to do is that it typically takes Google 3 to 4 weeks to index a new website. Using my knowledge of previous techniques, I was able to optimize this website in only 3 days so that it would show up on search engines.