The LightHouse Book Club

The Lighthouse book club website was created with the intent of help and inspiring meaningful connections through reading and discussion. The primary target audience are people who love to read or want to develop this habit, while also socializing and making friends.

UX

Website goals

The main reason to create this website is to help and inspire people to read more, take part in meaningful discussion while socializing and discover new places and food around Dublin,Ireland.

On the website users can find out more about what a book club is, how it works, how to join, the books listed for discussion, the locations of the meetups and links to the book club social media accounts, where they can further connect with other members.Users will be able to find interesting content in easy and simple way.

User goals

New User

Users are able to find information about what a book club is, how it works, how to join it, all in a brief way.
Users can find out who the book ambassadors are and get to know a bit about them.
Users become aware of when and where the meet up happens.

Returning user goals

Users can easily find when and where the meetups will happen.
Users can see all the books which were already discussed and read more about them.
Users can contact the book ambassadors and connect with them.

User stories

As a new user

I want to be part to understand what a book club is, how it works and what should I do if I decide to join.
I want to know when the discussions happen and where.
I want to know what are the books discussed in this book club.
I want to find out who is organizing it.

As a returning user

I want to be able to find out easily where the next meet up will be.
I want to be able to contact the book ambassadors.
I want to know which books were already discussed and which one was the winner for the next discussion.

Structure of the website

The site is designed to be easy and user-friendly on all types of devices. On a desktop, tablet or mobile device there should be no difference for a user to have a fantastic experience. All parts are designed to achieve maximum user satisfaction. Users will get some interaction from the interface as links and buttons will have hover effects. It contains four pages, which are the following: Home page, About, Books, and Join us. It also contains a link to one of the sections of the main page. What is included will be explained further in this document. The footer shows how users can contact the book club along with links to the social media accounts.

Wireframes

Desktop

Tablet

Mobile

Surface

Design

Color scheme
- The colours used in the website were chosen in accordance with the hero image used. Adobe color was used to facilitate this process, some variants of those colors were used while styling the site.

Typography
- The fonts used are available at Google Fonts. In the text on the hero image Glory was used and for all the rest Roboto.
Imagery
- Most of the images on the site are from Pexels, the hero image is from Adobe Stock.

Implementation phrase

Features

As previously mentioned the website contains 4 pages. The existing features are:

Navigation bar:
- Featured in the top of the page, it includes the book club logo on the left upper corner and on the opposite sides the links to the About, Books, Join us pages and to the Meet up sections, which is located on the home page.
- The logo is a direct link to the main page, so users can easily go back to it, while navigation on the other pages of the site.
- All the buttons on the site are named after corresponding sections to promote a user-friendly approach. In addition, a hover feature has been added to all buttons to highlight user interaction with potential action.
- The navigation bar is fully responsive, collapsing in small screen devices.
Home page:
- The landing page heading includes an image with a text overlay, it says the name of the book club and call to action button, that directs users to the “Join us” page, where they can sign in to be a member of the community.
- The main page of the site contains several sections:
  - Member’s testimony - This section contains the testimonies of two members of the book club. The aim of this section is to inspire new users to join the community by making them feel inspired by their comments.
  - Reasons to join a book club: This section lists some of the reasons why people join book clubs and what value it could bring to their lives. The aim is to keep motivating and encourage new users to sign in.
  - How it works - This section gives a brief explanation of how the book club works. It is separated in three steps to make it easier and clearer.
  - Let’s meet - This section shows the user which was the previous location of the meetups and the chosen one for the next month’s get together, along with the date and time. The images related to the previous location are gray, while the future ones are colorful. An emphasis was given to the name of the place. If the user clicks on it,they will be redirected to Google maps.The images have a zoom effect to make it more interactive.
About page:
- This section will allow the user to get to know more about the book club and who are the people involved in it.
Books page:
- This page shows to the users all the books which were already discussed, along with the one which will be discussed at the next meet up. The images have a hove effect, so at first they are gray, becoming colorful once the user hovers over it.
- Along with the images of the books’ cover, it is also displayed which was the month in which that book was picked and button “shop now”, which directs users to Easons website. It makes it easier for users to purchase the books, if desired.
- By clicking on the images, users are also directed to the Good read website, where they can read more about the books.
Join Us:
- This page contains a form which users can fill in, if they want to sign in and take part in the book club. It requested a couple of information such as: First name, Last name and email address. Below it there are two check boxes, which asks the user for consent to send a biweekly newsletter and if they agree with the “Terms and conditions” and “Privacy Policy”.
Footer:
- Subscribe section
  - In this section users can subscribe to the book club’s newsletter, it is only present at the home page.
- Contact us section
  - This section contains an email address, which users can use to get in touch easily with the lighthouse book club.
  - The link for the book club social media accounts are also in this section. The aim is to motivate people to connect with other members of the book club. It is also an easy way to help members to connect and keep them engaged. The social media links are present in all the pages.

Future Implementations

Blog section, where there would be information related to book releases and possible interviews with some of the books’ authors.
A login page, where users could receive a more personalized type of content related to the book club.
404 error page.
The actual page with Terms and conditions (related to subscription, charging, cancellation, user license agreement etc) and information related to Privacy Policy and Cookies.

Accessibility

“Alt” descriptions of images were used.
Arial label were added to the book images which are clickable and will open a new page on Good reads. It also added to the social media links.

Technologies Used:

Balsamiq Wireframe
- Used at the beginning of the project to help in the development of the right UX design desired for mobile and desktop resolutions.
HTML5
- Used to write down the content of the page.
CSS
- Used to personalise colors, buttons, forms and visual details of the site.
Google.com
- Used for reaserch, along with Youtube.

Testing

All tests described below have worked successfully across all browsers. Responsiveness checks have been run by using the Chrome developers's tools as well as manually resizing the windows. This site was tested across multiple browsers (Chrome, Safari, Internet Explorer) and on multiple mobile devices (iPhone 4, 5, 7: Chrome and Safari, iPad, Samsung Galaxy) to ensure compatibility and responsiveness.

It was tested:

Form submission - If the user tries to submit the join us form with an invalid email address, there will be an error noting the invalid email address. The 'required' attribute is added to the 'First name',’Last Name' and ‘Email Address'. The users must also agree with the terms listed to be able to submit the form.
All the links to social media accounts will open a new page, so the users do not leave the site.The same will happen in the Books page. If the user clicks on the cover of the book, a new page will be opened bringing them to Good Reads and also if they press the ‘Shop now’ button, the Eason’s page will be loaded in a separate tab. The meet up section, on the main page, also contains embedded links to google maps, which are working fine.
When the screen is 768px and down, the navigation bar will collapse. When the user clicks on it a dropdown menu will open,from which the user can easily navigate to any other page of the site or go back to the home page by clicking on the logo.
The images on the ‘Meet up’ section are responsive and they will change size whenever needed to fit better the screen size.

HTML

No errors were returned when passing through the official W3C Markup Validator.

CSS

No errors were found when passing through the official W3C CSS Validator.

Performance on Web.dev

Deployment

The site is hosted using GitHub pages, deployed directly from the master branch. The deployed site will be updated automatically upon new commits to the master branch.

The project was deployed using GitHub Pages, below are the steps to do so. Log into the github profile page and click on the project's name,click on settings, go to the option Pages,on the left side menu.Select master branch and here is the link to the final project.

Credits

Content

The text for the Home page and about page were inspired by many different websites which listed reason to join a book club, what a book club is and how a book club normally works:

Media

The images used on all the pages are Pexels, which is a open source site.
Font Awesome was used for all social media icons: https://fontawesome.com/

Resources

Main sources used for consultation and troubleshooting:

W3Schools
- Mainly for CSS syntax help and troubleshooting.
MDN Web Docs
- Mainly for CSS syntax help and troubleshooting.
CSS-Tricks
- Help to have a better understand of how flex boxes work.
Youtube
- Videos used to give me a better understading of media query and the navbar. Some of the video were :

Acknowledgements

I appreciate the support, feedback and guidance of the following people throughout this project: my mentor Victor Miclovich the tutors and the community on slack.

This is for educational use.

code-institute-submissions / lighthouse_bookclub Goto Github PK

lighthouse_bookclub's Introduction