Giter VIP home page Giter VIP logo

vincentkan001-project1's Introduction

Elite Fight Club Project 1

One of the most renowned martial arts gym in Bangkok, Thailand that is home to many Muay Thai and Mixed Martial Arts Practitioners. Elite Fight Club attracts thousands of students every year and many more wants to inquire about the gym and hope to try it out someday or if they have a chance to visit the land of smiles.

I have been to the gym myself and have tried out their training and facilities. This project is based on my personal journey from how i found the place to my experience with the training and trainers I came across while I was there.

In this current Era, Martial Arts is trending in many parts of the world and more and more people would want to experience the training in countries where the art originated from. Many people these days would prefer to go online to research more about the gym they are about to or intending to visit to gather more information and of course to see if the gym and its curriculum meet their individual requirements.

I started thi project with the intention to provide more information for users who are keen to find out more about what the gym has to offer and also to provide them with the essential information which they should know before heading there.

I've also made the site mobile responsive as based on statistics, there are more people surfing internet on mobile as compared to desktop or laptop in this current era. This is because of the convenience that mobile devices bring as more and more people are searching for information on the go.

UX

As I've described above, this website is to promote the gym as well as to provide information for intended users to be well informed before trying it out.

I would say that intended users are:

  1. Martial Art Lovers, Particularly for those who are into Muay Thai and Mixed Martial Arts.
  2. People who wants to know more about training in Thailand.
  3. Users who have heard of Elite Fight Club through various channels and are eager to know about their training style, schedule and relevant charges.
  4. Last but not least, people who are keen to try but do not know where or how to start.

Users who visit my site would be looking for the below mentioned information:

  1. Location of the gym.
  2. How many outlets do they have.
  3. Training Timings.
  4. How accessible is the gym.
  5. Can the place be reached by public transport
  6. What kind of training do they provide.

I made the website easy to understand and with afew pages that would enable users to find the information they want within 3 clicks. Else it would be too much of a hassle to use.

As a user, the most important thing for me to look at is what does the gym provide, in terms of training. not so much on equipment in this case as it is a martial arts gym not a regular weightlighting one. Hence I would like to be able to find that information at a glance. This is essential as the type of training provided would be the key indicator of whether i would decide to pay them a visit and try it out or not.

I would also want to know how easy it is for me to find and get to the gym. Especially since I would most probably be a tourist in Thailand, I would not be very familiar with the place and would definitely require assistance in finding my way around the place/city.

I would also like to know their schedule and training timetable so as to plan my itinerary better. Since I am a tourist, i would like to be able to enjoy my time in Thailand as well. So having a schedule would definitely come in handy.

Last but not least, In terms of practitioners who are seriously into the sport and would like to train professionally and might like to compete someday. They would also want to know what kind of trainers do the gym provide. Whether the trainers possess the relevant experience and skill sets required to help them take their game to the next level.

Features

Part 1 - index.html

This part is essentially the landing page with the hero image with a call to action which encourages users to try out the gym. I've included a free one day pass for them to sign up for. This would prompt users to immediately get a pass since its free and of course they get to try out the gym to see if the kind of training provided is what they are looking for.

I've also included a write up about Elite Fight Club for users to get more information on the gym as well as some video introduction about Elite. This would give users an Idea of what they are signing up for even before heading down. These would help manage their expectations as well as "entice" users to give it a try. I chose videos that shows the toughness of their training as well as how fun training there could be.

At the bottom of the the home page, I've included the trainer's profiles of which users can see how experience their trainers are as well as their skills specializations. This would also allow users to guage if the trainer is suitable for them and vice versa.

Part 2 - training.html

For this page, I've included the types of training provided by Elite Fight Club for users to find out more about the different martial arts they cater to. This is so that users could have a better understanding of what they are about to do it also gives them a kind of mental preparation as compared to not knowing what's about to come.

At the bottom of the training page, I've also included a simple user review of their training for people to see how others rate the gym as ratings play an important role nowadays. This is a good feature to have.

Users can also rate their training after they have tried it out on their own.

The rating is essential for both the gym as well as its users. For the gym, they gather data to continue improving and for users, they get honest feedback from real users which they can use to infer and make their own decisions as to whether to join or not.

Part 3 - schedule.html

This part, i've done a mobile responsive table to allow users to check out the gym's weekly schedule at a glance. As I've mentioned earlier, most people are surfing the internet on their mobile phones now and especially when one is traveling, beside the hotel, its hard to find a decent computer elsewhere, hence mobile responsive website plays a crucial role and people would be trying to access website from anywhere they are at. I've made sure that my site loads fast on mobile so that it give a pleasant user experience.

The schedule also gives users information for them to decide their mode of transport and to plan their activities for the day. Unless the user is a professional fighter, he or she would definitely have sight seeing or other things on their to-do list. This would aid them in planning their itinerary would i think would greatly value add especially for those who are travelling in groups.

Part 4 - package.html

Now for the important part. As a user, I would definitely want to know what are the charges like at a gym I am about to attend. I would definitely want to know whats included in the package as well as the terms and conditions governing the said packages.

I've made the packages using mobile responsive pricing table will look clear on mobile at a glance. Users can also sign up for the packages by clicking the sign up button.

Part 5 - contact.html

This is the part where users get to sign up for the gym and also find out how to get to the gym. I've included the map of the location for easy reference. Address, phone number and opening hours also provided.

Existing Features

  1. Allowing users to view videos and check out trainer profiles
  2. Allowing users to rate the training and gym
  3. Allowing users to sign up on the website itself.
  4. Google maps attached for reference.
  5. Mobile users can click on the phone number to contact the gym directly.

Technologies Used

I've made use of bootstrap, flexbox and some javascript for the submit buttons.

Testing

I've taken the mobile first approach and made my website mobile first before normal computer browsers. I tested every page to ensure that they look good on my mobile devices.

I've made the buttons functional with simple javascript.

Deployment

Basically I started out with repl.it as it was easy to check my own work. Subsequently, I transfered everything on to AWS cloud9 and finally uploaded on github.

Credits

www.elitefightclub.com www.naksugym.com

Content and images are from elitefightclub.com inspiration from naksugym.com

Content

Media

  • The photos uses were cropped from Elite Boxing Gym website.

Acknowledgements

  • I received inspiration for this project from my own gym as they have a really simple website. It made me want to do one to enhance whatever they currently have

vincentkan001-project1's People

Contributors

vincentkan001 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.