NamaStay

Yoga Retreat Promoter

View the live project here.

The image is from Am I responsive?

This is a fictional website designed for practicing the skills that I’ve learnt in HTML, CSS and JavaScript. The reason I’ve chosen this project is because of my passion for yoga and I wish to join many retreats in the future around the UK. The website features ‘about’, 'ethos', ‘testimonials’, 'call-to-action', ‘retreats, 'map', ‘FQAs’, ‘contact form’, ‘footer’ with the ‘social media links’. The objective of this project is for people to find new retreat locations or register theirs if they want to join the list.

Choosing a yoga retreat depends on various factors such as locations, familiarity with the place of choice before traveling there. Being able to contact with the service providers as well as connecting with the communities online. Therefore, the website aims to provide useful information such as the benefits of yoga retreats, listing several retreats, and sharing the fictional clients’ testimonials to build trust with potential clients. There is a FAQs section where the users can read answers and make enquiries if they have a specific question.

The business goals of this website are:

• Increase brand awareness.
• Reach wider clients by listing various yoga retreats.
• Simple and straightforward UX design close to the developer’s concept i.e., simplicity.
• Connect yoga lovers to their desired yoga retreats.

Users visit this website to:

• Search for a reputable retreat experience.
• Read about each retreat and choose their favourite one(s).
• Reach the event organiser and get in touch easily.
• Find the contact information effortlessly by filling up a form to make enquiries, register their retreats or just connect.

UX

Since the first Covid lockdown the mental health has become of one the most important aspects of our lives. In this project, I tried to promote the importance of yoga through socializing and benefits of retreats to boost wellbeing in general. Not being able to travel outside of the UK freely, I ensured I included enough retreat options locally and linked them to their original websites for the users to get further information. Each page links the user to the next page to direct them to retreats’ locations and contact page.

Ideal client

The ideal client for this website is:

• English speaking
• Yoga lovers
• Located in the UK
• People are into wellbeing, yoga, nature, and retreats
• People who are willing to spend money on themselves and their health
• Would like to register a retreat with NamaStay

The project help clients to:

• navigate easily through the website and reach the information they need easily.
• learn about the retreats and their locations, read previous clients’ testimonials and FAQs, and connect with the organiser via social media.

User stories:

1. As a user, I want to easily navigate the site to find my ideal yoga retreat.
2. As an owner of a yoga retreat, I would like to find out if this website is trustworthy and reputable by seeing what the previous clients say about them so I can collaborate with them.
3. As a visitor, I would like to learn more about the yoga retreats via their landing pages.
4. As a user, I would like to know how to contact the organiser to book a retreat.
5. As a customer, I want to be able to contact the organiser easily.
6. As a potential client, I would like to learn more about the organiser and get validation via their social media. It is more reassuring to trust businesses who have a solid follower base.
7. As a returning visitor to the website, I want to be able to find the contact page easily to reach the organiser.

Scope

To achieve the strategic goals, I included the following features in the website:

• Header containing website’s logo/name and the menu bar including Home, Retreats, and Contact. The menu toggles when the user clicks on it and it pans out the navbar containing the menue and organiser's contact information.
• Home page which says about the purpose of the website, benefits of yoga retreats and testimonials.
• Call-to-action button on about and retreat pages.
• Retreats list including their names linked to external websites and their locations on a Google map. When user hovers over each retreat, they can see the locations popping up on the map.
• Testimonials including the name of fictional yogis and their experiences.
• FAQs to allow users find answers to commonly asked questions.
• Contact form to allow users contact the organiser to register, inquire or book a retreat.
• Footer on every page containing the links to the organiser’s social media which upon hovering, it increments the number of followers and subscribers.

Skeleton

The website consists of three pages; About (introduces the aim of the website, benefits of yoga and testimonials), Retreats (including the map locating various retreats), and Contact (including FAQs and a contact form). All pages have the same logo, nav bar and footer.

Wireframe Mockups:

• NamaStay

Surface

The logo and a toggled menu bar are positioned in the left- and right- top corners of the website in the header incorporating dark-green and cream colours. When the menu icon is clicked, a green and cream navbar flives from left to the right side of the page. The earthy colours throughout the website have been chosen to represent nature, serenity, pureness, and energy. I have chosen dark typography yet bold styles to show strength. The light-green and orange colours have been taken from the banner image on the About page for call-to-action buttons, and social media icons. The combination of white, cream, light pink, light blue and dark green colours convey a sense of positivity, energy, and freshness.

Features

Header

The header contains a logo and menu option on either top corner of each page. This will create consistency throughout the website. Once the user clicks on the menu on the right corner, it toggles open a navbar from left to right containing links to pages i.e., About, Retreats and Contact as well as the organiser’s contact details. The user can access the information via the navbar on the left side and move around the site. The links will remain active (change to orange) when in use.

Footer

Every page has a footer with links to social media. The social media icons are linked to the general social networks as this is fictional website. The followers and subscribers’ numbers are unreal and made up. When the user hovers over the icons the number increment to show the exact number of followers and subscribers.

About

The About page features an illustration / banner to introduce the theme of the website. To the left side of the image, there is a line about what the website offers and a call-to-action button: Let’s begin! which takes the user to Retreats page. At the bottom of these, the ethos are presented. This encourages users to book a retreat as they are informative and factual. It will enhance user’s emotional response. The testimonials cards are placed below the ethos to build trust and credibility and accountability of the organiser. When user clicks on each card, they expand to allow users to read the texts. Finally, there is a call-to-action button: Take me there! to make the pages link together and navigation around the site more smoothly. The About page also uses cream and light-pink colors and fun illustrations to separate each section and create positive user response.

Retreats

The Retreats page features a Google map on the left-hand side of the page and a list of retreats on the right. When the user hover on each retreat item, they can see the location of the retreat on the map. Moving to a new item, the InfoWindow will close and another one will open. By clicking on each item, the user will be taken to an external website where they can learn more about that specific place. At the bottom of the page, there is a call-to-action button: Contact us! to book thier retreat. In case users couldn’t find a retreat, they could get in touch with the organiser to receive more information. The Retreats page also uses cream and light-pink colors and fun illustrations to separate each section and create positive user response. These colours are in coordination with the rest of the website.

Contact

The contact page features the FAQs. Each question is wrapped in a box. when users click on the arrow, they can expand the box to read the answers. Clicking on the cross (x) will hide the answer. Then, there is a Contact Form which users can fill up to reach the organiser to make enquires, book or register a retreat. The bottom of the form contains a Submit! button.

Existing Features

• Header Logo – Exists on every page aiming to promote brand awareness. Clicking on the logo will return the users to the Home page as they expect.
• Header Navigation Bar – Exists on every page to allow users to navigate the website and move from one page to another for access to more information.
• About Page – is about the website, ethos, and testimonials.
• Banner Photo – Exists on the About page accompanied by a short line about the website and a call-to-action button.
• Retreats Page – It showcases a list of retreats items. Each item is clickable directing users to each retreat’s website and can be viewed in a new page. Also when users hover over each item, the location of the retreat will open in Google map.
• Google Map – Allows potential clients to view the location of each retreat in the UK’s map.
• Footer – Exists on every page and contains the social media icons which link the users to social media platforms. When the user hovers over each icon, the number of followers and subscribers will appear. In smaller divices, the users needs to click on the numbers.
• Ethos – Exist on the About page to inform the users of the benefits of yoga retreats.
• Fictional Testimonials – Exist in the About page in a form of expanding cards to build trust amongst users.
• Call-to-Action Buttons – Exist on every page and invites potential clients to make the first contact with the organiser of retreats.
• FAQs – Exist on the Contact page aiming to answer some common questions that users may have.
• Contact Page – Provides a contact form. It allows the clients to send their request to make enquiries, register or book a retreat.

Features to Implement in future

Due to time restraints, I was unable to include the following features but hope to implement them in a future release:

• A blog to share educational articles and guides for added value.
• Live Chat app - To provide an instant connection between the user and organiser with high visibility on the site.
• Option to choose the language of the website - As the developer’s second language is Farsi, this would allow Farsi speaking visitors to the website to view it in their native language.
• Add a download button for a white paper for digital marketing purposes and building an email list in the future.
• A booking and payment to be added to the website.
• A search button to be added so users can put their desired location and search it on the website.
• Allow the website to use user’s location.

Technologies Used

This project uses HTML, CSS and JavaScript programming languages.

• Figma I used Figma, a vector graphics editor and prototyping tool which is primarily web-based to wireframe the structure of the website layout and its pages following best UX practices.
• Gitpod - The developer used Gitpod to write the code to builds the website.
• GitHub - The project used GitHub to host my code that was created and pushed from GitPod.
• Bootstarp5 - The project uses Bootstrap5 (BootstrapCDN and components) to simplify the structure of the website and make the website responsive across various platforms.
• FontAwesome - The projects uses a few icons from FontAwesome to make the websites less wordy and more visually appealing.
• Google Fonts The project uses Google fonts to style the website fonts.
• Tiny-PNG I used tinypng for big images up to 5M needed to be compressed to improve the website's loading time.
• Webaim.org The Webaim was used to test colour contrast on the project.
• W3C Markup Validation Service The W3C Markup Validation Service checked the markup validity of Web documents in HTML.
• W3C CSS Validation Service W3C CSS Validation Service was used to check the validity of my CSS in the project.
• WAVE Web Accessibility Evaluation ToolI used WAVE to make my site more accessible to individuals with disabilities by detecting any potential issues.
• GoogleMaps To locate retreats on the map.
• EmailJS To deilver emails.

Testing

Testing client stories from UX section of README.md

1. As a user, I want to easily navigate the site to find my ideal yoga retreat.

   • The user can navigate through the website using the navbar menu on top right corner of the page. When clicked, it opens a navbar containing the menu items and contact information.
   • The logo links the user back to the About Page.

   

   

   • The Ethos on About Page provide more information about the benefits of retreats.

   

   • The call-to-action button takes the users to the About Page where they can get more information on retreats.

   

   • The call-to-action button takes the users to the Contact Page where they can contact the organiser to get more information.

   

2. As an owner of a yoga retreat, I would like to find out if this website is trustworthy and reputable by seeing what the previous clients say about them so I can collaborate with them.

   • the tesimonials will provide the relevant information.

3. As a visitor, I would like to learn more about the yoga retreats via their landing pages.

   • The list of retreats on Retreats Page links users to external websites for more information.

4. As a user, I would like to know how to contact the organizer to book a retreat.

5. As a customer, I want to be able to contact the organiser easily.

   • In Contact Page, fill up a form and book a retreat.

   

6. As a potential client, I would like to learn more about the organiser and get validation via their social media. It is more reassuring to trust businesses who have a solid follower base.

   • The footer provides links to the designer's social media platforms.

   

7. As a returning visitor to the website, I want to be able to find the contact page easily to reach the organiser.

   • The phone number and email address of the organiser has been shared in the footer on every page.

Code validation

I used W3C CSS validation and W3C Markup Validation to check the validity of the website code.

Several issues were identified on W3C Markup Validation.

After I rectified the issue, no further errors were picked.

No errors were identified in the CSS code by W3C CSS validation.

I used JSHint to check the validity of the JavaScript code. There were no errors but some warnings only.

Color Contrast

The Color Contrast Accessibility Validator was used to test for colour contrast on the project.

. .

COMPATIBILITY

To ensure a broad range of users can successfully view/use the site, I tested it across all major browsers in both desktop and mobile configuration.

• Chrome
• Edge
• Firefox
• Safari

Further testing

I asked my friends and family to click on the deployed link on their devices especially iPads and 17" and bigger laptops which I do not personally own. I added further bootstrap padding and margin and CSS media queries to make the website responsive on all devices.

Deployment

This project was developed using Gitpod, committed to git and pushed to GitHub using git commands.

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. Log into GitHub.
2. From the list of repositories on the screen, select NamaStay.
3. From the menu items near the top of the page, select Settings.
4. Scroll down to the GitHub Pages section.
5. Under Source click the drop-down menu labelled None and select Master Branch. Then Save it.
6. Wait for a few minutes of the website to be deployed.
7. Scroll back down to the GitHub Pages section to access the link to the deployed website.

Run this project locally

• Select the Repository from the GitHub Dashboard.
• Click the green button labelled 'Code'.
• Click 'Download ZIP'.
• Extract ZIP file on your computer.
• Open folder and open index.html in web browser.

Clone this project

• Select the Repository from the GitHub Dashboard.
• Click the green button labelled 'Code'.
• To clone the repository using:
  • HTTPS: under "Clone with HTTPS", click checklist icon.
  • SSH: click Use SSH, then click checklist icon.
• Open Git Bash.
• Change the current working directory to the location where you want the cloned directory.
• Type 'git clone', and then paste the URL you copied earlier.
• Press Enter to create your local clone.

Credits

Content

The texts for FAQs and links to retreats for all the pages have been taken from the following pages:

• IKARA
• The Caribou

Media

Since this is a fictional website, I decided to use illustarations to make it more fun and impersonal. The illustrations were obtained from:

• Iconscout
• dribble.com
• uplabs.com
• creativevip.net

Code

• I have implemented the knowledge I've gained from the courses I've been doing along the Diploma with Code Institute to supplement my learning. The designs for incrementing counters, animated navbar, expanding cards and FAQ sections are the projects I learn from the Udemy courses and I personalised and improved them for this project.

• 50 Projects In 50 Days - HTML, CSS & JavaScript
• The Complete 2021 Web Development Bootcamp I also saught guidance by serching answers on:
• Google Map API Documentations
• Stack Overflow

Acknowledgement

I decided to develop this website for personal reasons and my passion for yoga. I took aspiration for this site from the following websites in terms of content, application and design:

• reviewmyretreat.com
• bookyogaretreats.com
• Huge thanks to my mentor Guido Cecilio Garcia Bernal guided me throughout this project.