Cegin Dryslwyn is a small independent restaurant at the foot of Dryslwyn Castle in a small valley in West Wales. Instead of a set menu, the business has gained attention by only using the best of local produce, changing its menu sometimes daily and committing to only using local ingredients.

The website enables customers to make bookings, obtain contact details and find out more about the restaurant’s ethos. The target audience are considered to be time-poor, mainly browsing on their phones, and might want to make a booking quickly during the day while they are out of the house. Thus the site is designed with mobile users as its priority.

The deployed website can be found [HERE].

The decison on which features to implement and how stemmed from key user objectives:

• Make a reservation within two minutes
• Decide whether they want to go to the restaurant
• Check location & opening hours quickly

These objectives were then broken down into User Stories, alongisde Stories important from the perspective of the business owner:

1. As the customer, I want to be able to book online so that I can make the request quickly and get a response back without needing a phone call.

2. As the customer, I want to be able to find out the contact details so I have the address of the restaurant.

3. As the customer, I want to check the opening times so that I know when I can have dinner/ call the restaurant.

4. As the customer, I want to be able to read more about the restaurant so I can decide if I want to go.

5. As the business owner, I want to show potential customers positive reviews, so they will be more likely to make a booking.

6. As the customer, I want to easily find the links to the business socials, so I can follow them elsewhere.

Balsamiq was used to create the wireframes for this project. The designs took a mobile first approach from origin, taking into consideration the amount of time a user typically needs to scroll to find the information they need and thinking of how to make the navigation reduce their time completing a task.

Page.	Mobile	Tablet	Desktop
Index
About
Booking

The colour palette for this project is predominantly dark greens and blues with a bisque font colour to contrast. This is to reflect the verdant setting of the restaurant. The emphasis is placed on the picturesque location and the food itself, therefore a focus is placed on photography. The user is initially presented with the background images, which have been selected for their dramatic effect.

Text boxes are thus kept with a minimalist style that makes them both easily legible and to prevent overwhelm on the page overall. "Open Sans' was selected from Google fonts for this reason, with sans-serif as backup should this fail to export.

• Responsive, mobile-first design

• Consistency: colour scheme remains throughout the site; both header and footer remain identical across all pages whether on mobile, tablet or desktop

• Navigation. Page user is on is italicised.

• Footer: Stacked details on mobile, reads horizontally on larger resolution screens. Contains opening times, contact details & social links.

• User welcomed with main image, which also serves as background:

• This is to emphasise the most important aspect of the business (the food) and the colour scheme sets a dramatic tone.

• The user initially sees one word ‘Croeso’ underneath, the Welsh word for welcome.

• Scrolling further maintains the background image but the introduction statement and restaurant dining room image become visible. User has a second option to Book Now via a button.

• A carousel is visible just below, scrolling between reviews of the restaurant. The user is able to click the icons to be taken to each respective site to read further as they wish.

• User welcomed with image, mirroring design of previous page and emphasis on minimalist approach. This time a secondary navigation has been used, to enable the user to navigate to the correct section of this longer page:

• The image was selected due to its dramatic scenery, to appeal to the customer as a destination to visit in itself, as well as for a meal.

• The user once again scrolls down to view more details.

• A text box provides further information on the business history & ethos, as well as an image of the chef.

• Scrolling down brings the user to a small gallery of plates.

• Continuing down brings the user to the FAQ. Questions are in bold so the user can skim to find what they’re looking for. Another link is provided for booking.

• Kept simple as part of the key aim - to make sure booking can occur easily.

• A form enables the user to enter the information required to either book or make an inquiry. They are asked to provide a date, and may use the calendar box to do so. On entering details, they may submit, when they may be asked to enter any missing required fields.

• HTML5
• CSS3

• Balsamiq: Used as explored above to draw up the initial wireframes.
• Google Fonts: Provided the main font used for this project, Open Sans, via the style.css file.
• Font Awesome: Provided the social media icons located in the footer.
• Bootstrap: Provided the grid system used throughout the site to create a responsive design. Bootstrap was also particularly useful to build the carousel and the booking form.
• TinyPNG was used to reduce image size.
• Gitpod: For writing code, committing anf pushing to GitHub.
• GitHub: Storage of the prokect once pushed.
• Chrome DevTools: The primary resource for manual testing, particularly in testig the responsiveness of the design.
• W3C Markup Validator: Used to validate the HTML.
• W3C CSS Validator: Used to validate the CSS.

The User Stories were broken down into statements that would indicate they had been implemented successfully:

1. As the customer, I want to be able to book online so that I can make the request quickly and get a response back without needing a phone call.

• a) Given the user has arrived on the home page, when they first arrive on the site they can immediately navigate to a booking page
• b) Given the user has navigated to the booking form, the user is able to enter details into all fields and press the ‘submit’ button
• c) Given the user is entering details, when they focus on the radio buttons, only one button may be selected and one is required
• d) Given the user is entering details, when they press submit without completing required fields, the user is prompted to provide the missing information

2. As the customer, I want to be able to find out the contact details so I have the address of the restaurant.

• a) Given the user is on any page of the website, when they scroll to the bottom, the business contact details are always available in the footer

3. As the customer, I want to check the opening times so that I know when I can have dinner/ call the restaurant.

• a) Given the user is on any page of the website, when they scroll to the bottom, the business opening hours will always be available in the footer

4. As the customer, I want to be able to read more about the restaurant so I can decide if I want to go.

• a) Given the user is on the home page, when they click/ tap on the About header, they are navigated to the About section of the website
• b)Given the user is on the About section, when they look at the content, they find a clearly formatted section providing business background and an FAQ.

5. As the business owner, I want to show potential customers positive reviews, so they will be more likely to make a booking.

• a) Given the user is on the home page, when they scroll through the content, they see a series of quotes taken from reviews with the reviewer clearly indicated by icon
• b)Given the user is reading the quotations, when they click on an icon within the box, they are taken to the website of the review where they can read further in a new tab

6. As the customer, I want to easily find the links to the business socials, so I can follow them elsewhere.

• a) Given the user is on any page of the site, when they scroll to the bottom, the social media links will always be available
• b) Given the user is viewing the social media links, when they select one of the links, they are taken to the social media site in a new tab

The above acceptance criteria then provide a testing scenario. Testing was thus based on manually running through each scenario above on both mobile and desktop, and recording the results.

The following shows the results of final testing:

• Due to the layout choice where the background image is the main image when the user arrives on the page, issues were identified in sizing this up to larger displays, such as when trying to get the secondary navigation correctly positioned on desktop.
• This was resolved by adding media queries to ensure the space between the first header and the navigation was correct based on the display.
• The booking form was also stretched on larger display:
• Changing the bootstrap container to 'fluid' and again creating media queries adjusting margins and font size resolved the issue.

• W3C CSS Validator identified a repeated typo in a padding where both % and vw were used. The latter was removed.
• W3C HTML Validator picked up on a href erroneously placed within a Bootstrap button. An anchor was placed with role=button to resolve this.

• The project was tested on Safari and Chrome with no functionality issues identified.
• Performance issues have been identified using Lighthouse in Chrome. This mainly seems to be caused by the large quantity of images and logos in use throughout the site, and has beem=n mitigated somewhat by reducing image size with TinyPNG. However, this would be a future improvement, and something to consider going forward in future designs.

Deployed via process:

• Login to GitHub and locate the GitHub Repository
• Select 'Settings'
• Within Settings, select 'Pages'
• Under Source, select the dropdown 'None' and then select 'Master Branch'
• A link is then provided to the website

• Created by the developer

• Index background image: Valeria Boltneva
• Dining room: Maria Orlova
• About background image: Avonne Stalling
• Castle arch: Tobias Bjorkli
• Chef: "cottonbro"
• Meat on bone: Pascal Claivaz
• Red meat: "cottonbro"
• Seafood: Dana Tentis

• WalesOnline
• BBC Good Food
• The Guardian

• Bootstrap guide used to learn new features such as the carousel and a form structure. This has been referenced in comments within HTML also.
• W3Schools was referenced as a refresher for formatting and aligning of elements.