Travel Memory Website

View the live project here.

This is the Travel Memory website. It is designed to be responsible and accessible on multiple devices, making it easy to navigate for players on every device.

User Experience (UX)

Project Goals

The site's primary goal is to entertain the visitors and inspire them to visit multiple locations around the globe by playing a challenging memory game. It could be inserted in a travel agency website to drive more traffic as well. The site has three target audience:

• First time visitors (casual players)
• Returning visitors (people who already know the game)
• Frequent visitors (people who like the game and want to test their memory)

Game Rules

• There are six levels in total.
• Each level starts with a sequence of world landmarks to memorize.
• The difficulty is progressive. Level one starts with just one picture, level two with two pictures etc...
• The user has a few seconds to memorize the sequence.
• The user needs to match all the elements in order to proceed with the next level.
• If the user makes a mistake, the game is over.
• The score is calculated from 0% (game over at level one) to 100% (all answers are correct in level six).

User stories

• First Time Visitor Goals

  1. As a First Time Visitor, I want to learn how to play quickly.
  2. As a First Time Visitor, I want to understand how long the game is.
  3. As a First Time Visitor, I want to try to turn on the music.

• Returning Visitor Goals

  1. As a Returning Visitor, I want to improve my score.
  2. As a Returning Visitor, I want to send my results via mail or send to friends to show them.
  3. As a Returning Visitor, I want to find community links.

• Frequent User Goals

  1. As a Frequent User, I want to periodically test my memory.
  2. As a Frequent User, I want to be inspired by the setting and choose a location for my next trip.
  3. As a Frequent User, I want to challenge friends to see who has a better visual memory.

UX - Five Planes Method

1. Strategy

The primary goal is to entertain the user with a quick memory game.

2. Scope

Everything should be easy to understand, and the game should be quick to learn. There aren't any navigation elements, but the user should be able to activate the music anytime, replay the game and share the result with others.

3. Structure

There is a title screen with a callout image to play the game. There is no need for a navbar since the only purpose is to play the game. After the title screen, there are instructions to teach the user how to play. Then the game starts with level 1 and moves further to level six. If the user makes a mistake or win each level, the ending screen appears. In the ending screen, there is the reward, the score, and the mail form to share the result.

4. Skeleton

The game wrapper is the main div containing the title screen and the game screen. The game screen is composed of a progress box, an information box, a game box, and a button box. All the elements are generated in these boxes at runtime. Check the wireframe for more details.

5. Surface

The game is in flat design to look modern, easy, and fresh. The theme is travel, so the title screen feature a camera and each element to memorize in the game are pictures of world landmarks. Check the design for more details.

Design

Colour Scheme

• The palette has been generated with Coolors

• English Red: #a64253
• Deep Champagne: #f2d492
• Medium Slate Blue: #7f7eff
• Sky Blue Crayola: #76e5fc
• Atomic Tangerine: #f29559
• Black: #000000
• White: #ffffff

Typography

• "Comfortaa" is the main font used throughout the whole website, with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly.
• "Ribeye" is a clean font used for headings.

Imagery

• Imagery is important. The game is in flat design. The images are without borders, and the image under the title is designed to be striking and catch the user's attention. It also has a modern, energetic aesthetic.

Wireframes

• Desktop Wireframe - View
• Tablet Wireframe - View
• Mobile Wireframe - View

Features

• Responsive on all device sizes
• Interactive audio controls
• Six levels to play
• Button hover animations
• Modal used to choose game options
• Progress bar
• Score system
• Three possible rewards
• Send results via mail

Features Left to Implement

• More sound effects
• Difficulty selector

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript

Frameworks, Libraries & Programs Used

1. Bootstrap 4.1.3:
   • Bootstrap was used to assist with the responsiveness and styling of the website.
2. Google Fonts:
   • Google fonts were used throughout the project.
3. Font Awesome:
   • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
4. jQuery:
   • jQuery was used to control the audio, the animations and throughout the game code.
5. Git
   • Git was used for version control.
6. GitHub:
   • GitHub is used to store the projects code after being pushed from Git.
7. Paint.net:
   • Paint.net was used to edit the game graphics and background.
8. Balsamiq:
   • Balsamiq was used to create the during the design process.
9. Visual Studio Code:
   • Visual Studio Code was used to write code, commit to Git and Push to GitHub.
10. EmailJS:
    • EmailJS was used to send emails to players with their results.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator - Results
• W3C CSS Validator - Results
• Esprima JS Validator - Results

The deployed site was tested with Lighthouse for performance evaluation and with Responsinator for responsiveness.

• Lighthouse - Results

  

• Responsinator - Results

Testing User stories from User Experience (UX) Section

• First Time Visitor Goals

  • As a First Time Visitor, I want to learn how to play quickly.

    1. Upon entering the site, users are asked to press the camera image in the title screen and read the instructions.
    2. The game starts easily and become more challenging after the first level.

  • As a First Time Visitor, I want to understand how long the game is.

    1. In the instruction pane, it is clear that the game has six levels in total.
    2. In the top part, there is an intuitive progress bar that indicates the current level.
    3. In the mobile version, the progress bar is replaced with a paragraph stating the current level and the total number of levels.

  • As a First Time Visitor, I want to try to turn on the music.

    1. In the lower part, there is the audio button to toggle music on/off.
    2. The user can switch the music on/off anytime during the game or on the title screen.

• Returning Visitor Goals

  • As a Returning Visitor, I want to improve my score.

    1. When the user makes a mistake or beat level six the game is over and show the user his score from 0 to 100%.
    2. The user can play again to make a better score.
    3. If the score is less than 30%, the user will get a bronze cup, more than 30% is a silver cup, and 100% is a gold cup.

  • As a Returning Visitor, I want to send my results via mail or send to friends to show them.

    1. At the end of the game, the user can insert an email address in a form to automatically send an email stating his result.
    2. The user can insert the proper email address to save his result or another to share with other people.

  • As a Returning Visitor, I want to find community links.

    1. At the bottom of the screen, there are the community links to visit the social pages easily.

• Frequent User Goals

  • As a Frequent User, I want to periodically test my memory.

    1. The user can test his memory periodically and see if there are improvements over time.

  • As a Frequent User, I want to be inspired by the setting and choose a location for my next trip.

    1. The game provides a variety of different pictures of real-world landmark.
    2. The user can be inspired by the different places and choose one of those for the next trip.

  • As a Frequent User, I want to challenge friends to see who has a better visual memory.

    1. The user can share the website with friends to challenge from a distance and see who is better.
    2. The user can play with friends also with just one computer in the same place. There's no need to be in different places.

Further Testing

• The Website was tested on Google Chrome, Firefox and Microsoft Edge.
• The website was viewed on a variety of devices such as Desktop, Laptop, iPhone7, iPhone 8 & iPhoneX, iPad.
• A large amount of testing was done to ensure that all pages were linking correctly.
• The emailJS integration has been tested.

Solved Bugs

• It wasn't possible to use a event handler with jquery to a appened element. Solved using on:

$("body").on("click", "#start-button", function () {
  newGame(1);
});

• Can't align some elements in the middle, solved with CSS:

#element {
    margin-right: auto;
    margin-left: auto;
}

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits

Code

• Bootstrap 4.1.3: Bootstrap Library used throughout the project mainly to make the site responsive using the Bootstrap Grid System.
• Code for modal taken from Getbootstrap

Content

• All content was written by the developer.
• Psychological properties of colours text in the README.md was found here

Media

• Background Music: Folk Acoustic by MaxKoMusic
• Pictures and background: Pixabay
• Editing is made by the developer.

Acknowledgements

• My Mentor for continuous helpful feedback.
• Tutor support at Code Institute for their support.