Final Page- Experiments and Mock-ups

For my Final Page, I knew that I wanted to use the same color palette as the rest of the website and I ended up creating this background:

Screen Shot 2016-12-04 at 12.06.55 PM.png

I previouslyI explained that when the user gets to the last page, there will be a visual animation of data being dispersed all around the page. I thought that 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. I have experimented with trying to visualize this loss of data with the inspiration website that I mentioned earlier. My plan was that as soon as the user enters this page, there will be a visualization of data followed by an animation of a person coming into the picture with the text ‘Oops, something went wrong. Please try again’. I wanted to also input a button that would appear later which the users could click and a statistic would appear which will reveal the educational quality of this website as it will make them aware of the concept of data sharing and how easily they give away data and information.

Screen Shot 2016-12-04 at 2.34.48 AM.png

However, after a couple of experiments with the visualization of data, I realized that I wasn’t happy with the way it turned out. I then talked to a couple of my friends who are basically my target users as they are also millennials, and asked them what their impression of the last page was. Sadly, none of them understood the concept of data being displayed and they mentioned that it didn’t really leave any impression on them. Thus, I needed to come up with something else that would convey my desired effect better.

I also discussed this issue that I was having, in class, and realized that instead of visualizing data I could include a loading bar animation which will initially load fast and then stop at the very end and make the audience wait for their results. This will be a play on their frustration on the Internet and simulate the fears and annoyances of online content.


I fond a tutorial on how to create a loading bar gif in Photoshop so I will use these instructions to customize my own next term. Here is a link to the tutorial:

After the loading bar finally loads, the bar would disappear and the man with a message will appear. I also ended up changing the brown square to an error message that I found online:

IC725763.png I edited the message in it and simulated the font that is usually used in these error messages and wrote ‘Error: Something went wrong. Please try again’. I think this works better and creates a more dramatic impact on the audience. Additionally, I animated this file on Adobe Edge and made the ‘okay’ button only appear a couple seconds after the man with the message was displayed. Once the button is clicked by the audience, a statistic will be displayed. I searched for various statistics online and found this one: 68% of people share their information online to give or get a better sense of who they are and what they care about. This is an interesting statistic and its relevant to what I have been wanting to display, however, I think next term I will do a more extensive research and try to find a more impactful statistic.

Screen Shot 2016-12-04 at 2.33.01 AM.png

This page is the final mock-up of the last page. Next term I will work on realizing my plans for the animation on this page.

Statistic Source:


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