Project: YIN & SOUND IN THE SOUTH

View this website on GitHub Pages

My first milestone project for Code Institute is a prototype for a real product: A static landing page for our Yin-Yoga and Sound Healing Training Immersion in the South of France. Besides being a student at Code Institute and future Software Developer and UX Extraordinaire, I have been a Yoga Teacher and Sound Therapist for the past 5 years here in France.

That means that this project has educational and entrepreneurial goals (this Yoga and Sound Immersion is actually a real service being developed by me and my teacher partner). For this project development I will be applying my web development and marketing communications skills to create a fully functioning responsive website, which will present the program and sell registrations online.

Thanks for appreciating this project with me :)

Kes Cardoso

UX

1. Target client

This website is targeted to:

• Qualified and aspiring yoga teachers, wishing to improve their skills and teach Yin Yoga with Sound Healing in their communities;
• Students and practitioners of yoga, fitness or alternative healing modalities wishing to develop a deeper understanding of Yin Yoga and Sound Healing for their own personal or vocational purposes;
• Regular clients who love yoga and are looking for a wellness retreat or short experience-based vacation in nature.

Our demographic:

• French and International clients (mostly from: Europe and USA) between 25-55 years old;
• English-speaking expats living in the South of France (Nice, Antibes, Cannes, Monaco, Menton and surrounding areas, as well as Paris);
• Our current yoga students and clients from Nice and surrounding area interested in going deep into their practice (already introduced to our business);

Our Client Avatar:

• Our main client-avatar is: females between 30-45 years old living in the south of France and who are interested in: yoga, alternative medicines, hiking, outdoor activities, vegetarian and organic food, ecological affairs, career change, holistic and health habits, and mainstream spirituality.

2. What is our client looking to achieve

This client is looking for information online on how to get trained or improve their Yin Yoga skills. They are looking for either a formal training or an immersion experience that leads to qualifications for teaching Yin Yoga with Sound Healing support (these two modalities are often used together and lead to combined training). Clients desire to experience an immersion fast-track, retreat-like program that functions as both intensive training and/or short vacation. Budget and proximity is an important element, and they usually can’t afford or don’t wish to invest in flagship trainings from Yoga Alliance, for example.

They need a well explained presentation, in form of an online webpage, that lays out all the important details on how / where / when they can achieve their goals and what they will get as a result if they sign up to our program. They also expect to have easy access to registration and online payment options, as well as easy contact to inquire about the program if they are unsure or need assistance making a decision.

3. How this project will help clients achieve their goals

• This website is completely responsive; it has been carefully optimized and tested for all devices: mobile, tablet and desktop.
• This website is a user-friendly, one scrolling page with a top-fixed navbar, presenting wide space with text, images, videos and grids to help and guide clients into finding the information they are looking for.

User Stories:

A female English-speaking expat in the South of France, who relocated with her husband and needs to redefine her career and social life. She is looking to quickly integrate the job marketing by becoming a yoga instructor among expats moms in her small town community with a short and budget-friendly training.

• I want to know upcoming dates and price options for this local training, and so I click on the PRICE & DATES item on the menu bar to automatically scroll down the page and see a table with 4 different price packages and a second box with the upcoming training dates in this page-section.

• I want to know details about the precise location where this local training is held, and so I click on the LOCATION item on the menu bar to automatically scroll down the page and see descriptions, photos and video in this page-section showcasing the retreat center.

• I want to know details about the training schedule, and so I click on the SCHEDULE item on the menu bar to automatically scroll down the page and see the page-section with 5 column-grid showing the schedule from Wednesday(Day1) to Sunday(Day5).

• I want to know details about the training program and the learning outcomes, and so I click on the PROGRAM item on the menu bar to automatically scroll down the page and see a description of the philosophy behind the training, to whom it is for and what I will learn if Ì take the training.

• I want to get to know the teachers in this training, and so I click on the MENTORS item on the menu to automatically scroll down the page and see their bio and profile photo.

• I am ready to enroll in this local training, and so I click on the ENROLL / CONTACT button on the menu bar, or the REGISTER NOW button on the hero image, to automatically scroll down the page and find the registration form.

• I want to inquire about enrollment in this training, and so I click on the ENROLL / CONTACT button on the menu bar, or the REGISTER NOW button on the hero image, to automatically scroll down the page and find the INQUIRE NOW button to get in touch with the staff.

• I am very interested in the training while I get to the bottom of the page into the registration section, but I am not yet ready to enroll, and so I click on the NEWSLETTER button to sign up to receive future news via email related to this training.

4. Wireframe

• Link to my Wireframe on Figma
  • This was my first wire-framing experience and it was very positive. It took me sometime and frustration to learn how to use Figma, but once I understood it, wire-framing became a must. After finishing my wire-framed mockup website, I felt very good about going into development because I knew exactly the appearance I wanted to achieve with Bootstrap. I made some adjustments as I developed the webpage, but wire-framing definitely made the development phase a lot easier and fun!

Features

1. Existing Features

• Responsive and Fixed Top Navbar: allows user to go over the entire content and find precisely what they need with automatic scroll/jump on page.

• Smooth Scrolling: automatic smooth scrolling animation on click at navbar links (made possible with CSS).

• Jumbotron with Register Now Button: presents an immediate call to action for visitors to optimize conversions.

• Mentor’s Read More Button: in the Mentors section on mobile/tablet viewing, the read more button allows the content to be more user friendly for small to medium screens.

• Daily Schedule Table: allows user to understand the daily schedule for this program in a structural and logical way.

• Price/Packages Table: allows user to understand the four different pricing options in a structural and logical way.

• Location Video: allows user to understand the four different pricing options in a structural and logical way.

• Enroll Button: it optimizes conversion by allowing user to register to the program by sending secured online payment via PayPal, either via the button at the footer of the modal, or via the PayPal icon in the center of the modal (which is a FontAwesome icon used as a button).

• Inquire/Contact Button with Modal and Form: allows (but not functioning yet: not linked to email) user to send an inquire or contact the staff/mentors with a responsive contact form inside a modal.

• Newsletter Button: allows user to sign up to our mailing list via mail chimp with a popup form (modal has integration with Mailchimp).

2. Features Left to Implement

• Contact form function: install confirmation of sent email for user to the modal contact form.

• Terms and conditions page: finish writing, creating and linking a legal terms and conditions page explaining for transactions and privacy.

• Hide Youtube branding overlay: Youtube embedded videos automatically display a photo and video title on top of the video; I want to be able to hide it.

Technologies Used

• Bootstrap - This project uses the Bootstrap Framework to facilitate a responsive mobile-first design and user experience.

• Cloud9 - This project uses Cloud9 as a development and testing environment.

• Google Fonts - This project uses Google Fonts to style the website fonts.

• FontAwesome - This project uses FontAwesome to style social links and form labels.

• YouTube - This project uses Youtube to host the location video.

• EmailJs - This project uses EmailJs to directly send email from client-side via contact form with Javascript.

• Git - This project uses Git for version-control and for tracking changes in source code during development.

• GitHub - This project uses GitHub as a remote code repository.

• GitHub Pages - This project uses GitHub Pages for deployment.

Testing

Please, click on the linked titles of each test to open and see a screencast (gif file) on your browser.

Test 1 - Desktop Features Overview

This Screencast shows how the features on the Desktop version of this site are user friendly and functioning: Navbar, menus, page scrolling, vide, images, tables, forms.

Test 2 - Mobile Responsiveness

This Screencast shows how the features on the Mobile version of this site are responsive, user friendly and functioning: Navbar, menus, page scrolling, vide, images, tables, forms.

Test 3 - Tablet Responsiveness

This Screencast shows how the features on the Tablet version of this site are responsive, user friendly and functioning: Navbar, menus, page scrolling, vide, images, tables, forms.

Test 4 - Mentors Session

This Screencast shows how the navbar menu scrolls smoothly to the Mentors session where information about the teachers can be easily found by the user.

Test 5 - Program Session

This Screencast shows how the navbar menu scrolls smoothly to the Program session where information about the program, who is it for and its outcomes can be easily found by the user.

Test 6 - Schedule Session

This Screencast shows how the navbar menu scrolls smoothly to the Schedule session where information about the schedule is displayed in a table with easy access for the user.

Test 7 - Schedule Session

This Screencast shows how the navbar menu scrolls smoothly to the Location session where information about the property where the training is held, with a video, is displayed and can be easily accessed by the user.

Test 8 - Prices & Dates Session

This Screencast shows how the navbar menu scrolls smoothly to thePrices & Dates session where information about the packages and upcoming immersions are displayed in table format for the user’s easy access.

Test 9 - Enroll / Register Button and Form

This Screencast shows how the Enroll/Contact button on the navbar menu, and the Register button on the Call Out session scroll smoothly to the Enroll (CTA) session where user can easily send online registration via PayPal checkout through a modal form either via the PayPal FontAwesome button in the center of the modal, or the form button on the footer of the modal (form fully functioning and linked).

Test 10 - Contact Button and Form

This Screencast shows how the Enroll/Contact button on the navbar menu, and the Register button on the Call Out session scroll smoothly to the (CTA) session where user can find the Contact Button and easily send a message to staff through a modal form. Contact Form shows effectively the validation functioning and warning alerts. Bugs: Final success message not implemented, and contact email functionality not yet linked at this stage.

Test 11 - Newsletter Button and Form

This Screencast shows how the Enroll/Contact button on the navbar menu, and the Register button on the Call Out session scroll smoothly to the (CTA) session where user can find the Newsletter button and easily send their subscription to Mailchimp through a modal form (fully functioning and linked).

Deployment

1. This project was developed and stored in git using Cloud9

2. The project’s source files was regularly pushed to GitHub repository kescardoso/MS1-yinsoundsouth

3. The project’s source file was published from GitHub repository to GitHub pages using GitHub default settings via the master branch

4. GitHub Pages was then enabled to publish the site from the master branch following this path:

   1. GitHub repository settings page
   2. At GitHub Pages Repository box (on Settings) the master branch was selected from the dropdown menu
   3. Action was saved by clicking the save button

5. The Project’s source file is now published as a site on GitHub Pages at: Yoga & Sound Immersion

Credits

Code

1. Simple modal contact form from MdBootstrap
2. Mailchimp form on modal from Mailchimp and Bootstrapious
3. Collapsible navbar toggler that closes on click from StackOverflow
4. FontAwesome as button input on PayPal modal from StackOverflow

Media

These photos below are stock-free images obtained from Unsplash:

• Mountain Range
• Forest Girl
• Orange Cat
• Sunset Yoga

Acknowledgements

• I received inspiration for this project from our Bootstrap class work at Code Institute (Whisky Drop), which originated my Tea Drop website.