In this project I have created a new website for a fictional yoga studio set in the city of Glasgow. The name stems from the original idea of a yoga studio based in the United kindgom, this was then adapted to fit with Ci being based in the Republic of Ireland, hence the name Yoga Republic. The website is a designed to be of use to users who are new to yoga and are looking for more information as well as existing yoganistas looking for a local studio that aligns with modern day trends in ethos and value.
I approached this project with mobile first design principles to create a responsive webpage that is intended to look good and and perform well on any size of device. I have also put good user experience at the front and center of all designs and have strived to create an intuitive, informative and enjoyable journey for my users.
- I identified 2 groups of user for this site, firstly, users that are new to yoga and looking for more detailed information. Secondly, existing yoganistas who are looking to join a local community of practitioners.
-
- Should be able to quickly gain an overview of what the studio is about via the landing page.
- Should be able to see who the instructors are that lead the classes.
- Should be able to see what classes are available at the studio.
- Should be able to identify what level of experience is required to take a specific class.
- Should be able to get detailed information on times classes are held.
- Should be able to contact the studio and make a booking or find out further information.
-
- Should be able to do all the above.
- Should be able to gain an understanding of the core values of the studio.
- Should be able to access social media platforms and engage with the broader community.
-
- From the above information I was able to determine what would be of considerable value when visiting the site and from that developed the following scope and goals:
Yoga Republic is a yoga studio based in the Glasgow area, looking to create brand awareness and introduce potential members to the studio with hopes to expand its client base. Specific goals for the business are to offer a platfrom that will inform:
- the types of yoga on they offer
- the times of the classes
- contact details and location of the studio
- call to action to get prospects to try out a class
- social media links to engage with the community
- future goals are a platform to generate leads from site visitors
Yoga Republic will be useful to users looking to find a specific yoga style suited to their fitness/ability level. Get detailed information on the various styles of yoga on offer and the teachers who lead the classes. See exactly when and where they need to be in order to join a class. Have access to an online form if they would like to be contacted directly by someone from the studio.
-
- This is the first section and contains the Yoga Republic heading and the navigation elements.
- This section introduces the user to Yoga Republic with an eye catching animation to grab their attention and a welcoming message introducing them to the site.
-
- The navigation bar consists of 4 links, namely Home, About Us, Our Yoga and Contact Us.
- The Home link directs the user to top of the Home page.
- The About Us link directs the user to the about page. Also located within the Home page, users have access to more information about the studio by following either the Our Community, Our Values or Our Yoga links respectively, which will open eithe the About page or Yoga Page.
- The Our Yoga link directs the user to the our yoga page which contains detailed information on the yoga styles taught and availability of classes.
- The Contact Us link directs users to the contact page. Also located within the Home page, users can choose to either follow various calls to action which will take them to the Classess page or follow the Contact Us link which will open a contact form for submission.
- A further design element of the navbar is that it scrolls with the user as they navigate from the top down through a page, giving the user the flexibility to move on through the site without having to scroll back to the top.
- One of the key factors with the site is responsive design, and with the navbar this is carried through in the way in which it behaves on smaller screens, with it taking up 100% width and stacking for easier readability and an improved user experience that doesn't detract the focus away from the site.
-
- The home page starts with the hero image and is broken down into a further 3 sections.
- The welcome message gives a very concise message which helps to convey to the user what the site's main goal is and build on that in the form of the studios values and sense of community.
- The about us cards act as a call to action to direct the user towards very specific goals, based on what is important to them. Whether that be the studios community, values or yoga teachings.The cards also portray this through the use of graphical icons.
- Lastly the home page has a direct call to action prompting the user to take the next step and either get in touch with the studio directly or navigate further into the site to gain more information.
-
- The about us page opens with a poweful quote regarding community in an attempt to ellicit the user to connect with the studios values and engage with its community. It also contains information regarding the instructors, and a further call to action.
- The instructors cards outline each teachers name and a brief bio pretaining to their role in the studio. On mouse over the card is transformed to scale up and demand the users attention. Mousing over the instructors name will also change the text color, so as to draw the users attention in even more.
-
-
The page contains all the relevant information the user would require in order to gain a better understanding of the offering in terms of yoga styles taught and the availability of classes.
-
Flip cards detailing the styles of yoga the studio offers and the level required to participate in a class.
-
A timetable, detailing which days particular styles are taught on and the times of the class.
-
A call to action is present to spur the user to either book a class or get in touch with one of the team.
-
-
-
-
The time table and flip cards elements are designed to be responsive on smaller screens and stack on top of each other so as to retain readability without breaking immersion.
-
-
-
-
The contact page again reinforces the call to action driven through the site, encouraging the user to get involved either by contacting the studio through traditional means such as mail or phone, or through a sign up form. There is also a google map, allowing users to gain a physical sense of where the studio is located.
-
The form will allow the user to get signed up to Yoga Republic to start their mindfulness and fitness journey with the community. The user will be able specify if they would like to take part in the various activities offered at he studio. The user will be asked to submit their full name, email address and phone number. On submit the user will be taken to a Thank you page, with the full nav bar enabling them to continue their journey through the site.
-
-
-
- When submitting the form from the Contact Us page, the user is directed to a thank you page, reinforcing the idea that their form has been recieved with a message informing the user that someone from the studio would be in touch.
- The page retains the full navigation menu should the user wish to continue to browse for more information on the site.
- The page has the contact details and google map on display, again to reinforce the idea of availablity through open communication.
-
- The footer container social media links that open a new browser window to the studio's Facebook, Twitter and Instagram pages. There is also a floating "up" arrow to take users back to the top of the page without having to scroll up manually. The arrow was designed to incorporate the YR logo so as to help build brand awareness with the user as they navigate through the site, on a more subconscious level.
- The studio would like to use the Sign Up Page to help generate future leads, collecting contact information from users to build a database of leads to follow up at later stage.
- The addition of an interactive calender to be able to check live class times and make an online booking.
- The addition of a blog section, to interact more actively with the community.
- A store page with the ability to prepay for booked classes, perhaps some branded merch such as yoga mats, sweat towels, water bottles, yoga clothing.
Throughout this project I have done regular testing. And have reloaded and refreshed the pages multiple times after each addition and modification. Various bugs were found in terms of images not diplaying correctly, positioning, buttons and links not working. Mostly through revision of the HTML and CSS course work and some external googling I was able to squash most bugs I encountered.
My first round of testing was functionality testing in which I performed the following actions.
- Checking the External Links such as Facebook, Instagram and Twitter
- Checking the External Links all Open in the new Tab
- Testing Internal Links to About, Yoga and Contact, as well as the sub links such as #top
- Testing to see if the required fields are required
- Testing the Submit Button
-
Validating the HTML in the site
- Validation results - W3C Validator
- All pages where tested through the W3C html validator and passed. Links to the results for each page are as follows;
- index.html Validation
- about.html Validation
- yoga.html Validation
- contact.html Validation
- thanks.html Validation
-
Validating the CSS in the site
- Validation results - CSS Validator
- All pages where tested through the W3C css validator and passed. Links to the results for each page are as follows;
To test the flow of the site I forwarded it on to my spouse and work colleagues. After some proding I asked for peer review within my P1 slack channel. Grammarly was also used to test the various pages for any spelling and grammar errors.
I tested the compatibility of my site first by by emulating different devices using the Dev tools in Chrome as well as using the variable responsive setting to check at different breakpoints.
- The various tests that were run were:
- checking to see if the all images and cards scaled and maintained aspect ratio as the display shrunk and grew.
- checking to see if responsive elements within my layout changed at the correct breakpoints, such as the navbar and cards.
- checking to see if my media queries behaved as expected with regards to cards displaying in columns or rows, navigation.
I then tested it on different browsers. I have tested in Chrome, Firefox and Edge. Once I was sure my project worked on windows 10, I then opened it on my phone running Safari on IOS 15.
My second round of testing involved accessibility and readability, checking the live site against various industry standards such as Eightshapes and Webaim to ensure a well thought out UX and UI.
- The first port of call with regards to contrast was Eightshapes Contrast Grid so as to best understand the contrast between all the elements of the site, ensure fonts were readable against backgrounds and that font sizing was consistent to maintain accessibility.
- The resulting output was the following Eightshapes - Yoga Republic
- The site was tested using A11y colour contrast accessibility checker Contrast Checker to ensure maximum readability and accesibility.
- The site was tested using WAVE, web accessibility evaluation tool Webaim to ensure accessibility criterea were met.
- The site was tested for both mobile and desktop scores via Google Lighthouse with multiple tests being conducted.
- For the most part pages consistently scored 100 for accessibility and SEO and high 90's for performance and best practices.
- The site was tested with the amireponsive tool to determine how well it would look on various outputs.
I have hosted my site on github pages, it can be accessed from the following url:
https://iainknox.github.io/yoga-republic/
-
A big shout out to my mentor, Reuben Ferrante, for guding me through the process and offering assistance when neccesary to point me in the right direction.
-
The community on Slack, the help and feedback a student is able to receive from the peers and alumni is a really invaluable tool to have.
-
Finally it was suggested that I look into Bootstrap for help with regards to position and various design aspects. And while I found the resource to be of value, I thought it prudent to rather have built the code myself and in doing so add to my own knowledge and understanding or HTML and CSS.
-
Much of the information regarding Yoga, its styles and origins where taken from various wikipedia articles Yoga Wiki
-
The color was inspired by running various searches through google with the keyword Yoga and then further refined with the help of sites such as Color Space and Coolors
-
The fonts were acquired via Google Fonts
-
The images used throughout the site were sourced from an open source gallery in Pexels. The Yoga Studio Collection was created with the features the studio offers in mind.
-
The animation used on the landing page was inspired by the deisgn used in the Love Running project. It was modified to suit the needs of this site.
-
Icons used throughout the site for social media and card graphics were sourced from the free kit made available on Font Awesome
-
To better add to my understanding, markdown syntax was reseached from Markdown Syntax to aid in compiling and styiling this README document :)
-
While most programming happened at unsocialable hours, when I really got stuck the web is an invaluable resource too, I did a fair amount of review on W3 Schools Concepts such as the flip cards, sticky navigation and grid all came from here.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
