1. Summary
2. UX
   1. Strategy
   2. Scope
   3. Structure
   4. Skeleton
   5. Surface
3. Features
   1. Existing features
   2. Featured left to implement
4. Bugs
5. Technologies used
6. Testing
7. Deployment
8. Credits
   1. Content
   2. Media
   3. Acknowledgements

This is a travel blog website which provides a short overview of the site owner's top 10 destinations in Europe.

The site includes a Google Map with markers showing recommended places to visit, eat and stay.

There is also a feedback section where site users can make recommendations for destinations for the site owner to visit next. They can also recommend places to visit, stay and eat in the destinations already on the site. In addition, the form the site user submits will ask for permission for the site owner to contact them for further information and whether they can be credited in the recommendation when it is published on the website.

The users are people who love to travel, want to learn about popular destinations, want to plan their next trip or simply want to read about the site owner's travels

• As a new site user, I want to be able to understand the intent of the page
• As a new site user, I want to understand easily how to navigate the page and access the facilities provided
• As a returning site user, I want to be able to easily reach a section of the site previously viewed without many steps to get there
• As a site user, I want to view the top 10 travel destinations in Europe
• As a site user, I want to have links to the recommended restaurants, places to stay and activities where appropriate
• As a site user, I want to be able to provide feedback on the site
• As a site user, I want to be able to provide my own recommendations

• As a site owner, I want to be able to receive value feedback on the site, including recommendations from the site users

Functional requirements:

• Google Maps API
• EmailJS API
• Navigation bar which is simple and easy to navigate
• Feedback form which uses validation to ensure value content is submitted

Content requirements:

• Images of destinations
• Description of each destination
• Google Map for each destination
• Customer markers within the maps of recommended places to stay, eat and things to do
• clickable markers to provide a short piece of information about the recommendation and links to external sources where appropriate

Interaction design:

• User friendly interface
• Responsive and visible links which change on hover
• Ability to exit pop ups

Information Architecture:

• Navigation bar at the top of the page - sticky to the top so always visible
• Responsive navigation bar - adjusting for mobile
• Images of the appropriate viewing size, minimising for mobile
• All features appropriate size for mobile and desktop viewing
• All information is appropriate and relative to the subject and not misleading or hard to find

Please click the below link to view the wireframe mock up of the website in mobile, tablet and desktop sizing

Where to next wireframe

The intention of the surface design of the website is intended to be 'whimsical'.

• The font family chosen from Google Fonts is 'pompiere'
• The colour selections are light and airy with the following colours selected for the colour scheme:
  • dark-lava: #4a4238ff;
  • shiny-shamrock: #66a182ff;
  • middle-red: #e2856eff;
  • lavender-web: #e5eafaff;
  • cg-blue: #007ea7ff;
• The colour scheme was selected using the colour scheme creator: Coolors.co

All of the features in the initial scope of the site have been implemented. However, some improvement ideas have been identified

• Bootstrap - https://getbootstrap.com/
• JavaScript
• Emailjs
• Google Maps
• Google fonts - https://fonts.google.com/
• www.validator.w3.org
• http://www.css-validator.org/
• Git
• Gitpod
• GitHub
• Google Chrome
• http://www.responsinator.com/
• Chrome Dev Tools
• https://coolors.co/

New site user testing:

1. As a new site user, I want to be able to understand the intent of the page
   1. Upon entering the site, users are automatically greeted with the page title and sub heading
   2. There is a clear call to action to select one of the destination buttons
2. As a new site user, I want to understand easily how to navigate the page and access the facilities provided
   1. The sub heading of the page clearly shows how to use the page in a short and meaningful sentence
   2. The destination buttons are responsive when hovered over

Returning site user testing:

1. As a returning site user, I want to be able to easily reach a section of the site previously viewed without many steps to get there
   1. The destination buttons are prominent on the page for the returning user to quickly return to where they were previously
2. As a site user, I want to view the top 10 travel destinations in Europe
   1. The top 10 travel destinations are detailed in the buttons which are prominent on the page
   2. This user experience can be improved by highlighting that these are the top 10 destinations
3. As a site user, I want to have links to the recommended restaurants, places to stay and activities where appropriate
   1. When the destination is selected, a custom map opens up with markers. Within these markers, there is a description of the recommendation. Where it is a food or accommodation recommendation, links are provided to external sources
   2. Signage on the page can be improved to direct the site user to click on the markers to obtain the content
4. As a site user, I want to be able to provide feedback on the site
   1. There is a form at the bottom of the page which is fixed so it is always visible
   2. There is a link on the header which, when clicked, navigates to the form for the user to complete
5. As a site user, I want to be able to provide my own recommendations
   1. There is a form at the bottom of the page which is fixed so it is always visible
   2. There is a link on the header which, when clicked, navigates to the form for the user to complete

Site owner testing:

As a site owner, I want to ensure the site is visually appealing

1. As a site owner, I want to be able to receive value feedback on the site, including recommendations from the site users
   1. There is a form at the bottom of the page which is fixed so it is always visible
   2. There is a link on the header which, when clicked, navigates to the form for the user to complete
   The form has validation to ensure that it cannot be submitted without content in the name, email address and feedback fields

Performance testing:

1. Tested website responsiveness using http://www.responsinator.com/
   1. Results: The website is responsive to all device sizes
2. Tested the image size to ensure no image is to large and impacting the website loading times. I used the Google Dev Tools - Network
   1. Results: The site loading time is sub optimal. The total website loading time is 1.54s which can be improved
   2. This has been added to the improvement table within the features section
3. Tested the HTML using https://www.freeformatter.com/html-validator.html I would normally use https://validator.w3.org/ but there is currently an error with the server and results are not available
   1. Results - index.html: Three errors were recorded
      1. Malformed byte sequence: “e9”. At line 109, column 59
      2. Malformed byte sequence: “f6”. At line 223, column 98
      3. Malformed byte sequence: “e8”. At line 449, column 66
   2. The errors are created by Accent Marks on characters within the text content
4. Tested the CSS using http://www.css-validator.org/
   1. Results - style.css: The validator does not recognise #4a4238ff or #66a182ff as valid color 3 or 6 hexadecimals numbers
   2. The colours currently work correctly within the browsers however, this is something which will need further investigation
5. Tested the website on the Google Chrome browser Version 87.0.4280.88 (Official Build) (64-bit)
   1. Results: The website was responsive and the elements performed in the way they were intended to
6. Tested the website on the Microsoft Edge browser Version Version 87.0.664.66 (Official build) (64-bit)
   1. Results: The website was responsive and the elements performed in the way they were intended to
7. Tested the website on the Firefox browser Version 82.0.3 (64-bit)
   1. Results: The website was responsive and the elements performed in the way they were intended to
8. Tested the form validation worked correctly on each of the above browsers
   1. Results: The form correctly sent when the fields were completed as they should have been and did not when the fields had not been completed
9. Tested the email was sent correctly using the console log
   1. Results: The console log confirmed the function had run correctly with: SUCCESS r {status: 200, text: "OK"}. In addition to this, an email was successfully received with the content added to the form

GitHub Pages

1. Create a new repository or access an existing repository
2. Click the green Gitpod button to launch the project in Gitpod
3. Create an index.html file
4. Add the file to the staging area using the git add Functional
5. Commit the file using the git commit function, adding an appropriate commentary
6. Push the file to GitHub using the git commit and git push functions
7. Refresh your GitHub repository and click the 'Settings' tab
8. Scroll to the GitHub Pages section and select a publishing source
9. Click 'Save'
10. Click the URL created within the Settings - GitHub Pages section

To clone the repository for local deployment:

1. On the main page of the repository, click the down arrow Code button
2. Click the download icon under the relevant section to clone with either HTTPS, SSH or GitHub CLI
3. In Git Bash, change the current directory to the location you want the directory to be stored
4. Type git clone and then paste the URL you copied in step 2
   1. An example for HTTPS: git clone https://github.com/hollyford/where-to-next.git
5. Press enter - that's it, your clone has been completed!

To fork the repository:

1. Navigate to the main page of the repository you wish to fork
2. Click the Fork button on the top right hand side of the page

• I received inspiration for the colour scheme using the colour scheme creator: Coolors.co

• My mentor Antonio Rodriguez who has provided me with guidance and support through the project