Navigation, Narrative and Submission Website Pages Explained

Navigation Map:Screen Shot 2016-12-04 at 2.54.19 AM.png

The above map shows the navigation of my final website as well as allows to see the narrative that has been created. For this submission, I am only turning in 4 pages, 2 of which are mock-ups. This map also shows exactly how the user will navigate through my website. Additionally, for the purpose of this map, only 7 questions are displayed, however, there will be 10 questions in total in my final project. As mentioned previously, my website doesn’t have a menu which means that the user will not be able to go back once he clicked to go to the next page. This was done in order to  make sure that the user follows a specific journey because if the user had the option to choose which section of the quiz he could go on, then the narration would be ruined. Thus, the order of everything within the website is extremely crucial for the desired effect.

Landing Page:

Screen Shot 2016-12-08 at 15.54.26.png

This is the first page of my website. I created lines and animated them in a way that makes the letters look like they are assembling in front of the user. This was done with the aim of making the user aware of the medium.  This aesthetics thus simulates an almost raw/ behind-the-scenes type effect which makes it look like you’re getting a glimpse into how websites are usually created before they are shown to the public as already assembled with hight quality graphics that attract the attention of user.

‘Lets play’ button- This button was inspired by an online quiz that I clicked on. I really like how that sounds very playful and fun and I thought that it goes perfectly well with my game inspired-design.

Home Page:

Screen Shot 2016-12-08 at 15.54.53.png

This is the home page of the website. The page as well as the whole website uses a vintage design aesthetic. As discussed earlier, vintage design can ‘elicit a sense of history, of stability, of reliability, and of value’ (Yoder et al., 2016).  When combined in a website, this concept evokes a level of trust from the users towards the website. Additionally, the lines behind the figures as well as the animation of the figures sliding in, all act as a source that evokes the awareness of the user towards how the medium is constructed.

The fact that the faces of the figures are covered directly relates to the concepts of blurring the face as representation of the fact that our true self is irrelevant online and that we are simply just an ‘IP address’ used in order to be persuaded into purchasing something online. The covering of the face is also a visual representation of how identity of the users on the Internet is being manipulated.

I also created a conversation between the figures and the user. This reinforce a game-like quality of the website and also serves as a source of attention-attraction for the user as the conversation will keep them entertained. This was created after the Lecture by Erica Scourti in which she talked about the existence of intimacy between a person and their computer, which generates a level of trust between them. Thus, this interaction is supposed to evoke a sense of trust in the user, making him want to think of my website as reliable and thus, engage in sharing of personal data through the questions.

Quiz Question Page:

Screen Shot 2016-12-08 at 15.55.05.png

This is the mock-up of the quiz question. 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.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.

This page will also have animated lines coming into the page as the user goes on the page which will follow the tactic of making the user aware of the medium.

Final Page:

Screen Shot 2016-12-08 at 15.55.14.png

This is a mock-up of the last page of my website. Once the user finishes the last question, instead of getting a result the user will go to this page. A man with an error message will slide in and claim that something went wrong, alluding to the fact that the information that was just given away by the user is lost. This will serve as a reality check  because the user will realize that they have just shared personal information on an unverified website and now they have no knowledge of where their information has gone or who has access to it.

The ‘okay’ button appears a couple of seconds after the figure and when clicked, a statistic will appear in the final project which will reveal the educational quality of this website as it will make them aware of the concept of data sharing based on how easily they give away their personal information/data.


Yoder, W., Baker, C., S., A. and R., T. (2016). Vintage Designs For the Modern World – Logoworks Blog. [online] Logoworks Blog. Available at: [Accessed 3 Nov. 2016].


Leave a Reply

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

You are commenting using your 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