The Book Club

Live website - https://cgpalmer.github.io/The-Book-Club/

Rationale

The most frustrating thing about wanting to join a club is not knowing where to start. Knowing that clubs are out there and that people participate, but you yourself are not in the “know”. That is where The Book Club website comes in. In essence, it is a website that allows members and co-ordinators to communicate, organise and participate in a Book Club. It details which books will be read in the coming month, where the book meetings will be held and how to get involved. It will also provide an online sign-up form with the prices clearly stated in a no-hidden-fees manner. Users will sign up to the club, agree to a monthly subscription, pick a club to join, receive their first book and know where to attend their first meeting.

UX

The website is for people who are interested in joining a regular, organised book club. The website is also for people who are part of the book club already and will need to access information.

The website will be split into different pages.

• The “Home” page will have details about the club and what to expect from the meetings. It will contain a section with information for people to trial the book club. It will also have the prices for each subscription at the bottom of the page.
• The “Sign Up” page will let the user sign-up and select a subscription.
• The “Meetings” page will have more details about each location and the book they are currently reading.
• The “Members’ login” page where they can login to add their details and receive their book.
• The “Contact Us” modal is where anyone can get in touch with The Book Club company via email, phone or mail. It also has social media links.

The user should be able to gain the following information:

• Information about The Book Club and how it works.
• What different subscriptions are on offer and the benefits for each
• What book is currently being read in each place
• Where the meetings take place
• Information on how to find each place
• Information on how to sign up.

User Stories

Navbar

1. As a user type, I want visual feedback when hovering or clicking the links.
2. As a user type, I want to click on the “Home page”, so that I can see general information about the website and the book club.
3. As a user type, I want to click on the “Login page”, so that I can login into the members area and manage my details.
4. As a user type, I want to click on the “Pricing”, so that I can see the different pricing options, immediately.
5. As a user type, I want to click on the “Contact Us”, so that I can contact the The Book Club. I want to ask any questions that have not been answered by the information on the website.
6. As a user type, I want to click on the “Sign Up page”, so that I can register an account with The Book Club.
7. As a user type, I want to click on the “Logo”, so that I can go back to the home page.

Footer

1. As a user type, I want to click on the facebook icon, so that I see their facebook page.
2. As a user type, I want to click on the twitter icon, so that I see their twitter page.
3. As a user type, I want to click on the instagram icon, so that I see their instagram page.
4. As a user type, I want to click on the youtube icon, so that I see their youtube page.
5. As a user type, I want visual feedback when hovering or clicking the social media links.

Index Page

1. As a user type, I want the landing page to show me instant information through pictures and short captions.
2. As a user type, I want to click the home page so I can see the full navbar options.
3. As a user type, I want to click the home page so I can find information about the websites.
4. As a user type, I want to click the home page so I have a quick reference to where the events take place.
5. As a user type, I want to click the home page so I can have a quick reference for finding out the price. I do not want to wait for a new page to load so I can click the “pricing” link in the navbar.
6. As a user type, I want to see links to additional information in the footer. I want these to be consistent across all pages so I know where to find them.
7. As a user type, I want visual feedback when hovering or clicking the social media links.

Login Page

1. As a user type, I want to log in to the members’ area to manage my account.
2. As a user type, I want to input my email and password and be notified if I have made a mistake.
3. As a user type, I want to be able to click “log in” and be taken to the members area.
4. As a user type, I want visual feedback when hovering or clicking the “log in” button.
5. As a user type, I want the website to save my email address by checking the “remember me” box.
6. As a user type, if I have forgotten my password, I want to click a link that will allow me to reset my password.
7. As a user type, if I do not already have an account, I want to be able to click the sign-up button and be taken directly to the “sign-up” page.

Meetings Page

1. As a user type, I want to learn about the meetings in each location.
2. As a user type, I want to click the locations button on the smaller screens to jump to a location.
3. As a user type, I want all the information about each meeting in a clear format, in the same place. I do not want the information to be confusing.
4. As a user type, I want to click the link to Google Maps to find the location of any of the meetings.

Pricing

1. As a user type, I want to know how much the club will cost.
2. As a user type, I want all my options clearly laid out.
3. As a user type, I want to be able to click the link and read the T&Cs in a standardised format.

Contact Us

1. As a user type, I want to be able to get in touch easily, with one click, from any page.
2. As a user type, I want to send a message with minimal fuss.
3. As a user type, I want to input my email and message and press send.
4. As a user type, I want visual feedback when hovering or clicking the “send” button.
5. As a user type, I want feedback that my message has been sent.
6. As a user type, I want to be able to contact the club through social media links.
7. As a user type, I want to be able to click each social media link and be taken to a new tab that loads the specified social media.
8. As a user type, I want visual feedback when hovering or clicking the social media links.
9. As a user type, I want an alternative way to get in contact. I want to be able to see the information for telephone, email and address clearly.
10. As a user type, I want to close the modal, whether I am at the top or bottom of the modal and be take back to the page I was on.

Sign-Up Page

1. As a user type, I want to sign up to the club easily.
2. As a user type, I want to know if I have made any mistakes or missed any information when signing up.
3. As a user type, I want to submit my data via a clear button.
4. As a user type, I want to receive feedback that I have signed up.

Wireframes

Please find the links to my wireframes below:

Index Page - mobile
Index Page - tablet
Index Page - desktop
Login Page - all screens
Meetings Page - mobile
Meetings Page - tablet and desktop
Sign-Up Page - all screeens

Features

Existing Features

Navbar

1. Links to all the other pages allows the user to navigate seamlessly between pages.
2. The navbar is consistent on every page and therefore a user can navigate to any part of the website from anywhere.
3. The “Login” link will allow users to go to the “Login” page, where they can log in.
4. The “Meetings” link will allow users to go to the “Meetings” page, which has much more details on how to join in with a book meeting.
5. The “Pricing” link will allow users to go straight to the prices on the index page. This is immediate and means you don’t have to scroll through the whole page.
6. The “Contact Us” link will open a modal which contains all the contact details.
7. In mobile view the navbar is collapsed allowing the users more space on the screen. The users can click the “hamburger” icon and still receive the full menu as a drop down function.

Footer

1. Social media links allows the user to click on each individual icon and a new tab will open with the corresponding social media home page.

Index Page

1. Carousel – allows users to see what the club is offering and asks questions to ascertain if this is the right club for them.
2. About section – allows uses to see more images of the club and offers more information as to what to expect when joining.
3. Why not visit? – This section allows users to see when the next meeting is in each location so they can trial “The Book Club”.
4. Pricing – Allows users to quickly and clearly see all the prices available to them so they can choose which plan they would like.

Login Page

1. Login form – allows users to fill in their details and log into the members area, where they can manage their account.
2. Remember me – This button allows the user to store their email address, meaning they will not have to type it in every time.
3. Forgotten Password – This link will take users to another page where they can recover or change their password.
4. Sign Up link – This link will take users who do not have an account to the Sign-Up page.

Meetings

1. The information grids – Each grid contains all the information for a location so a user can read the grid and will know everything they need to in order to attend a meeting.
2. Jump to Location – This feature allows users to jump to a desired location by choosing a location from the drop-down menu.
3. Google maps links – Users can use the google maps link to get directions from their location to the meetings.

Contact Us

1. The contact modal – this modal overlays the top of the users current screen allowing them to contact “The Book Club” easily. It is designed to be immediate rather than scrolling to the bottom to click on a footer link and go through several pages before you can get contact information.
2. Message – This allows the user to send a message immediately to “The Book Club” and receive an emailed response.
3. Social media – this section allows the user to travel straight to “The Book Club”’s social media pages by clicking on the icons.
4. Alternatively – This section provides all the information needed to contact “The Book Club” via telephone, email or post.
5. Close buttons – these features allow the user to close the modal. There is a button at the top and bottom to make it more accessible.

Sign Up

1. Sign Up form – allows users to put in their details in order to create and account. It includes and initial membership choice.

Features Left to Implement

1. Add a text style to the website.
2. To build a webpage that where members can put in their personal details (address etc), manage billing and payments, and change memberships.
3. Build a webpage that can support retrieving a password.
4. A success message when a user has successfully signed-up.
5. A success message when a user has successfully sent a message on the “contact” modal.
6. Add in a automated check and error message if repeat password doesn't match when signing up.
7. Add in error messaged if the email and password do not match when trying to log in.
8. Add an error messge if user doesn't leave a message on the modal.

Technologies Used

Languages used

1. HTML
2. CSS
3. Javascript

Bootstrap – https://getbootstrap.com/
The project uses Bootstrap to simplify the process of building a grid layout, implementing carousels and forms, cards, and creating buttons. Bootstrap was also used for responsive design.

JQuery – https://jquery.com/
JQuery was not used discreetly by me. However, elements of Bootstrap used JQuery and Javascript, therefore I have added the necessary scripts on each page.

Testing

Please find the link to the test document here: Link to testing page

Interesting bugs:

I came across two different bugs that caused me be creative. The first was when jumping to a location on the "meetings" page, half of the grid was hidden behind the navbar. To overcome this, I put in a div which was the same as the background colour. The div activated when it was targeted by the link in the drop-down menu. Otherwise, it was hidden. I used the same solution for clicking on the "pricing" link on the navbar.

The second bug was that my carousel picture was too tall for the view-height of the carousel. I fixed this by giving it a top position of -px, which brought the picture up enough to see the interesting part of the photo.

Responsive Design

Index page

1. The about section moved the pictures to along side the text on anything bigger than mobile view.
2. The pricing re-orientated themselves from top to bottom to left to right, still in price other. This is on any screen bigger than mobile view.
3. The next meetings sections moved from 1 in a row to 3 in a row on screens larger than mobile view.

Meetings page

1. Mobile view had the pictures under the location heading and all the information is in on column.
2. Mobile view had all the locations under each other.
3. Tablet view and bigger had the picture next to most of the information, with two rows on information underneath.
4. On desktop view, each location changes from being underneath each other to two in a row and three columns. As there is less scrolling, I have take away the location drop-down-menu.

Sign-up Page

1. In desktop view, the form is split into two parts and they are set side by side. The sign=up button is central.

Navbar

1. The navbar is collapsed on mobile view but is fully across the top in tablet and above.

Deployment

Deployment – Live Website

1. Create repository in GitHub and give it a relevant name.
2. Click on your repository to open it.
3. Find the “settings” tab and click on it.
4. Scroll down until you arrive at the “GitHub Pages” sections.
5. Under the “source” drop down menu, choose a branch. I chose “master branch” and select it.
6. You will then see a URL to your live webpage. In my case the URL is https://cgpalmer.github.io/The-Book-Club/

Deployment – Run Locally

1. Again, click on the repository called The-Book-Club.
2. Along the top bar, find the “clone or download” button.
3. Here you have the option to clone by HTTPS or SSH.
4. Once you have chose your desired option, then click the copy icon next to the URL.
5. Open Git Bash.
6. Ensure you are in the correct directory which you want to copy the code into. If not, change the directory now.
7. In the terminal, write the $ git clone https://github.com/cgpalmer/The-Book-Club.git
8. Press the enter button and your clone will be created.

Credit

Media

The photos used in this site were obtained from Google. They were all free so share and edit.

Acknowledgements

I received inspiration for this project Love Running. I liked the idea of a website that helped people locate groups that they could join in with. I also really like their “next run” section, which I used as inspiration for my “next meeting” section. I also received inspiration from the other projects I took part in during the course. Some examples are:

• The landing page from The Whiskey Shop.
• The transitions from the Resume project.