code-institute-submissions / sheffield-fans-derby Goto Github PK

Sheffield Fans Derby

The Sheffield Fans Derby, is very close to me personally, as I've been a part of the SFD (Sheffield fans derby) team, from the beginning. It's basically a charity football match, for two sets of fans, (Sheffield Wednesday fc and Sheffield United fc) both of the teams players, have to raise a minimum amount of money, to be able to play, with all of the profit going to the specific charity, this year its SHC (Sheffield Hospitals Charity), the matches take place in stadiums, the last match was at Rotherham United fc's ground, The New York Stadium, which tickets are sold to watch the match, so again, money from that goes straight to the charity.

UX

This website, is for football fans, that either want to play in a charity match, representing their local football team, or if they want to purchase tickets and find information out about the charity match, so they can come down and support their team.

For example, User 1, wants to play for his team, Sheffield United. So, as he's first brought to the home page, straight away, in the middle of the screen, is a section saying, "Represent your team & raise money for charity!" with the football teams logo underneath, followed by a red button saying "United fans, sign up here!" So User 1, clicks on the button, which then takes him through to the United Fans page. On this page, it has basic straight forward information, stating, he can submit his information, so he can try out in the trials for the team, along with requirements to be able to play, for example each succesful trialist, must raise at least £60 for the nominated charity, along with £20 registration fees. User 1 then enters his information and then waits to hear back, about the upcoming trials for the team. So, to summarise, User 1 wanted to perform an action of signing up to play for the team, in which he could achieve that goal easily by following the eye catching section on the home page, or he could of easily looked on the navigation bar at the top, seen the Red "United Fans" button, in which would of taken him to the same sign up page, so he could complete his goal and sign up to play.

Now, User 2, isn't as young as he used to be, so he's not too fussed about playing, but is interested about the Fans derby match itself, so as he comes to the home page, like User 1, he does come across the section in the middle about signing up to play, but, just to the right of it, is a yellow coloured section (same as the Tickets button on the nav bar), in which it shows a picture of a crowd, from a previous match, along with "Don't fancy playing? That's fine, you can still support by buying a ticket and cheering your team on!For ticket information, and to purchase tickets Click here!" Straight away, User 2 thinks, that's perfect, he can click on the link, found out how much the tickets would be to watch the match, once he clicked on the link, he also finds out he can purchase the tickets online, as a limited amount of tickets are available, and its for a good cause, he's able to purchase the tickets there and then and not have to worry about buying them on the day, and not being able to get in. To summarise, User 2 wanted to perform the action to enter the website to find out information about the match itself, so he could watch it, following the stand out section on the home page, or even the Tickets button on the navigation bar, he then had access to the Tickets page, completing his goal, not only being able to find out how to purchase the tickets, but also the price and availability too.

The design with having the main home section about signing up and tickets being available to buy, was done so people would keep focus on what they intended to do, when they arrived on the page in the first place. The landing page can take them in any direction, incase they do feel like they've clicked on a wrong link, with all the buttons, being the same colour as the relevant page's background, they can easily identify, where they are at any given time.

Unfortunately, all the initial diagrams of the website I designed, were drawn out first on paper, so I don't have any links to prior designs to share I'm afraid.

Features

Home page features: has basic information on where to sign up to play can easily access information about tickets for the match further down the page, gives insight into the charity that will be benefitting from the money raised, along with link for more information

Wednesday Fans page features: Allows users to sign up to have their chance to play for their team, by filling out the form and clicking submit

United Fans page features: Allows users to sign up to have their chance to play for their team, by filling out the form and clicking submit

Tickets page features: Allows users to buy tickets by filling out form, and clicking submit

Match history page features: Allows users to look at results from the previous 15 matches, the user can also click on links to see full galleries from the specific matches

Charitys page features: Allows users to find out more information on what they'll be helping improve about the nominated charity. It does also include a link, direct to the charities website, to they can have a look at the great work they do, themselves, also their social media links too.

All of the pages, include the features of a navigation bar at the top, so they can easily navigate between pages, with background colours matching the buttons, so they can easily tell which page they're on. Also, the footer includes links, so they can follow SFD on social media too.

Features Left to Implement: Some features I would like to implement in the future, would to have more photos, set up carousel style on the match histoy page. I would also, want to be able to implement Emails being sent out, for when people do sign up, they get a courtesy email saying, thanks for applying, we'll be in touch soon. Finally, I'd like to include a actual transaction, for when people want to purchase tickets on the Tickets page.

Technologies Used

The only frameworks that I used in this, was Bootstrap. The reason I used this, was because of the simplicity of being able to easily organise the parts of the page, how I wanted it

Seeing as Sheffield Fans Derby, is a real thing, some information that I used on my project, was taken from the SFD website itself, url: http://www.sheffieldfansderby.co.uk/

The nominated charity that it's raising money for (SHC), I gathered some information from that website too, url: https://www.sheffieldhospitalscharity.org.uk/

Testing

I believe I have tested the full website, to the best of my abilities, for example:

User 1, as said above, he came to the page to be able to sign up to play in the match. Now, he did initially click on the big sign up button in the middle of the page, but he could of equally, looked at the red button in the navigation bar, in which it would of taken him to the same destination point. Now, when he got to the form sign up, Once he entered in his information to submit, if any of the information was wrong, for example, he missed his name, or his email was invalid, a message would appear so, so that he could correct his mistake and not miss out on the oppotunity to play.

User 2, as said above, came for some information about the match, possibly to watch, as he isn't interested in playing. straight away on the home page, its straight forward, tells him about where to find more information out about the tickets. He could of equally clicked on the Tickets button in the navigation bar (colour coded to the same background) and either would of taken him to the tickets page. Once on the tickets page, it's simple enough to show him the prices of the tickts, and easy enough to buy, if he was to make a mistake and miss out his name, or enter an invalid email, a message would appear telling him so, as the tickets would go to email, its imperative, that his details are correct.

Both of the users came to the website with their own goals, in which they were able to carry out simple actions to complete their goals.

If another user who's playing, but wants to look at previous results thats occured over the years, the user can: 1, click on the Match History button on the navigation bar 2, once the user is there, they can then scroll down and view all of the previous results 3, If they are also interested, they can click on the links below every result, which will open up another browser tab, and take them to a website, which will show them a gallery of photos from that event.

If another user wants to find out about the charity that money is being raised for, the user can: 1, if they scorll down on the home page, their is a section about the charity, saying who it is, and a brief introduction into what they do, they can either click the link there or click the link in the navigation bar and it will take them to the Charity page 2, once they're on the charity page, they can read some more information about the great job the SHC does, but if they also wanted, they can click on the link to view the SHC website in another tab, or they can click on the social media links and follow them on there too.

I have tested my website out, on various screen sizes including: -Standard computer screen - 1880 x 581 px -iPad 768 x 1024 px -iPhone 6/7/8 - 375 x 667 px

The project itself does scale down and look different as the screens get smaller in size, for example Computer screen: would have the sign up section and the ticket section side by side, along with the charity information directly below. iPad screen: the sign up section, the club badges are now in a column, showing one badge first, with button underneath, then the next badge underneath that. The ticket section, has also been pushed below, so as you scroll down the page, you can see it's all still there and not squashed. -iPhone 6/7/8 screen: Very similar to the iPad screen, except for the naviation buttons, instead of being in a row of 6, they're now in a 2x3 box section, with the padding removed, so they don't take up so much of the screen, the images have also been scaled down, so again, they don't take up too much of the screen quantity.

Some of the issues I had in the development, and that I've not fully been able to correct yet, is the placement of the title in the header, I could get it to sit correctly when on the standard computer screen, but as the screen size down scaled, it would often disapear, below the logo and behind the nav bar, so I've managed to get the logo to downsize as the screen size does, so that it does now stay on the screen, but I'm not fully happy with the total outcome.

Another issue I occured, was I wanted some pictures with the sign up forms, but I was struggling to control the images positioning and the sizes, especially when it came to downsizing the screen size, so in the end I just left them out.

Deployment

The project itself is hosted on Git Hub, So all of the work was carried out on Git pod, it then gets added and commited to the git pod repository, which once its been commited, it then gets pushed to git hub itself, then once on git hub, it is then published onto its own Master branch, to view at: https://blakeman260.github.io/Sheffield-fans-derby/index.html

Credits

Content The text and images used for my project, were taken from the SFD website (http://www.sheffieldfansderby.co.uk/) along with information about the charity SHC (ttps://www.sheffieldhospitalscharity.org.uk/)

Media images for the match history being taken from Neil Tilbrooks flickr albums (https://www.flickr.com/photos/juddy666/albums)

I received inspiration for this project, from actually playing in the Fans derby matches myself and having experienced the whole matches and outcomes, it really does help to raise money for such a goodf cause.