This is a website for “The Groundnut Table” supper-club. It is designed to be easily recognisable as such and responsive on a range of devices to increase accessibility. The layout of the site is clean and has conveniently placed navigation throughout. This ensures that any prospective guests are able to easily gather the information necessary to make a decision. The website will be used for marketing purposes to extend the reach of the supper-club beyond it’s current client base.

• First Time User Goals

  1. As a First Time User, I want to understand who the company are and what services they provide

  2. As a First Time User, I want to be able to navigate intuitively through the site

  3. As a First Time User, I want to easily find any social media links to learn more about the company and establish trustworthiness

• Returning User Goals

  1. As a Returning User, I want to find when and where the next supper club will take place and how much it will cost
  2. As a Returning User, I want to find how to register my interest in attending a supper club.

• Frequent User Goals

  1. As a Frequent User, I want to check to see if there are any newly added supper club dates.

• Colour Scheme

  • The three main colours used are orange, white and grey in accordance with the branding.

• Typography

  • The Spartan font is used throughout the website with Sans Serif as the back-up font. Spartan closely resembles the typography used for the Groundnut Cookbook, creating brand consistency and recognisability. Varying font weights and letter-spacing where used for aesthetic and distinguishing purposes.

• Imagery

  • Each background image shows a part of the table used during the supper club to reinforce the nature of the business. The images correlate with each other to create a story-board effect that is intriguing to the user.

• Layout

  • The layout of the site was designed to be as intuitive as possible for the user, with information being presented in a logical manner Home, introduces the company. About, provides information as to what the company does. Details, provides details of the events and Seats, allows users to sign up having been given all the necessary information.

Wireframe for desktop

Wireframe for mobile

• The site uses bootstrap grid and media queries in order to be responsive at a variety of sized
• Hover-overs are used to indicate that an element is interactive
• Animation is used on the homepage to provide a slow-reveal effect
• The navbar collapses on smaller screen sizes to conserve screen real estate
• Parallax scrolling effect is used on background images to deliver a unified experience to users
• Parallax is only supported on desktop devices, to compensate for this, media queries were used to position the background image on smaller devices such as tablets and mobile phones.
• The addition of Smooth Scrolling gives the impression of seamlessness

• Currently, the collapsed navbar on smaller screens remains on the screen after a link has taken the user to their selected destination, this mean the user has to press the burger icon twice which is bad UX. I would like to implement a feature that collapses the navbar list automatically once the user has reached the targeted href
• I would like to provide feedback once the submit button has been activated on the form for seats, to re-assure users that their request has been acknowledged
• In the future, I would like to include a “Sign-up for the Newsletter” check-box on the Seats form that would provide customers with information regarding events

• HTML5
• CSS3

1. Bootstrap 4.5:

   • Bootstrap was used to help make the website responsive on a range of devices

2. Figma:

   • Figma was used to create the [wireframes](figma link) during the design process

3. Font Awesome:

   • Font Awesome icons were used for the details section and the social media links in the footer

4. Git

   • The Gitpod terminal from Git was used to commit to Git and Push to GitHub

5. GitHub:

   • GitHub was used to store the code after being pushed from Git

6. Google Fonts:

   • Google fonts was used to import the ‘Spartan’ font into the style.css

7. Hover.css:

   • Hover.css was used on the Social Media icons in the footer of the page to implement the grow transition when the icons are hovered over

8. YouTube:

   • Youtube developer sample was used to embed and customise the video in the about section

The W3C Markup Validator and W3C CSS Validator Services were used to validate the project:

• W3C Markup Validator
• W3C CSS Validator

• First Time User Goals

  1. As a First Time User, I want to understand who the company are and what services they provide

     • The hero image provides visual cues as to the nature of the company (a table)
     • The heading is positioned in the centre of the page to ensure focus. The heading states the company name, which also contains the company logo
     • The about section provides background information on the company that clearly explains how the supper-club works

  2. As a First Time User, I want to be able to navigate intuitively through the site

     • Upon entering the site, the navigation bar is positioned at the top of the page and unobstructed by any images. This makes it easy for users to locate and read
     • The navigation bar is stuck to the top of the screen so the user is always able to navigate wherever they are in the site
     • In accordance with UX expectancies the logo, in the right-hand corner, navigates users back to the homepage
     • All navigation links provide feedback to the user with hover overs, this makes them easily identifiable as links

  3. As a First Time User, I want to easily find any social media links to learn more about the company and establish trustworthiness

     • Social media links can easily be found at the footer of the page. Icons are used for UX purposes

• Returning User Goals

  1. As a Returning User, I want to find when and where the next supper club will take place and how much it will cost

     • All of this information is clearly laid out in the details section. Icons are used to signpost specific information e.g. a calendar for dates

  2. As a Returning User, I want to find how to register my interest in attending a supper club.

     • The title of “seats” is used for the register page as a continuation of the table theme
     • The seats page includes a form that clearly shows the information required to book, error messages will appear if this information is not entered correctly

• Frequent User Goals

  1. As a Frequent User, I want to check to see if there are any newly added supper club dates.
     • The dates sections is clearly signposted with a calender icon in the details section. A "new" badge has been added to the latest date to indicate that new dates are added regularly. This is reinforced in the seats form which states that new dates are added on the first of every month

• All navigation links send users to the expected destination

• Youtube Video:

  • the video does not autoplay on opening the page
  • the video responds to all buttons (play, fullscreen etc.)
  • the video automatically enters full screen when on smaller devices to allow for optimum viewing

• Seats Form:

  • An error message appears when required fields are empty
  • An error message appears an invalid email address 
  • when all inputs are valid the submit button refreshes the page and returns the user to the seats page. The page must be refreshed before filling out the form again

• The Website was tested on Google Chrome, Firefox, Microsoft Edge and Safari browsers.
• The website was tested on a variety of devices such as Desktop, Laptop, iPad mini, iPhone 7, iPhone 8, iPhoneX and Nokia E30
• Friends and family members viewed the site and provided feedback on bugs and UX issues

• On Internet Explorer, only certain css is applied
• On Internet Explorer, all text is push to the right hand side of the screen. Due to these issues we would suggest that the website is not accesable on Interenet explorer at this time
• On small devices the footer re-aranges

The project was deployed to GitHub Pages using the following method:

1. On GitHub, navigate to the site's repository, "irahbt /the-groundnut-table" LINK
2. Under the repository name, there is a menu, locate the "Settings" button and click on it
3. Scroll down the Settings page until you reach the "GitHub Pages" section
4. Under "GitHub Pages", use the Source drop-down menu and select a publishing source, select "Master Branch"
5. The page should automatically refresh at this point
6. Scroll back down to the "Github Pages" section to find the now published site to locate the now published site https://irahbt.github.io/the-groundnut-table/

1. On GitHub, navigate to the site's repository, "irahbt /the-groundnut-table" LINK
2. Above the list of files, click "Clone"
3. The default is to clone the repository using HTTPS, under "Clone with HTTPS", to clone the repository using an SSH key click "Use SSH"
4. Click the icon next to the link to copy your link
5. Open Terminal
6. Change the current working directory to the location where you want the cloned directory
7. Type "git clone", and then paste the URL copied earlier
8. Press Enter to create your local clone

• w3school.com: The website was a frequent source for code used throughout, including the parralex scrolling effect and smooth scrolling

• Bootstrap 4.5: Bootstrap Library used throughout the project for styling and layout purposes, it was also used to make the site responsive where appropriate

• The About content was taken from the "The Groundnut Cookbook" with permission from one of the authors, Jacob Fodio Todd

• Jacob also provided access to a library of photos, taken by Sophie Davidson, for general marketing purposes

• The YouTube was produced and published by BBC News Africa

• My Code Institute Mentor, Oluwafemi Medale, for his useful feedback throughout the project
• The founders of the Groundnut; Duval Timothy, Jacob Fodio Todd and Folayemi Brown for providing me with inspiration and material for the project