My goal with this project was to create an attractive site for a gym in London. The gym is open to everyone and has a range of classes, from beginner to advanced, that members can sign up for. The site also has info on equipment, opening hours, location, a schedule for classes and some info on the classes from the trainers who run them.
The goal of this site is to maximise users of the gym ensuring that anyone who wants to use it can find everything they need to start doing so and also to increase the number of members by having non-members sign up.
Users of this site will be members and non-members, who just want to work-out, and members who want to book a class.
Non-members can check the equipment, opening hours/location and use the gym facilities upon paying an entry fee. Non-members can also see offers, read testimonials and potentially sign up for membership. The same can be said for members except they get free entry. Members can also book classes from a range of classes, ranging from begginer to advanced. These user-types will be enticed by our prices, impressed with our facilities/testimonials/classes, and will find all the info they need, logically laid out, to start using our gym.
Info will be grouped into three pages, home, schedule and about. The homepage will feature offers for potential members, info on the equipment, and testimonials from existing members. Grouping these pieces of info will hopefully encourage non-members to sign up for membership. The schedule page will feature a timetable of the classes, a phone number to make a booking, and some info on the classes from the trainers who run them. Everything a member needs to book a class is on this page. The about page will feature all the info a user could want. It will go more in-depth about the equipment, location/opening hours and the classes.
The homepage will feature picutres of happy people exercising to convey the feeling that our gym is a nice place to exercise and the theme of the site will be blue and white for the same reason.
The schedule page will have a timetable for the classes and some info about said classes, with a picture of the trainers next to the info. This will help members find a class that suits them. The pictures/text will hopefully encourage members to book a class by establishing a personal connection with the trainers.
The about page will feature a section about the equipment with a picture. To let users know about all the equipment the gym has. Also a section about where to find us, with a picture/map. And finally a section about the classes and trainers who run them with a picture.
I will use Bootstrap as a mobile-first framework for fast building and designing of the site.
- As a non-member I want to use the gym facilities. I go to the about page, check the equipment, opening hours, location and entry fee.
- As a non-member I want to sign up for membership. I check the gym has the right equipment. I check the opening hours and location. I read the testimonials to see what existing members have to say about the gym. I possibly check the schedule to see if there is a class that is suitable for me. I click the button to sign up for membership.
- As a member I want to book a class. I check the schedule to see if there is a class that suits my experience level and is at a time when I am available. I phone the number and book a class.
Wireframes for this project can be found in assets/wireframes
- Navbar - allows users to fluidly move between site pages by clicking on navbar items. The logo will double as the homepage link. Social media links on right.
- Membership sign up button - allows non-members to sign up for membership.
- Schedule timetable - allows members to book classes by checking availablility and calling the number to book a class.
- Playable video about classes on about page - allows users to learn more about the classes by watching the video.
- Database to store info of members allowing them to sign-in and book classes without phoning up.
-
- This project uses Bootstrap as a responsive, mobile-first framework for quick building and designing of site.
-
- This project uses Google Fonts for a range of fonts.
-
- This project uses font awsome icons for social media icons.
-
CSS code to center text on image taken from w3schools.
-
Code for hero image dark-overlay taken from Code Institute.
- I recieved inspiration for this project from Code Institute - User Centric Frontend Development - Project Ideas