Miletsone Project 1 | Balance - Virtual Yoga & Meditation Classes

Live website can be viewed here

Table of Contents

• Project Goals
• User Expierence
  • Site owner goals
  • User Stories
  • First Time Visitor Goals
  • A Returning Visitor Goals
  • A Member Returning Goals
• Design
  • Wireframes
  • Colors
  • Typography
  • Imagery
• Features
  • Homepage features
  • Login page features
• Technologies
  • Languages
  • Frameworks & Tools
• Testing
  • Validation
  • Performance
  • Responsivness
  • Accessability
  • Known Issues and Bugs
• Deployment
• Credits
• Awknowledgments

Balance is an online Yoga and Meditation class platform. It is just over 12 months old and looking to grow its membership base.

Balance was created as a direct response to the Covid-19 pandemic when all in person classes were cancelled. Balance is now a commercial business looking to expand its membership base and compete in the virtual yoga and meditation class market on both price and offering.

Project Goals

• The aim of this project is to market Balance - a fictional virtual Yoga & Mediatation studio online with the aim of growing their membership base. The projects aims to provide a smooth and simple user expierence with clear information and easily accessable contact and social media information.

User Expierence

Site Goals

Site Owners Goal:

To build a platfrom that provides online Yoga and Meditation classes

• As a site owner, I want to create a virtual platform that allows users to create a yoga practice schedule that works for their life.
• As a site owner, I want to be able to build a virtual community of yogi’s.
• As a site owner, I want to build memberships by offering a free trail.
• As a site owner, I want users to be able to sign up and make contact with Balance easily and quickly when they are on the site.

User Stories:

First Time Visitor Goals:

• As a First Time Visitor, I want to be able to easily navigate throughout the site to find information I want.
• As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.
• As a First Time Visitor, I want to easily see the price for the membership.
• As a First Time Visitor, I want easily know about the organisation, how to join and how to sign up.
• As a First Time Visitor, I want to look for testimonials to understand what their memebers think of them and see if they are trusted.
• As a First Time Visitor, I want to locate their social media links to see their followings on social media to determine how trusted and known they are.
• As a First Time Visitor, I want to easily be able to sign up for a free trial to get an idea of what the membership is like.
• As a First Time Visitor, I want to easily be able to make contact with any queiries or questions I have.

A Returning Visitor Goals:

• As a returning visitor, I want to easily be reminded what Balance is about and how it works.
• As a returning visitor, I want to easily be able to register.
• As a returning visitor, I want to easily be able to contact Balance with any questions or queries I may have.
• As a returning user, I want to easily see testimonials.

A Member Returning Goals:

• As a member, I want to visit Balance and easily log-in to attend a class, take a class on demand or see the class schedule.
• As a member, I want to easily see contact & social media information for Balance.

Design:

Wireframes

• I mainly stuck to the wireframe designs, all changes that were made were to improve the website user expierence and aesthetic.

  • Desktop home page wireframe can be found here

  • Desktop log-in page wireframe can be found here

  • Mobile home page wireframe can be found here

  • Mobile log-in page wire frame can be found here

Colors

• I created a colour scheme of Indian red and White with shades of apricot to for clickable elements on the website. I chose to keep the website crisp and clean with block colors. As the website is a membership service I wanted to ensure key information was not missed and there was very little distractions on the website.
  • Red has over 50 color shades and is color that symbolizes passion, the heat of energy, passion and love to name a few.
  • Yoga & Meditation is part of peoples lifestyle filled with passion, engery and love so after the the colour change I was delighted to use red for the accessability it brought to the website and meaning of color aligns with the brand.
  • The color white symbolizes White purity cleanliness, freshness, and simplicity. It also associated with a new beginning or a fresh start whic aligns with what new concept Balance is offering for with online classes.
  • Aricot is a type of orange color which is associated with energy, cheerfulness, activity, fire and warmth. It was very complimentary with the indian red and white.

Typography

• I chose 'Nunito' from Google Fonts. I chose this font because:
  • The soft and curvy form works well with the brand name, its playful and suits the softer and artistic vibe that Yoga and Meditation has.
  • It's also a sans-serif font which is more accessible for people with dyslexia. Sans-serif is the back-up font if Nunito fails.

Imagery

• All images on the website are of professional quality and fully licensed. All images were taken from Unsplash or Google images Please see 'Credits section for more information on licenses.

Features

The entire site is responsive for all screen sizes and both pages have the same responsive Navbar and Footer. The website was created using Bootstraps 4.6 grid system.

The website has 2 pages:

1. Homepage (seven sections)
2. Login/Register page (three sections)

Features:

Homepage

1. A fully responsive 'nav bar' for users to nagivate through the website easily. desktop & mobile 1 & mobile 2
2. A hero image with the price per month and a strong CTA. The 'Free Trial' CTA is essential to capture the attention of visitors who are hesitant to switch to online yoga.
3. The ‘About’ section is key for visitors to understand how the company was created and the direction Balance is going in. It also is inviting as it showcases the different styles of yoga available and the lifestyle demographics of memebers. The ‘Testimonial’ CTA is a key feature here to draw the visitors attention to how much current members love Balance.
4. The ‘How it Works’ section is key for visitors to get a snapshot of how Balance works and what is on offer.
5. The ‘Meet the Team’ section is an essential feature to draw the visitor's attention to the instructors, its purpose is to let visitors know who will be hosting the classes and that they are real people behind the virtual class.
6. The ‘Testimonial’ section is one of the most important features. Reviews and Testimonials are growing more and more important as consumers are more savvy than ever when it comes to spending money and want to know they are receiving a quality product or service.
7. The 'gallery' was added for aesthetic purposes and demonstrates the yoga moves that are included in the classes
8. The 'footer' contains essential ‘Contact’ & 'Social media' information and a ‘Newsletter sign up’ in order for Balance to update recipients and further market the brand.
9. The 'Login and Register' feature was created to provide users witha clear path on how to sign in to the website to begin or continue their Balance journey.

Section 1: The hero image with jumbotron and CTA:

• I chose a less striking image for the hero image as I wanted the Balance concept, price and free trail CTA to be the first thing visitors see. I had tested other images and they took away from the key information. The current image was still distracting however adding a shadowed overlay helped mute out the image and draw more attention to the key information and CTA.

  • The follwoing user stories addresses this section
  • As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.
  • As a First Time Visitor, I want to easily see the price.
  • As a First Time Visitor, I want to easily be able to sign up for a free trial to get an idea of what the membership is like.
  • As a returning visitor, I want to easily be reminded what Balance is about and how it works.

Section 2:

• The ‘About’ section is an information section, detailing how Balance was formed, the target audience, the different styles of Yoga and Meditation available and direction Balance is going in. The ‘Here what our members have to say’ button is an essential CTA to draw visitors' attention to how much current members love Balance. The copy was created by me.

  • The follwoing user stories addresses this section
  • As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.

Section 3: Join :

• The ‘Join Section’ states clearly:

  • How to join

  • What is included in a membership

  • Information on classes

  • The icons in the heading are also visual aids for visitors who may need them. The icons were made responsive using hover.css to add some movement to the site.

  • The copy was written by me.

    • The follwoing user stories addresses this section
      • As a First Time Visitor, I want easily know find out about the organisation, how to join and how to sign up.

Section 4: Meet the Team:

• Having the team on the home page is essential for visitors to know who will be guiding their Yoga and Meditation practice. It also states the combined year of teaching experience and information on how to login and where to view the class information.

Section 5: Testimonials

• This section is to inform visitors of how current members feel about Balance and help consumers make an informed decision. The carousel was one feature I wanted to incorporate on the website to bring the website to life with some movement.

  • The follwoing user stories address this section
    • As a First Time Visitor, I want to look for testimonials to understand what their memebers think of them and see if they are trusted.
    • As a returning user, I want to easily see testimonials.

Section 6: Gallery

• The gallery was planned for in the project inception when the wire frames were created. Its purpose is to make the website visually pleasing and showcase some of the more common poses that are practiced at Balance. In order to reduce the scroll depth on mobile only two images will appear.

Section 7: The footer on both homepage and login and register page

• The footer ended up being different to the wireframe. A newsletter sign up form is a better feature than a contact form for an online business. It is easy to sign up and helps Balance build brand awareness and reach consumers in their inbox.The contact information is hyperlinked for good user experience and one-click step to make contact on mobile and email.The social media icons bring visitors to all their channels so users can get further information and see the content and followings on each platform.

• The follwoing user stories address this section

  • As a First Time Visitor, I want to look for testimonials to understand what their memebers think of them and see if they are trusted.
  • As a First Time Visitor, I want to easily be able to make contact with any queiries or questions I have.
  • As a returning visitor, I want to easily be able to contact Balance for any questions or queries I may have.
  • As a member, I want to easily see contact & social media information for Balance.

Login and Register page

Section 1: Alert box

• The 'alert box' informs users how to avail of the free trial, it serves as a further prompt for users to register.

Section 2: Login and registration forms

• I decided to keep this page clear, concise and fuss free. This section has two clear forms and directs users to which form they need. The login form is for existing members and the registration form is for new members to sign up. The fixed-top Navbar directs visitors back to the home page to re-look at any information if they wish.

• The follwoing user stories address this section

  • As a member, I want to visit Balance and easily log-in to attend a class, take a class on demand or see the class schedule.

Future Features

As I progress with my studies I would like add:

1. Confirmation emails when a user registers to Balance.
2. Confirmation emails when a user signs up to the Balance newsletter.
3. A chat bot for instant chat to answer any queries, give additional information or to chat to a team member.
4. Videos with snippets of online yoga class.

Technologies used

Languages used

• HTML5

  • The project uses HTML5 to make up the basic elements and structure of the website.

• CSS3

  • I have used CSS3 to add my own custom styling and to change default bootstrap styling where and when needed.

Frameworks, Libraries and Programs Used

• Bootstrap 4.6

  • The Bootstrap framework was used to help build the responsive structure of the site and add default styling.
  • It was also used to import JavaScript and Jquery which was used for the collapsible navbar.

• Hover.css

  • Hover.css was used on the Font awesome icons in the ‘How it Works’ section to add the pulse-grow 2D transition while being hovered over.

• Google Fonts

  • Google fonts were used to import the 'Nunito' font into the style.css file which is used on all pages throughout the project.

• Font Awesome

  • Font Awesome was used on both pages on the website to add icons for aesthetic UX purposes and visual aid purposes.

• jQuery

  • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.

• Git

  • Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

• GitHub

  • GitHub is used to store the project's code after being pushed from Git.

• Balsamiq

  • Balsamiq was used to create the wireframes during the design process.

• Google Chrome Developer Tools

  • I used Google chromes built in developer tools to help with the styling of the site, selecting colors and to troubleshoot any bugs I found.

• Am I responsive

  • This was used to check responsiveness on different screen sizes and create the showcase image for the project.

• Google Lighthouse

  • I used Google lighthouse to test the performance of my site.

• The W3C Markup Validation Service

  • I used this validation tool to check my HMTL for errors.

• The W3C CSS Validation Service

  • I used this validation tool to check my CSS for errors.

• Color contrast

  • I used this tool to compare colors for the website.

• Autoprefixer CSS online

  • I used this to check to this Autoprefixer online to parses the CSS and add vendor prefixes to CSS. It is recommended by Google and used by Twitter and Taobao.

Testing

Validator

The W3C Markup Validator and W3C CSS Validator Services were used to validate both pages of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator Homepage - Results
  • The homepage passed with 0 errors
• W3C Markup Validator Login page - Results
  • The Login page passed with 0 errors
• W3C CSS Validator - Results
  • The CSS passed with 0 errors
  • I also put the CSS through Autoprefixer CSS online to improve the CSS and add vendor prefixes. The CSS validation came back again with 0 errors but had some warnings. I was assured the CSS was correct by slack team members & mentors and to document the warnings.
    • The warnings can be found here

Performance

• Google Lighthouse was used to measure the performance and speed of the website.
  • Click on the page name to see the result for desktop: Home | Login
  • Click on the page name to see the result for mobile: Home | Login

Responsivness

• The website was tested using desk the 'inspect' option availabale on Google and Internet explorer for differnt screen sizes and mobile. The following devices showed zero errors with responsiveness or format.
• Devices:
  • Samsung Galaxy S20
  • iPhone X
  • iPhone 11
  • Lenovo IdeaPad S340-14IIL
  • Samsung A70
  • Toshiba satellite

Accessability

• Google Lighthouse gave the website a score of 96% accessability for both mobile and desktop. 4% was lost for 'Background and foreground colors do not have a sufficient contrast ratio.' This was flagged earlier on in the project and changes were made to increase the score to 96%. Futher updates to the project would look to improve the website accessability and gain a score of 100%.

Known Issues and Bugs

1. The gallery images squash on iPad screens with screen size '768x1024' when tested on google dev tools. I was uable to test this on an actual iPad. The issue does not occur on iPad pro when tested using Google dev tools. I tired to resolve this using many different media queries, display options and vendor prefixes and I could not fix the issue in time.
2. On large screens the middle gallery image is cut off at the end.
3. The gallery images do not shrink when the 'zoom' is reduced.
4. The Nav bar was causing an issue on desktop and mobile. When a Navlink was click it would navigate to the correct section however the Navbar would cover the section heading which I have since learned is common with single page websites - this has since been fixed.
5. The collapasable Nav menu for mobile did not collapse when a link was clicked on, this issue was resolved by adding data-toggle and data-targets to each nav link however when the Nav bar is clicked on for desktop it flashes like it is collapsing like the menu shoule, I would look to improve this in the future.

Deployment

Creating Repository

1. I created the repository using the following steps:
2. I logged into my GitHub account and clicked the green button near the top left of the page displaying the text 'NEW'.
3. This took me to a page with the option to create a new repository. Under the repository template I clicked on the code institute template.
4. I chose a name for my repository and then clicked the create repository button.
5. I opened the new repository and clicked the green gitpod button to create a new workspace in Git Pod for writing and editing my code to develop the website.

GitHub pages

My project was deployed to GitHub pages using the following steps:

1. I logged in to my GitHub account and opened the relevant repository.
2. I clicked on the settings button.
3. In settings I scrolled down to the GitHub 'pages' tab.
4. Under source I clicked the dropdown button labelled 'None' and selected Master Branch.
5. This then provided mw with the link to the website.

Forking the GitHub Repository

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository just above the "Settings" Button on the menu, locate the "Fork" Button and click.
3. This will provide you with a copy of the original repository in your GitHub account.

Making a clone

1. To make a clone of my project use the following steps.
2. Go to my account and locate the relevant repository.
3. Next to the green Gitpod button, click on CODE.
4. Click on Download Zip.
5. Once downloaded, you can extract the zip file's contents and save to a desktop and run the website locally.

Credits

Images:

• Unsplash

  • Gallery 4: Mathilde Langevin
  • Gallery 8: Sonnie Hiles
  • Gallery 7: Zen Bear Yoga

• Google images

  • Meditation
  • Person 1
  • Person 2
  • Person 3
  • Person 4

• Testimonial carousel

  • Source

Acknowledgements

• Code Institute for providing endless help and resources to get me this far.
• My mentor Reuben Ferrante for the help and patience to guide me through my first project.
• The Mini Feb 2021 group, wider slack community and the tutors for all the help support and feedback for the last couple of weeks.
• Friends and Family who have taken their time to offer advice and feedback during the development of my project.