- Introduction
- Features
- Existing Features and Features to Implement
- Wireframes
- Code Snippets
- Technologies
- Learning Outcomes
- User Stories
- User Flow
- Testing
- Deployment
- Credits
Unity Yoga Collective is a serene oasis of wellness and self-discovery. The studio offers a holistic approach to yoga and well-being, providing a space where individuals of all backgrounds and abilities can come together to explore the transformative power of yoga and mindfulness.
Live webpage here
-
Navigation with links to all pages, responsive on all devices. Navigation in a webpage is crucial for providing a user-friendly experience by enabling visitors to efficiently explore and access the site's content, ultimately improving user engagement and satisfaction. It helps users find information, products, or services, leading to increased usability and retention.
-
Footer with address and Instagram link. The footer is essential in a webpage as it often contains important contact information, like an address, and links to social media profiles such as Instagram, enhancing user engagement and accessibility. It serves as a valuable reference point for users seeking to connect with the website's owner or follow them on social platforms.
-
Favicon for easy recognition. The favicon is important in a webpage as it provides a recognizable visual identity in browser tabs, enhancing brand visibility and user recognition, and it helps users quickly locate and return to the site.
-
Landing page with methodology, newsletter link, and submission form. The landing page with methodology establishes credibility, a newsletter link encourages user engagement and updates, and a submission form captures valuable leads or data, collectively maximizing the webpage's effectiveness in conveying information and fostering user interaction.
-
Free Yoga Online page with embedded Vimeo videos. The "Free Yoga Online" page with embedded Vimeo videos offers accessible, engaging yoga content, promoting health and well-being, and attracts and retains visitors by providing a convenient, in-depth resource for yoga enthusiasts.
-
Teachers page with teacher profiles. The "Unity Yoga Collective Teachers" page with teacher profiles is essential for users to learn about instructors' qualifications and teaching styles, fostering trust and helping students make informed choices when selecting the right teacher for their needs. It enhances the overall user experience and facilitates a more personalized approach to yoga instruction.
-
Methodology page with yoga types in an accordion. The "Methodology" page with yoga types in an accordion format offers organized, accessible information, allowing users to explore diverse yoga styles and understand the methodology behind them, promoting a more informed and engaging yoga experience. It enhances user education and engagement with the content.
-
Schedule page with class details. The "Unity Yoga Collective Schedule" page with class details is important in a webpage because it provides users with up-to-date information about class times, styles, and instructors, helping them plan their participation and fostering a sense of reliability and trust in the yoga program. It enhances user convenience and encourages regular attendance.
-
Pricing page with package information. The "Unity Yoga Collective Studio Pricing" page with package information is important in a webpage as it helps potential clients understand the cost structure and make informed decisions about their investment in yoga classes, fostering transparency and trust while attracting and retaining customers with clear, accessible pricing details. It aids in user conversion and revenue generation for the studio.
-
Contact page with map, address, and phone details. The "Unity Yoga Collective Studio Contact" page is crucial for users to easily locate the studio, establish a physical connection, and contact the business, enhancing accessibility and trust while promoting in-person visits and inquiries. It provides essential information for user engagement and potential clientele.
-
Thank You Newsletter Subscription Page. A special "Thank You Newsletter Subscription Page" for our community members. When users subscribe to our newsletter, they are redirected to this page, which expresses our gratitude and provides a link back to the homepage. It's a thoughtful way to welcome new subscribers and will re-direct users to the homepage by clicking the hyperlink or re-direct automatically after 10 seconds.
-
404 page - Custom 404 page and the auto-redirect feature to the homepage. The custom 404 page and auto-redirect feature have been seamlessly integrated. This ensures that when a user encounters a 404 error, they will experience a smooth transition to the custom 404 page and subsequently be redirected to the homepage.
Existing features:
- JS Accordion for the methodology page: a JavaScript Accordion implemented on the Methodology page to create an interactive and user-friendly interface that allows users to easily expand and collapse content sections for a more organized and engaging experience.
Features to Implement:
- Fix the newsletter submission form (PHP required: rectify the newsletter submission form by implementing PHP to ensure proper functionality and data processing.
The Unity Yoga Collective website utilizes the following technologies:
- Figma for design.
- Material Icons and FontAwesome for icons.
- CSS for styling.
- HTML for content.
- JavaScript for responsive menu and accordion.
- Visual Studio Code for development.
- GitHub for version control.
- ChatGPT for content creation.
From a student's perspective, working on the Unity Yoga Collective Website project offered invaluable learning experiences and skill development in several key areas:
- Web Design and UI/UX Principles: Gained hands-on experience in web design, focusing on user interface and user experience principles to create an aesthetically pleasing and user-friendly website.
- Responsive Design Techniques: Learned to implement responsive design techniques using CSS and JavaScript, ensuring the website's accessibility and optimal viewing experience across various devices and screen sizes.
- Content Management and Organization: Developed skills in effectively organizing and presenting content, ensuring that information about yoga classes, schedules, and instructors was clear and easily navigable.
- Front-End Development Skills: Enhanced front-end development skills, particularly in HTML, CSS, and JavaScript, by building various features such as navigation menus, accordions, and embedded video content.
- SEO and Web Accessibility: Gained knowledge in SEO best practices and web accessibility standards to make the website more discoverable and inclusive.
- Project Management: Learned to manage a web development project from conception to deployment, including planning, design, development, testing, and deployment phases.
- Version Control and Deployment: Became proficient in using version control systems like Git and GitHub, and learned the process of deploying a website to GitHub Pages.
- Problem-Solving and Debugging: Enhanced problem-solving skills by identifying and resolving various technical issues during development, including responsive design challenges and cross-browser compatibility.
- Collaboration and Communication: Improved collaboration and communication skills by working with a team (real or hypothetical) and using tools like ChatGPT for content creation.
- Creative Expression and Branding: Explored creative expression in web design and learned about branding considerations, particularly in creating a website that reflects the ethos and brand of a yoga studio.
This project not only provided practical experience in web development but also offered insights into the wellness industry, particularly the world of yoga and mindfulness, enriching my educational journey.
-
As a yoga enthusiast, I want to explore different yoga classes and programs so I can find ones that fit my needs and schedule.
-
As a beginner in yoga, I need clear information about yoga practices and benefits to understand how it can enhance my wellness journey.
-
As a visitor to the yoga website, I want an easy way to subscribe to newsletters for updates on yoga sessions, health tips, and studio news.
-
As a potential client, I am looking for contact information and location details to plan my visit or to make inquiries about yoga classes.
-
As a social media user interested in yoga, I want to follow the yoga studio on platforms like Instagram to stay connected with the community and get regular updates.
-
Landing on the Homepage
- User arrives at the Unity Collective Yoga website and sees the navigation menu (Home, Free Yoga Online, Teachers, Methodology, Schedule, Pricing, Contact).
- Views the hero section with a welcoming message and a call-to-action button.
-
Exploring Yoga Classes
- Clicks on 'Schedule' to view available classes and times.
- Browses through different yoga sessions to understand what each class offers.
-
Learning About Yoga's Benefits
- Navigates to 'Why Yoga?' section to read about stress relief and flexibility.
- Gains insights into how yoga can improve overall health and wellness.
-
Subscribing to the Newsletter
- Scrolls down to the newsletter section.
- Enters email address and subscribes to receive updates.
-
Contacting for More Information
- Selects 'Contact' for further inquiries or feedback.
- Accesses the contact form or uses provided phone/email details.
-
Following on Social Media
- Checks the footer for social media icons.
- Clicks on the Instagram icon to follow Unity Collective Yoga for regular updates.
-
Accessing the Newsletter Subscription Section
- User scrolls to the 'Namaste Notes' section on the homepage.
-
Entering Subscription Details
- Types their email address into the provided field.
-
Completing the Subscription
- Clicks on the 'Subscribe' button to confirm the subscription.
-
Receiving Confirmation
- Redirects to a 'thank you' page or receives a confirmation email for successfully subscribing.
- The website is designed to be user-friendly, catering to both seasoned yoga practitioners and beginners.
- Emphasis on well-being and the holistic journey of yoga is evident throughout the website.
- The inclusion of testimonials and detailed descriptions of yoga benefits helps build trust and informs new users.
The website has been thoroughly tested on various devices and browsers:
- Mobile (iPhone 14)
- Smaller laptop MacBook Air
- iMac
Responsiveness:
All pages were tested to ensure responsiveness on screen sizes from 320px and upwards as defined in WCAG 2.1 Reflow criteria for responsive design on Chrome, Edge, Firefox, Safari and Opera browsers.
Steps to test:
- Open browser and navigate to Unity Yoga Collective
- Open the developer tools (right click and inspect)
- Set to responsive and decrease width to 320px
- Set the zoom to 50%
- Click and drag the responsive window to maximum width
Expected:
Website is responsive on all screen sizes and no images are pixelated or stretched. No horizontal scroll is present. No elements overlap.
Actual:
Website behaved as expected.
Website was also opened on the following devices and no responsive issues were seen:
- iPhone 14
- iPhone SE
- Samsung Galaxy Android S20 Android 11
- Macbook Air
- iMac 27''
- iMac 24''
Accessibility:
Wave Accessibility tool was used throughout the development and for final testing of the deployed website to check for any aid accessibility testing.
Testing was focused to ensure the following criteria were met:
- All forms have associated labels or aria-labels so that this is read out on a screen reader to users who tab to form inputs
- Color contrasts meet a minimum ratio as specified in WCAG 2.1 Contrast Guidelines
- Heading levels are not missed or skipped to ensure the importance of content is relayed correctly to the end user
- All content is contained within landmarks to ensure ease of use for assistive technology, allowing the user to navigate by page regions
- All not textual content had alternative text or titles so descriptions were read out to screen readers
- HTML page lang attribute has been set
- Aria properties have been implemented correctly
- WCAG 2.1 Coding best practices being followed
Manual tests were also performed to ensure the website was as accessible as possible and an accessibility issue was identified.
I've discovered several errors on the webpage, specifically related to color contrast and headers. I fixed these issues to enhance accessibility and ensure that all users can easily navigate and interact with the content, promoting a more inclusive and user-friendly experience.
Browser Compatibility Checked:
- Safari
- Firefox
- Google Chrome
Functional Testing
Navigation Links:
Testing was performed to ensure all navigation links on the respective pages, navigated to the correct pages as per design. This was done by clicking on the navigation links on each page.
| Navigation Link | Page to Load |
|---|---|
| Home | index.html |
| Free yoga online | free-yoga-online.html |
| Teachers | teachers.html |
| Methodology | methodology.html |
| Schedule | schedule.html |
| Pricing | pricing.html |
| Contact | contact.html |
| Thank you page | thank-you.html |
| 404 error page | 404.html |
Links on all pages navigated to the correct pages as exptected.
Form Testing
The form on the home page was tested to ensure it functioned as expected when correct data was input and when incorrect data was input. The following test scenarios were covered:
Scenario One - Correct Inputs
Steps to test:
- Navigate to Unity Collective Yoga - Home Page
- Scroll down to the form and input the following data:
- Email: your@email.com
- Click Submit
- User should be redirected to thankyou.html page
Expected:
Form submits with no warnings or errors and user is redirected to thankyou.html page.
Actual:
Website behaved as expected with no errors or warnings and redirected to thankyou.html page.
Scenario Two - Missing Required Field Email
Steps to test:
- Navigate to Unity Collective Yoga - Home Page
- Scroll down to the form and input the following data:
- Email: your@email.com
- Click Submit
Expected:
The form does not submit and an Error is displayed to tell the user that the field is required.
Actual:
Website behaved as expected, error message was displayed and the form did not submit.
Footer Social Media Icons / Links
Testing was performed on the Font Awesome Social Media icons in the footer to ensure that each one opened in a new tab.
Each item opened a new tab when clicked as expected.
Footer Contact Information
Testing was performed on the phone number in the contact information section to ensure behaviour was as expected.
Steps to test Telephone Number
- Navigate to Unity Yoga Collective - Contact
- Click the phone number
Expected:
A window is opened asking which device you would like to call from.
Actual:
Behavior was as expected and the window presented me with the following option to call:
- Mobile Phone
Lighthouse Report:
-
Landing Page
-
Free yoga videos page
-
Teachers page
-
Methodology page
-
Schedule page
-
Pricing page
-
Contact page
-
Thank You Page The low accessibility score is attributed to the redirection. In order to ensure users are informed about the impending redirection, I have included a text warning stating that an automatic redirection will occur in 10 seconds unless they take action, in addition to the call to action that directs them back to the homepage.
-
404 Page The low accessibility score is attributed to the redirection. In order to ensure users are informed about the impending redirection, I have included a text warning stating that an automatic redirection will occur in 10 seconds unless they take action, in addition to the call to action that directs them back to the homepage.
W3C Validator results:
-
Landing Page
-
Free yoga videos page
-
Teachers page
-
Methodology page
-
Schedule page
-
Pricing page
-
Contact page
-
Thank You Page
-
404 Page
Version Control:
The site was created using the Visual Studio code editor and pushed to github to the remote repository ‘Unity Yoga’. The following git commands were used throughout development to push code to the remote repo: git add - This command was used to add the file(s) to the staging area before they are committed. git commit -m “commit message” - This command was used to commit changes to the local repository queue ready for the final step. git push - This command was used to push all committed code to the remote repository on github.
Deployment to Github Pages:
The site was deployed to GitHub pages. The steps to deploy are as follows: In the GitHub repository, navigate to the Settings tab From the menu on left select 'Pages' From the source section drop-down menu, select the Branch: main Click 'Save' A live link will be displayed in a green banner when published successfully. The live link can be found here
- Written content by ChatGPT
- Javascript accordion found here
- Burger menu found here
- Icons here
- Iconography here
Media:
- Images by Unsplash
- Illustration by Freepik
- Logo by Igor Dinuzzi