This is the marketing website for En Avant Ballet School.
The school offers ballet classes for dancers of all abilities, free trials, performance oportunities, and mental training for performance.
The website strives to enhance the online visibility of the school, build a strong brand that aligns with its ethos, promote its services, and increase enrolment.
The website is targeted primarily towards prospective clients: parents looking for ballet classes for their children and dancers looking for artistic, technical or psychological support.
The website will be useful for its intended audience to find information about services, staff, read testimonials, book trial classes and other services, find contact information and make inquiries.
En Avant Ballet School is a well established company in North London. While their client retention is and has always been high, in an environment of rising competition, the company now struggles to attract new customers, mainly because of the poor online presence.
Therefore, they decided to invest in a website that would increase their online visibility, promote their services and ethos, and ultimately increase enrollment.
The website will act as their business card and will promote key aspects of the business that makes them unique and sets them appart from competition:
- the continued support for their clients form the very first steps into ballet and throughout their professional careers;
- motivating their students to set high targets and always go one step further; "En Avant" is not just a ballet term, it is the French for "forward" and part of the company's motto: "Step Forward!"
The primary goal of the website is to support the business goal of attracting new clients.
The project tries to achive this by:
- good SEO performance in order to become visible to prospective clients;
- good user experience, seamless navigation, responsivness and accesibility;
- having all the essential information that a prospective client would look for: services and prices, staff experience and clients testimonials for credibility, a call to action button linked to a registration form, contact information and office hours for further enquiries and support, and links to social media platforms.
- having design choices that help convey the business's ethos.
- developing a website that fulfills both business and user goals;
- developing a professional looking website by using HTML, CSS, and Bootstrap;
- a project the developer is excited to make a part of her portfolio, especially since it gives her motivation and inspiration to "Step Forward!" on this journey: "En Avant!"
As a First-Time Visitor I need:
- an intuitive design, easy navigation and responsive layout, so that I can find information quickly, without frustration.
As a Prospective Client, I want to find information about:
- the services, fees, and timetable offered by the school, to know whether they suit my needs, my budget, and my schedule;
- the experience of the staff, both as dancers and teachers, to know whether I can entrust them with my (child's) education;
As a Prospective Client, I want to:
- read testimonials from other customers, so that I feel more confident about trying the school's services;
As a Prospective or Current Client, I want to:
- find contact details and office opening hours, so I can make further enquiries if I need to;
- be able to book a free trial or other services, so I can start/ continue to use them;
- receive feedback after clicking the submit button on a form, so that I am assured my details were submitted;
- sign up for newsletter and updates, so I can stay informed about special offers or upcoming events.
As a Business Owner, I want the website to:
- have a call to action button (CTA) easily visible on relevant pages, so that visitors can be converted into clients;
- have a home page that impresses, makes visitors want to find our more about us, and conveys our motto and ethos.
- have a memorable logo and favicon, to help build a strong, easily recognizable brand;
- have a good SEO performance, so it becomes visible to prospective clients.
I wanted the website to tell a story in the same way a book, a film, or a ballet performance would. The landing and the thank you pages would be the "Once upon a time" and "The end", the front and the back cover, the poster and the flower giving moment at the end of the show (but in this case flowers are a sign of gratitude for the trust shown by site visitors turned into clients).
I tried to convey this idea by using the same background colour for these two pages and by minimum information display. These pages should impress; the landing page should also ispire trust and incite curiosity.
By contrast, the other two pages are meant to inform and convert site visitors into clients. These pages are the story itself, they contain most sections, most information; they have a common lighter background colour and similar broad layout.
I believe that this way of seeing and organizing the website also aligns with the user needs. The most important thing for a parent or a student is to be convinced that an education provider is trustworthy, then they need to find information about services, prices, schedule, contact and registration process. And this is how the website prioritises information.
The website has four pages; three of them are accessible through the navbar (index.html, info.html and register.html), while the fourth is shown once the user submits the form on the register page.
The three main pages have:
- A responsive navigation bar at the top, which links the three main pages of the website.
For mobile and tablet, this collapses into a burger toggler that opens a side navbar when pressed.
For desktop the navbar expands, and in index.html and info.html it contains an extra button, the call to action: Book a free trial.
- A footer with contact information (address, phone number, email address), office opening hours and social media icons that link to X, Facebook and Instagram, all opening in new tabs when clicked.
Home page includes:
- A hero section with the name of the school as heading and a hero image. The hero image is made of two images: one of a little girl dressed in a tutu and one of a professional ballerina at the end of her performance. The hero image suggests the journey of a ballerina from childhood to a professional career and aligns with the school's stated aim of providing continued support for dancers from the very first steps into ballet and throughout their careers.
For mobile and tablet this section also contains the call to action button; the CTA should always be visible and therfore could not be placed in the collapsed navbar.
- A testimonials section made of four responsive cards. Their role is to convince the website visitor, and at the same time to illustrate the school's ethos through its clients' words.
About Us page includes:
- An about us section with a summary of school's location, history, goals, ethos, teacher training.
- A services section made of four responsive cards. Each card features an image, a heading, a presentation paragraph, pricing, and a button linked to the registration form where needed.
- A dates section with two tables, one for classes timetable and one for performance calendar.
Register page includes:
- A form containing fields for: dancer's name, parent name, date of birth, phone number, emergency phone number, medical conditions, service being booked, dance experience, preffered days and a message text area. The user fills in this form and submits using a submit button. For any required information not filled in the form will not submit but prompt the user to the required, unfilled field. There is one exception to this and it will be discussed in the Known Bugs section in Testing.
- For tablet and desktop, this page also includes a background image featuring a young ballerina putting on her pointe shoes, as if getting ready for class. The form wraps around this image on desktop view, while on tablet the background has an overlay for improved text readability.
Thank you page includes:
- An image of a roses bouquet the role of which has been mentioned in the Design Concept section.
- A "Thank You!" message.
- A home button.
I wanted a font or combination of fonts that would reflect the elegance and at the same time the discipline of ballet. I thought I would choose a cursive style for headings and a sans-serif font for paragraphs. But after experimenting different fonts, I tried Monserrat google font in headings, with display bootstrap class applied, and the same font in paragraphs; I realised that this was the feeling I looked for, so I chose and used it throughout the site.
Three of the colours were taken from the images I've used: #314459, variable dark-blue in css, was taken from the professional ballerina part of the hero image, #d54382, variable rose in css, was taken from the little girl part of the hero image, and #eff2f1, variable light-blue in css, was taken from the original background of the image in register.html, later I removed this background.
Variable dark-blue was used for the background of the home and thank you pages and for the headings in the other two pages. Variable light-blue was used for the background in info.html and register.html pages and for the headings in the other two.
Variable rose was initially intended for the buttons, but contrast with text was not high enough and didn't meet accessibility standards, so I ended up using it only in hover effects and borders. For buttons I used a darker tone: #a7254c.
Varible text-color #030405 was chosen for being the darkest tone of the dark-blue variable.
And finally, variable dark-color #212529 is the default colour of some bootstrap dark classes; I've initially struggled to replace this colour, but later I decided to integrate it in my colour pallette.
All images are royalty-free and were taken from https://pixabay.com/ .
Wireframes were created for mobile, tablet and desktop.
Home Page Wireframe
Info Page Wireframe
Register Page Wireframe
Thanks Page Wireframe
HTML and CSS were used to create this website.
Git - for version control.
Github - to save and store the files for the website.
Bootstrap Version 5.3 - the framework for the website.
Google Fonts - for the font used on the website.
Font Awsome - for the icons used on the website.
Google Dev Tools - mainly to test and troubleshoot responsiveness issues.
https://imagecolorpicker.com/ - for picking colors from pictures for website palette
https://coolors.co/ - for creating a palette out of the colours picked from pictures
https://www.freeconvert.com/ - for converting images to webp format
https://www.favicon-generator.org/ - for generating favicon
Paint 3D - for modifying images
The live website was deployed using GitHub Pages. Instructions on how to achieve this can be found below:
- Log into your GitHub account (or sign up if you don't have one).
- Go to the repository for this project: VeronicaTeodorof/en-avant-ballet-school.
- Click on the Settings link on the right hand side of the top navigation bar.
- In the left hand side navigation bar click on the Pages link.
- Under the Build and deployment header, in the Source section, select main branch from the dropdown menu. Make sure Root is selected in the dropdown select folder menu.
- Click Save. The live GitHub Pages website is now deployed at the URL shown.
How to Fork To fork the en-avant-ballet-school repository:
- Log in (or sign up) to GitHub.
- Go to the repository for this project, VeronicaTeodorof/en-avant-ballet-school.
- Click the fork button in the top right corner.
How to Clone To clone the en-avant-ballet-school repository:
- Log in (or sign up) to GitHub.
- Go to the repository for this project, VeronicaTeodorof/en-avant-ballet-school.
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
This was my first project and I wish I could say I knew what I was doing: building, testing, building, testing, but, as my commit history shows, the process was rather chaotic, correcting mistakes and then making them again, a lot of going back and forth.
Luckily, I had a volunteer tester throughout the process, gladly testing my website after each coding session and always shouting alarmed: "Mummy, I found a bug in your code!" That's my 7 years old, head of testing team, Vlad Boitos.
After asking my mentors, friends and family for feedback, I received the following suggestions which were implemented:
- I wanted the index page to display a burger icon in the navbar even on desktop instead of the expanded navbar, which was justified by my intention of minimum information display; I received mixed feedback with some users getting confused by this and I eventually changed it into the expanded version.
- The navigation bar initially contained a lot of links, not just to different pages, but also to sections within pages; both my mentors suggested I reduce the number of links, which I did;
- I added sticky-top bootstrap class to navbars after feedback received; this didn't work in the info page and it's eventually been sorted with my tutor's help. This issue is documented in Solved Bugs section;
- My end-of-project mentor also suggested I could use some fade-in animation on home page, which would align with my theme; I implemented this;
- I changed testimonials cards sizes with bootstrap classes after the feedback received from end-of-project mentor;
- In the mid-project mentor session, I was adviced to move the about us section in the info page from header to main in semantic html, as it contained too much information for a header;
- In the same session I've been advised to crop the images in the services section to make them the same size;
- I wanted the different sections in the info page to be more clearly separated, and I didn't want to use different background colours to achieve this; in the same mid-project session my mentor suggested that I used hr to separate the sections, I eventually used bottom-borders;
- My sister noticed the need for more contrast in the info page and suggested I could add this by styling the tables; I hope I achieved the needed contrast by adding borders to sections and to the tables in a colour chosen from the website's colour pallette.
- In the mid-project session my mentor also advised I added an overlay to the background image in the register page, so that the text is easy to read; I added this for the tablet version, but for desktop I managed to wrap the form around the image;
- Test each link on the index page. All links worked as expected; each link to external pages opened in a separate browser tab.
- Test each link on info page. "Book a free trial" in the navbar not working, now sorted. All other links working as expected and links to external pages opening in separate browser tab.
- Test each link on register page. All links worked as expected; each link to external pages opened in a separate browswer tab.
- Test link on thanks page. Link worked as expected. Adjusted the height in style.css.
Register Form Test required fields:
- I tried to submit the form without filling in any input fields. The form worked correctly and directed user to the Dancer's Full Name field.
- I filled in the input field for Dancer's Full Name and tried to submit again. The form worked correctly and directed the user to the Date of Birth field.
- I filled in the Date of Birth field and tried to submit. The form worked correctly and directed the user to the Email field.
- I filled in the Email field and tried to submit. The form worked correctly and directed the user to the Phone Number field.
- I filled in the Phone Number field and tried to submit. The form worked correctly and directed the user to the Emergency Contact Number field.
- I filled in the Emergency Contact Number field and tried to submit. The form worked correctly and directed the user to the Medical Conditions field.
- I filled in the Medical Conditions field and tried to submit. The form did not work correctly and did not direct to the "What would you like to register for?" field. This is a known bugs and will be discussed in the corresponding section. Instead it directed the user to the "Previous dance experience" field.
- I filled in the "Previous dance experience" field and tried to submit. The form worked correctly and directed the user to the "Preferred Days" field.
- I filled in the "Preferred Days" field; the form submitted successfully and opened the thanks.html page.
Test input types:
- Phone Number and Emergency Contact Number inputs accept numbers only with the exception of: "e" character, "-", and decimal numbers, which are also accepted. These characters can be typed but the form will not submit, instead redirecting the user to write in the respective field, with or without feedback.
- For the email type input only letters were entered and tried to submit. The form worked correctly and directed the user to include an "@" character. Then an "@" character was entered at the end of the previous string and tried to submit. The form again worked correctly and directed the user to enter a part after "@" character, declaring the input incomplete. When the correct format was entered, the form was submitted.
- Class sticky-top did not work in info page when applied directly to the nav element. My tutor solved this by adding the class to the header element;
- When testig the form for the final full testing, I noticed that the checkbox input for the first value had dissapeared. After investigating, I realised I had used the same "trial" id for this input and for the "Book a free trial" button. After giving the checkbox input a different id, the issue was solved;
- For the final W3C validation, the validator showed an error caused by the Bootstrap attribute arialabelledby in the offcanvasDarkNavbar div. After commenting it out, I realised the navbar was working properly without this attribute, so I removed it and the pages validated.
- For caption-top bootstrap class, the colour could not be changed in the style.css file. I managed to change it by adding inline css style.
- Some bootstrap classes have !important added to them and are very difficult if not impossible to change, so wherever needed and possible, I removed these to be able to apply custom css style.
For sure there have been more bugs that I solved, but although advised to document them, I panicked every time I saw something going wrong with my website and was so happy when solved, that I forgot to document. I guess this is something that will change with experience.
-
In the offcanvas navbar, after clicking the contact link, which is a link to a section in the same page, the offcanvas navbar doesn't automatically close, it has to be closed from the x button; this would not happen if I linked the contact section of a different page, but I considered this to be even more confusing, so I decided to leave it as it is;
-
Performance for mobile version in info page is 79, mainly because Bootstrap loads before the rest of the page loads;
-
Date of Birth input field in the registration form accepts future dates; this bug was discovered by Magdalena Redka. Solving this requires JavaScript, so this is something I will return to in the future;
-
The form can be submitted without selecting an option from the "What would you like to register for?" field. Making this required also needs JavaScript, so this is again something left to be solved in the future.
W3C Validator was used to validate the HTML on all pages of the website. W3C Jigsaw Validator was used to validte CSS in the style.css file.
Index Page HTML
Info Page HTML
Register Page HTML
Thanks Page HTML
style.css CSS
Lighthouse from Chrome Developer Tools was used to test performance, accessibility, best practices and SEO.
For mobile:
For desktop:
For mobile:
For desktop:
For mobile:
For desktop:
For mobile:
For desktop:
- As a First-Time Visitor I need an intuitive design, easy navigation and responsive layout, so that I can find information quickly, without frustration;
- As a Prospective Client, I want to find information about the services, fees, and timetable offered by the school, to know whether they suit my needs, my budget, and my schedule;
- As a Prospective Client, I want to find information about the experience of the staff, both as dancers and teachers, to know whether I can entrust them with my (child's) education;
- As a Prospective Client, I want to read testimonials from other customers, so that I feel more confident about trying the school's services;
- As a Prospective or Current Client, I want to find contact details and office opening hours, so I can make further enquiries if I need to;
- As a Prospective or Current Client, I want to be able to book a free trial or other services, so I can start/ continue to use them;
- As a Prospective or Current Client, I want to receive feedback after clicking the submit button or a form, so that I am assured my details were submitted;
- As a Prospective or Current Client, I want to sign up for newsletter and updates, so I can stay informed about special offers or upcoming events;
This was a could-have user story.
- As a Business Owner, I want the website to have a call to action button (CTA) easily visible on relevant pages, so that visitors can be converted into clients;
- As a Business Owner, I want the website to have a home page that impresses, makes visitors want to find our more about us, and conveys our motto and ethos;
- As a Business Owner, I want the website to have a memorable logo and favicon, to help build a strong, easily recognizable brand;
- As a Business Owner, I want the website to have a good SEO performance, so it becomes visible to prospective clients;
This user story is tested in Lighthouse tests.
Bootstrap classes applied to body and footer to ensure footer stays at the bottom of the page were taken from "Boardwalk Games" course tutorials. Footer structure also taken from "Boardwald Games" course tutorials.
Bootstrap classes applied to testimonials cards: d-flex and flex-grow-1 were suggested by Kevin Loughrey. Bootstrap class sticky-top applied to navbar was suggested by Rory Patrick Sheridan and specifically applied to parent header instead of nav for the info page was suggested by Kevin Loughrey.
Code for animation in hero section was taken from Stack Overflow and adapted.
I often used W3Schools tutorials on CSS and Bootstrap for better understanding.
Text for the first 3 testimonial cards was written with help of AI Overview in Google Search engine.
Text in the introductory paragraph for the registration form was partly taken from "Boardwalk Games" course tutorial.
All other content was written by Veronica Teodorof.
I researched other ballet school websites for North London area such as:
https://www.hendonandmillhillballetschool.com/
https://www.centralschoolofballet.co.uk/
https://www.highgateballetschool.com/
https://www.thefinchleyballetschool.co.uk/
All images were taken from https://pixabay.com/.
User stories of First-Time Visitor and Client newsletter sign-up were taken from the "Boardwalk Games" project in the course. All other user stories were written by Veronica Teodorof.
Other resources used to help write the readme file besides the ones in the course:
https://github.com/kera-cudmore/readme-examples
https://github.com/kera-cudmore/Bully-Book-Club
I am really grateful for all the help and support I received along the way in completing this project.
I would like to thank:
- Kevin Loughrey, my tutor, end-of-project mentor and kind friend, for all his time, patience, help and guidance,
- Rory Patrick Sheridan, my start and mid-project mentor, for guidance in these stages of the project,
- my son, Vlad Boitos, my everyday tester and number 1 supporter,
- Louisa Evans, my friend and group collegue, for her feedback and support,
- Magdalena Redka, my hackathon friend, for her feedback and for finding the date of birth field bug,
- Dylan Austin, my hackathon friend, for his feedback and for teaching me how to crop images in Paint 3D,
- my family, for their feedback, and especially my sister, Alexandra Gurgu, for noticing the need for contrast in the info page,
- my husband, for tolerating my new-found love for coding.
And although
... "there never seems to be enough time
To do the things you wanna do
Once you find them" ...
Jim Croce - "If I Could Save Time in a Bottle"