Milestone 2 ------ Retaurant Cowhey Chez
User Experience (UX)
User stories
First Time Visitor Goals
As a First Time Visitor, I want to easily access what the restaurant has to offer.
As a First Time Visitor, I want to be able to easily navigate throughout the site to see their menu and book a table.
As a First Time Visitor, I want to be able to undertand at a glimpse how the site works.
Returning Visitor Goals
As a Returning Visitor, I want to easily navigate the site and find exactly what I'm looking for.
As a Returning Visitor, I want to be able to easliy confirm a booking.
As a Returning Visitor, I want to see is there anymore information I may find out about the restaurant.
As a Returning Visitor, I want to be able to locate the restaurant should i decide to visit.
Frequent User Goals
As a Frequent User, I want to check to see if there are any newly added dishes to their menu.
As a Frequent User, I want to check to see if there are any new offers for regular customers.
As a Frequent User, I want to check for any updates and/or changes to the prices.
End Goal
This webpage is designed to be effective and efficient in providing the user with a simple and easy way to find something to eat. The site will provide a very quick and sufficent interface to contact and communicate with the restaurant. All the information they need from menu choices, prices, contact and booking a table as well as links to social media will all appear on the first page and grab their attention immediately. The website, on return, should be a pleasant and easy navigational experience easily finding what it is they user came for.
The Client
Cowhey Chez is a very well renowned restaurant offering an extensive range of foods with a wide variety of choices. The restaurant are known to cater for all walks of life, of all ages. The prices are reasonable, the service is exceptional and the food is sensational. This is what needs to be conveyed on the website.
Design
Colour Scheme
The colours used are very simple indeed. I did not want to take from the images of food or the simple conveying of the message about the restaurant. There is information on all of the images when highlited or hovered over.
Typography
The Poppins, Aquafina and Lato fonts are used here as they are extremely easy to read and pleasant to look at. Ballet was used for the logo to style the name of the restaurant.
Imagery
Imagery is important. The large main image is to show the user how freshly prepared the food is. The carousel below the description of the restaurant continues to scroll between images of the food to convey to the user the different styles of foods available.
Wireframes
Please click the following link to view the wireframes for the project:--------->Milestone Wireframes
Features
Responsive on all device sizes
Interactive elements such as the Booking Form, the Carousel, the Map and Social Media links
Technologies & Languages Used
Frameworks, Libraries & Programs Used
Am Webtech was used to help create the gallery section
RegExr was used to help create pattern code in the reservation.js page to help create the interface in the Booking Form.
Bootstrap was used to assist with certain aspects for the responsiveness and styling of the website.
Tech Midpoint was used to help create the image layout design and image placement.
Embed My Map helped create the interactive Google Maps section in the webpage.
Hover.css was used on the Social Media icons in the footer to add the float transition when being hovered over.
Google fonts were used to import the "Poppins, Lato and Parisienne" fonts into the index.css file which is used on all pages throughout the project.
Font Awesome was used on the footer social media links to add icons for aesthetic and UX purposes.
Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
GitHub is used to store the projects code after being pushed from Git.
Balsamiq was used to create the wireframes during the initial design process and finally for the pdf link in the description.
Testing
W3C Markup Validator, W3C CSS Validator and Esprima were used to validate every page of the project to ensure there were no syntax errors.
Carousel Javascript Validator results
Reservation Javascript Validator results
Testing User Stories from User Experience (UX) Section
First Time Visitor Goals
As a First Time Visitor, I want to understand the main purpose of the site and learn what I can on the restaurant.
Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice. The Navigation bar has three simple links offering one word choices. The images on the page scroll automatically to show the user a simple look at the different food options.
The user has two options, click the ABOUT, MENU or GALLERY action buttons or scroll down, both of which will lead to the same place. The user can also click on the Book a Table button in the main picture to go directly to that section.
As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
The site has been designed to be user friendly. At the top of the page there is a clean navigation bar, each link describes what page they will end up at. The Navbar vanishes upon scrolling or clicking to the desired content but button appears immediatley with the word "Top" to allow a link to return to the top of the page for menu selection. All content has been kept on one page to provide easy scrolling and access to each content. Since it was only three different pages of information it was a lot easier to keep them together and provide links to each part of the restaurant's content.
At the bottom of the page there are clear links and icons to the restaurant's social media content. On the Make a Booking section, after a form response is filled, it will send information to the restaurant. If all content is not filled out correctly a warning will appear to fill in what you have forgotten to do so. When all information has been inputted to the booking form and the user hits "SUBMIT" a brief mesage will appear to notify the user that the form is sending their request and a final message will then appear to let the user know that they were succesful in completing the form. The form will then reset itself after 10 seconds.
As a First Time Visitor, I want to look for a menu and images of what is on offer. I want to see what kind of variety is available to me before I consider booking. I also want to locate their social media links to see if there are any reviews to determine how the restaurant is rated and what people may have thought of their experience there.
Once the new visitor has read the About Us and Menu section, they will notice the Gallery section. The user can also scroll to the bottom of the page on the site to locate social media links in the footer.
As a Returning Visitor, I want to find any new food content they may have added to their menu.
As a Returning Visitor, I want to find any updated reviews or ratings recently added to their social media pages..
As a Returning Visitor, I want to be able to easily handle a booking.
The navigation bar clearly highlights the "About" Page. After a brief description they can fill out the form on the page to make a booking. The footer contains links to the restaurant's Facebook, Twitter and Instagram pages. Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.
As a Returning Visitor, I want to find the social media links to be able to be kept informed of any new information the restaurant can offer.
Frequent User Goals
As a Frequent User, I want to check to see if there are any newly added dishes or offers.
The user would already be comfortable with the website layout and can easily click social links.
As a Frequent User, I want to check to see if there is any new content information such as special offers or special openeing hours for holidays..
The user would already be comfortable with the website layout and can easily click to the section they are looking for.
As a Frequent User, I want to check in at anytime as to the closing time of the restaurant on certain holidays or bank holiday weekends or to see have prices or menu's changed.
At the bottom of the page their is a footer of which the content is easily acceessable.
Further Testing
The Website was tested on Google Chrome in the development tools. The website was viewed on a variety of devices such as Desktop and mobile view. It was opened on several different browsers including, Safari, Black Lion Browser, Samsung Internet, Duck Duck Go and Mozilla Firefox. A large amount of testing was done to ensure that all pages were linking correctly.
Known Bugs
The code was tested repeatedley through W3C Markup Validator and Esprima Syntax Validator.
Deployment
GitHub Pages
The project was deployed to GitHub Pages using the following steps...
- I added the new changes I made in the design and development
- I committed all changes and commented on what exactly i did in that session
- I finally pushed all ammendments to Github
Credits
Code
The full-screen image and all images were created by the developer.
Bootstrap5: Bootstrap Library used in certain aspects of the project to aid in creation of the Contact Form.
Tech Midpoint: coding was used in the development of the image layout design and image placement on the home screen.
Embed my Map: was used to create the Google Maps.
Content
The food used in the images was produced by the restautrant owner John Cowhey and full permission was given to use these images for this design and purpose. All content was written by the developer.
Am Webtech: The gallery was inspired by Am Webtech
Media
All Images were created by the developer. All foods were produced by John Cowhey.
All logo's were created by the developer.
Acknowledgements
John Gleeson: of Transact for all his help and belief.......Much obliged my friend.
Tim Curtin: for his amazing knowledge and sound advice throughout this project.....Legend Tim....
Ulysses Ryan Flynn: for his invaluable assistance in allowing me to extend my project deadline and help inform me of choices available to me. Many thanks Uly.....
Tutor support at Code Institute: for their support.
Neil Kavanagh_ci institute tutor and Classroom Co-ordinator again for his incredible input along the journey of my project.
Slack community for help and advise along the way
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
