WINE PERSONALITY TEST

View the live project here.

Ever wonder how you stand up to other wine drinkers? Take this simple 6 question quiz to find out!

Table of Contents

• 1. User Experience (UX) development process
  • 1.1. Strategy
    • Project Goals
    • User Goals
    • User Expectations
  • 1.2. Structure
  • 1.3. Skeleton
  • 1.4. Surface
• 2. Features
• 3. Technologies Used
• 4. Testing
• 5. Known Bugs
• 6. Deployment
• 7. End Product
• 8. Credits

1. User Experience (UX) development process

Go to the top

According to Jesse James Garrett, the user experience development process is all about ensuring that no aspect of the user’s experience with your site happens without your conscious, explicit intent. This means taking into account every possibility of every action the user is likely to take and understanding the user’s expectations at every step of the way through that process.

1.1. Strategy

Go to the top

Jesse James Garrett also explains that strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well.

Project Goals

The main goals of this website is for users to discover what kind of wine drinker they may be. A personality test was chosen rather than a Q&A quiz, so clever users could not find the answers via their browser's developer tool.

User Goals

• First Time User Goals

  • First time users will want to know which type of wine drinker they are.
  • First time users will want to have fun.

• Returning User Goals

  • Returning users will want to compare various answers to discover the different types of wine drinker.
  • Returning users will want to have fun.

• Frequent User Goals

  • Frequent user will want to test their friends.
  • Frequent users will want to have fun.

User Expectations

According to Jennifer V. Fayard Ph.D., one of the reasons people like to take personality tests in the first place is that they want to learn about ourselves.

1.2. Structure

Go to the top

The project must have a responsive design as many users are using different devices (mobile, tablet, laptop/desktop). This gives the user the best experience on their device.

• Responsive on all devices sizes
• All elements are consistent including font size, font family, colour scheme.

1.3. Skeleton

Go to the top

According to WebFX, wireframes give web developers a clear path of what has to be done. It clarifies the direction and objectives of the site build and allows for better decision-making as to which web technologies, techniques and processes should be used in order to achieve an excellent result.

For this project, wireframes were created using Balsamiq

Wireframes

Home Page Web Wireframe:

Result Page Web Wireframe:

Home Page Mobile Wireframe:

Result Page Mobile Wireframe:

1.4. Surface

Go to the top

Colours

The main colours for this project are a light shade of brown (#F1D8BC) and Gray44 (#707070).

Typography

The font used throughout the project is Montserrat, whilst the headers (h1 and h2) are in Varela Round, with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly.

Imagery

The background image was found on the website Unsplash and published by Elisha Terada.

2. Features

Go to the top

Existing Features

• The landing page

  • The landing page provides the users with all the questions. Upon answering all questions and clicking the Submit button, the result(s) will be shown.

• Quiz questions

  • The questions are shown from top to bottom, one after the other.

• Buttons

  • Two buttons provide the user with two possible options, reset or submit.

• Quiz result

  • A separate container is visible at the bottom of the page. After submitting, one or two results may show, depending on the user's responses.

• Footer

  • The footer gives credit to the authors of the test.

Features Left to Implement

• Questions could appear in separate containers as opposed to one after the other.

3. Technologies Used

Go to the top

• Balsamiq for wireframes design.
• Gitpod for writing of the code as well as the readme file.
• HTML5 as this project uses HyperText Markup Language.
• CSS3 as this project uses Cascading Style Sheets.
• JavaScript as this project uses Javascript for functionality.
• Google Chrome DevTool for debugging.
• GitHub for deployment.

4. Testing

Go to the top

Manual Testing

The site has been tested on various browsers such as Google Chrome, Safari and Mozilla Firefox, on multiple devices such as desktop, laptop, tablet and mobile.

Below is the testing process for the quiz on desktop and mobile versions:

Main page:

• Questions

  • All radio buttons are working.

• Submit quiz

  • When clicking the submit button, results appear or the "unclear result" message.

• Reset quiz

  • The reset button reloads the page and reset the test.

• Results

  • Result appear in the container. A message will appear if the result is unclear.

• Text:

  • All text is in the correct and consistent size, font and color. Text has also been checked for typos.

• Media:

  • The background image loads on the page. The image has alt text equivalent in a contrasted color if not loading or for visually impaired users. Working as expected.

• Responsiveness:

  • The site is fully responsive.

Automated testing

W3C Validator Tools

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.

• Markup Validation Service
  • No Error Found.
• W3C CSS Validator
  • No Error Found.

5. Known Bugs

Go to the top

• I could not manage to add margin above the title, as the background image was moving down with the title.
• Whilst testing on my mobile phone, I noticed the background image was not reaching the bottom of the screen.

6. Deployment

Go to the top

GitHub pages was used to deploy the final project. Below is the step by step process for deployment:

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.

7. End Product

Go to the top

Below are screenshots of the end product, for desktop and mobile:

Home page desktop:

Home page mobile:

8. Credits

Go to the top

Design

• Designed by Marianne Johany.

Code

• MDN Web Docs: for refreshers on standard practices.
• W3Schools: for more refreshers on standard practices.

Content

• All content was written by Madeline Puckette
• The icons in the footer were taken from Font Awesome

Media

• The background image was provided by Elisha Teradavia the website Unsplash.

Acknowledgements

• Thank you to the Code Institute for their support.