Quiz Page Mock-Up


For the quiz page, I experimented with inputting the square from the figures in the home page and using that to create a space for typing answers. I think this is a good way to keep similar elements that were used previously on the website but in a different way. This keeps the individual pages within a similar aesthetic without making them look boring. I wanted to use the same color scheme as the one that I have been using throughout the website,this already made the possibilities of creating variations for this page quite narrow. Thus, despite the limited number of colors that I could use for this page, I still managed to experiment with a couple of different colors. I really didn’t like the first image, it seemed overly bright and distracting, the second one was better but I still didn’t feel like it was interesting enough visually to attract the audience. However, when I used the dark colors for the page, I felt like the page felt right. I think that a dark background adds contrast to the question as well as the answer and makes them appear more significant. I think this works well at bringing the attention of the user to answering the question.


Thus, after the Landing Page and the Home Page, my website will also have a series of quiz questions. I wanted to make the quiz seem like it is initially asking for very trivial information, something that people don’t mind sharing as it isn’t anything personal or seemingly harmful. However, as the user progresses through the quiz, the questions will become more personal and will require the user to think more critically about the medium while simultaneously giving away a little more information with each following step.Thus, since the user already answered many questions, he/she will be compelled to continue as they will want to find out what the result of the quiz is. This will make them give away personal information/data and reveal the fact that people’s identity online is constantly being controlled and governed using similar persuasion techniques. We are thus, constantly being coerced into sharing data, both with our permission and without.

This page will have animated lines coming into the page as the user goes on the page which will follow the previous structure of assembling pages. This will once again make the user more aware of the medium that he is using. I will use a contact form widget for the square in the middle, which will allow the users to type their answers to my questions and pressing a ‘submit’ or ‘next’ button  will take them to the next question.

This is the full list of potential questions for other pages that will be created next term:

  • Question 1: What is your nickname?
  • Question 2: What is your gender?
  • Question 3: Have your friends ever shared embarrassing photos of you online?
  • Question 4: Do you allow people to tag you in their photos?
  • Question 5: How many apps do you use?
  • Question 6: How many hours do you spend online?
  • Question 7: Do you think spending this many hours online makes you digital?
  • Question 8: Do you know how your smartphone operates?
  • Question 9: Are you aware of how much coding is firing up on your computer just to have this sentence appear?
  • Question 10: What kind of security do you use to protect yourself online?

The first two questions of the quiz are there to establish a connection with the user while requiring little amount of information. The fact that the user will share their nickname with the website instantly makes the user develop a personal relationship with the quiz as he/she gave away something trivial yet personal. This will serve as a hook- in order to attract the audience enough so they don’t loose interest in the quiz. The important thing is to keep them interested for the first couple of questions so that they answer the rest based on the fact that they have already spent some time answering the first ones. The next two questions are still fun but they become more critical as they will make the user think of the time their data (through the photograph) was shared without their permission. This will make their mind start the reflection process. Following this, the questions will get more centered on generating their awareness towards their use of the digital. Additionally, making them aware of the coding will further reinforce their reflection towards the potential for critiquing and becoming aware of the medium. Finally, the last question asks about the user’s security online. This will make them question their privacy and security tools that they use while they are online and will make them aware of the fact that they might not be well protected. I think these questions makes the audience to think more critical about their digital use and also prepares them for the educational part that follows the final page.

I am not sure whether I will use all of the above questions for my final pages. Thus, I think as the project develops they might be altered. I would need to get more feedback from my target audience in order to be able to edit and adjust the questions to create a desired effect. The rest of the quiz pages will have the similar aesthetic to the mock-up above, I will just have different questions. Additionally, the answers to these questions will sometimes be multiple choice and other times they will have a space to write an answer.  Next term I would also like to experiment more with using Muse Widgets to create various animated pages of the quiz. I think I could experiment next term using widgets like:

  1. https://musefree.com/particles-lines-effects/
  2. https://musefree.com/sound-waves/
  3. https://musefree.com/jelly-button/

These widgets might be used to enhance my aesthetic as the website will be more visually interesting and be more interactive. The first two widgets will allow me to use animated lines in my pages which goes well with my general aesthetics and matched my already developed pages. The third widget could improve the aesthetics and interactivity of my buttons.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s