Athboy Community Information Hub

Index

• Project Motivation
• UX
  • User Stories
  • Wireframes
• Features
  • Existing Features
  • Future Enhancements
• Technologies Used
• Testing
• Deployment
• Credits
  • Content
  • Media
  • Acknowledgements

Project_Motivation

The Athboy community information hub website was conceived as a central location where information about Athboy could be hosted. Clubs & groups already have their own web and social media presence but the community hub would provide a central repository with easy to navigate pages and links connecting to all the individual resources. The site is aimed at both those local to Athboy who want to find information quickly and those researching Athboy as a potential destination either for a visit or to relocate to.

UX

After the initial project idea was developed we moved into the UX design phased based on the User Stories that were developed as part of the initial project idea. The scope of the site was set to, four pages, covering;

• Home Page (index.html)
• History Page (history.html)
• Activities & Events (activities.html)
• An Inquiry form (inquiry.html)

The website would be built using Bootstrap to provide the responsiveness required to ensure it was compatible with all device sizes. Bootstrap allowed the site to move the tiles in a vertical manner for mobile devices and display side by side for larger devices. Bootstrap was used as the base framework with custom CSS to give the site a more unique and individual look and feel. A common header & footer across all the pages for continuity through the site was decided. Before development started, Wireframes were drawn up for each page to guide the development and ensure there was no scope creep from the original concept and ensure the project timeline was met.

Header.

The header element was to consist of a nav bar and a hero image. It was decided that the nav bar would be locked to the top of the screen and the hero images was chosen as an aerial view of the village. The photograph made for an inviting image that encouraged the user to look deeper into the site.

Footer.

The footer contains site name details and social media links to accounts associated with the village.

Body.

For the body of each page, we looked at gathering some of the critical information that would make the site useful to users and include images, videos and information that would make the page interesting to both users familiar with Athboy and users who knew nothing about the area.

Home Page.

On the home pages, we included an opening paragraph to introduce the site followed by an introduction to Athboy, which was accompanied with an image to provide visual appeal and break up the text. For both the opening paragraph and intro paragraph, it was decided to not show all the text on mobile screens to prevent there been an over load of text on a small screen. In the next section we added two videos showing the village and surrounding areas. Videos were not set to auto play to allow the user decide if they wanted to view them or move on. The last section on the home page was to include an iframe with google maps to keep users on our site and not need to leave to find out where Athboy was. The map is an important element to provide the user with what they want / need on our site.

History.

The reason for developing the history page was to give the user some additional information and background on Athboy. There were two elements added to this page, the first was a timeline showing some key historical events, we did not want to turn the site into an encyclopedia on Athboy so we only included a short description of each. The second element on this page was a carousel of images, the images are layout in such a way that the user gets a picture with an older image of Athboy and them a corresponding newer image that shows where things have changed and in some case where they have not changed.

Activities.

This page is the main information page, providing information on sports clubs, groups and events in the area. A short intro paragraph was added at the top followed by boxes that would each contain a club or group. As the clubs and groups already had their own social media presence, only information linking to their pages was included with contact e-mail and phone numbers. The idea with not providing more information was to ensure the user always linked to the latest info. For each club an image of their logo was included to give visual impact to the page and not just have a table of content. Under this, a section was created to list social events and festivals in the area. Again using an image for visual impact, dates were provided with a short description and a link to the main site for the event.

Inquiry.

Finally the site also includes a form that the users can use to submit questions or comments. A basic form collecting contact information so the questions /comment can be responded to. Also included was a set of radio buttons that allow the user indicate the area the questions / comment is related to, this would help direct the question once it is received.

User_Stories

As a parent;

• I want to find out what clubs and activities there are in the local area that my children might be interested in joining.

As a resident;

• I would like to know more about Athboy and what events are going on in the area.

As someone that is looking to move to Athboy;

• What information can I find on Athboy like the history, what does the community offer, what clubs activities are there. Where is Athboy? I will need to commute to my job.

As Someone still unsure;

• I have gone through the content in the Athboy site but I am unsure and have a question.

Wireframes

Wireframe diagrams from the design phase of the website.

Index

Features

The following describes the features that have been implemented into the website with some notes on future enhancements.

Existing_Features

• Header image, nav bar & footer;
• The site was design with common elements that span all pages of the site to replicate the user experience across all pages. Responsiveness;
• The nav bar was locked to the top of the page to ensure ease of navigation, this is most important on mobile as it prevents the need to scroll back to the top of the page for the links.
• As part of the development, reactive hover elements were included on all nav links and social media links. When the user hovers over the element, the site responds.
• In addition on the nav bar it is always clear to the user where they are and what pages are available to them.
• Image carosule with auto play, that includes user controls to allow the user select the images and move at their own pace.

Future_Enhancements

There were some features that would enhance the overall website, that did not make the iteration of the site but could be included in future versions.

• On the carousel of images, and information tag that when clicked would provide info and context for the image.
• Interview from residence that could provide more information on the recent history & events of Athboy, in video or audio contributions.

Index

Technologies_Used

Balsamiq https://balsamiq.com/wireframes/

• Basamiq was used in the design phase to create wireframes of the proposed web site.

Github https://github.com/

• Github is the repository used for version control & storage of the project.
• Github pages was used for the deployment of the site.

Gitpod https://www.gitpod.io/

• Gitpod was the IDE used for the development throughout the project.

Bootstrap https://getbootstrap.com/

• Bootstrap library was chosen for the initial layout & to provide responsiveness across devices sizes, layout was customised on top of bootstrap.

Google Fonts https://fonts.google.com/

• Google fonts provided fonts for the project (Roboto Condensed & Serrat)

Font Awesome https://fontawesome.com/

• Icons used through the web site are sourced from Font Awesome

W3C Validation Service https://validator.w3.org/

• HTML & CSS code was checked on W3C validator at the end of the project.

HTML Formatter https://webformatter.com/html

• HTML code was run through HTML formatter to fix any indentation issues.

ami.responsivedesign http://ami.responsivedesign.is/#

• The project was tested on ami.responsivedesign
• image used in readme file was taken from ami.responsivedesign site

Index

Testing

The project was developed in a DevOps type process. During the development of the website, there were frequent deployments and ongoing testing and fixing of issues. Issues that were found were logged in Github and fixes were deployed on the next development cycle Automated testing was complete on all html & CSS files in W3C code checker and for responsiveness on mi.responsivedesig.

In addition, final testing was complete at the end of the project with the results in the linked manual testing excel file.

Index

Deployment

The site is deployed on GitHub pages, as development was done via Gitpod and version control was done via Github, it was decided to deploy on Github pages. There were a number of advantages for deploying in this way, it allowed for quick deployment of updates and fixes as the site was regularly deployed for QA and multi-device testing. Github pages provided an easy deployment, by activating Github pages in the setting for the repositories.

Live deployment @ https://meltaylor78.github.io/athboy/

Index

Credits

The developers of the Athboy community hub would like to thanks all those who contributed directly to the development of the site or through providing media and content for the site.

Index

Media

Index

Acknowledgements

Index