Revised process book by debra Drodvillo

MISSION STATEMENT

FIRST IMPRESSION.

CONTENTS PROPOSALS CONCEPT DEVELOPMENT WIREFRAMES/ SITEMAP FURTHER DEVELOPMENT LOOK AND FEEL

We encounter numerous strangers on a daily basis, and with each comes an impression. What physical attributes assist the cognitive process of making an impression and how accurate are these initial conclusions?

PROCESS

FIRST IMPRESSION.

PROCESS

FIRST IMPRESSION.

PROPOSALS

THE FIRST IMPRESSION

We live in a world filled with stereotypes, and generalizations. We subconsciously group people in certain categories, based on their appearance, all the time. Perhaps, our own generalizations are completely off based. Are we simply hard-wired to place someone in a particular category before we even know anything about him or her? What people think of you when they first meet you is something everyone thinks about.

PROPOSALS Three concepts were initially presented. Then, a final conept was chosen and fully fleshed out , always considering the crowd-sourced aspect of the interface.

PROCESS

A stereotype is a thought that may be adopted about specific types of individuals or certain ways of doing things, but that belief may or may not accurately reflect reality.

FIRST IMPRESSION.

IS TOPIC INTERESTING? How do people’s generalizations of you, compare to how you view yourself? Are they accurate or completely off? This is what will be interesting in seeing. Users can submit a photo of themself and see what kind of results they receive, or simply browse the site and ‘label’ other user photos.

ENGAGE THE USER? Being able to drag the word across the image, much like a game is quite interesting. I am aware of certain Jquery functions that allow this type of interactivity. The majority of the site will be dependent of HTML and CSS programming. One function in particular that I’m considering is the ability to have the images that users have ‘labeled’, archived. You will receive an ID number (this way you can remain anonymous, and don’t have to supply a name) when you submit a photo, and that number will be your way of locating your image and it’s archived content. Also, perhaps a search function, in order to quickly locate your photo. Having it sync with other social networking sites is something I would like to incorporate as well. There is a crowd-sourced aspect to the site in which it needs photos submitted, one with their ‘favorite’ outfit, and the other with a blank white t-shirt. The ‘experience’ would be in the results that are accumulated.

OUTCOMES? Outcomes will result in a collection of images that people have ‘labeled’. They’ll have various words describing you, simply based upon how you look. You will also have your personal image, which you have ‘labeled’ yourself. This will have an honest assessment of your character, based on the given collection of categorized words. Seeing if people’s description of you, matches your personal description of yourself is primarily how users will be engaged. The main page of the site will document the actual photos people submit before they are labeled. Once you make an assessment about the image, you will then be able to see past user labels. The archived images will be maintained in the order of most recent; the same goes for the images on the main page. Most recent images will be first, and then subsequent images will follow.

ASSISTANCE?

PROPOSALS

GENERATION GAP

This is referring to differences between people of younger generations and their elders, especially between children and their parents. People are connected to whatever era or generation they live in through media, culture, politics, etc. I am interested in seeing how the era people are brought up in effect them, and how does it compare/contrast to their elders. Are there similar correlations? Do some people have a larger generation gap than others?

Although some generational differences have existed throughout history, modern generational gaps have often been attributed to rapid cultural change in the post modern period, particularly with respect to such matters as musical tastes, fashion, culture and politics.

The interaction aspect of dragging the word over the image, or integrating image and word somehow, is one area; I will most likely need assistance in. This is a Jquery function and although I know it is possible, I will require some level of help. Also, when you submit your photo you will receive an ID number, I’m not quite sure how this would actually be programmed, the same goes for archiving the content.

PROCESS

FIRST IMPRESSION.

OUTCOMES?

IS TOPIC INTERESTING? Varying interests, occupations, living status, etc. What does one generation have in relation to another? These are known as generation gaps, and people always seem intrigued when they

Users may notice that perhaps their parents, or grandparents had it a lot harder then they do. Or perhaps it is the complete opposite; it will be interesting to see the outcomes.

ENGAGE THE USER?

HOW IS IT DONE?

The biggest way the user will be engaged is recognizing the photos, and being able to relate to either the past, or current generation, perhaps evoking a sense of nostalgia. Seeing the relationship between a past generation and a current one, will be the users primary experience. This will be portrayed through the use of submitting content, as well as browsing content other users have provided.

Similarly to dear photograph, the site will function like a blog, or continuous scroll. Users will be prompted to submit a photo of a parent, grandparent, aunt, etc. They must be at least one generation older than you. Users will also provide an image of themselves. Whatever age your elder is in their image must be the same age you are in yours. You must also provide 6 facts about them at that age, as well as yourself at the age you are in your photo. Both categories you choose must be the same. Married? Kids? Graduated college? Army? Job? Unemployed? Live at home? Etc. I would be relying on users ability to produce a vintage picture of a loved one, as well as a photo of themselves.

ASSISTANCE There wouldnâ&#x20AC;&#x2122;t be a ton of Jquery functionality; this site would be relatively minimal in terms of interactive functions. Primarily the use of HTML and CSS will be utilized.

PROCESS

PROPOSALS

WHAT ARE YOU AFRAID OF?

People seem as though they are more than willing to put their more personal stories, and experiences on the internet, so perhaps fear would lend itself well to this notion. Essentially this would be a place where people can archive a large list of their fears and see how they compare with other users. Do we share a similar fear that was thought to be not as common?

Fear is an emotion induced by a perceived threat which, causes entities to quickly pull far away from it and usually hide. It is a basic survival mechanism occurring in response to a specific stimulus, such as pain or the threat of danger.

FIRST IMPRESSION.

IS TOPIC INTERESTING?

OUTCOMES?

Almost everyone is afraid of something. Some are a bit more mundane than others, however it might be interesting to see if a lot of people share a fear perhaps you thought wasn’t so common. Outcomes will be generated in the growing list of fears, helped by user contributions, as well as the various user ratings, and how they compare.

After finding your fear, you can rate the level, which you stand. High, med, low, etc. Your profile will keep track of your various fears and assess how they compare to other users. Whats the percentage of people that share the same fear as you?

HOW IS IT DONE?

ENGAGE THE USER? The user will be engaged through browsing the various fears provided, and assessing their level of fear. They can also browse other people’s fears and their profile will provide comparison. Assessments must be honest in order to get the most accurate ratings possible. Outcomes will be documented through the users profile pages. This will illustrate all of the fears that they have rated, and will also keep comparisons. The list of fears that will exist will primarily be the only feature that is changed or updated. If a user wants to submit a new fear, they can do that and I will be the one to add it to the site, controlling the visuals.

This would be a place where a list or accumulation of different fears will exist. You can create a profile, browse the different fears that are provided and find one that applies to you. If you don’t see one that applies to you, users can submit a new fear and it will be added to the site.

ASSISTANCE Having the site calculate your ratings, in comparison to other users. There are server networks available that offer this kind of sorting/calculating. I would require some level of help in figuring this out, as well as embedding it into the code.

PROCESS

FIRST IMPRESSION.

CONCEPT DEVELOPMENT

INITIAL SKETCHES

Sketches were a great way to start thinking visually. How will this site actually function? The primary experience will be the actual labeling process so I wanted to begin to visualize how this could be done, and how the image/word relationship comes into play. Also, I began making the wordlist that users will use to descibe each subject.

CONCEPT DEVELOPMENT First Impression was the final concept choice. It had the best potential for creating a very visual platform for users to be engaged, as well as having an intriguing system of users essentially stereotyping one another.

PROCESS

FIRST IMPRESSION.

CONCEPT DEVELOPMENT

DATA

In further developing my concept, I have developed a prototype site in order to obtain some degree of data. I am interested in seeing how people react to the word bank provided, and if they are really willing to participate. Thus far, the feedback has been quite successful. People seem willing to want to participate, and I have obtained a wide range of results. People seem to stereotype differently which is very interesting.

PROCESS

Bisexual Middle Class Average Courageous Outcast Trusting

Straight Friendly Smart Trusting Honest Upper Class

Fearful Average Upper Clas Drug User Popular 25-55

Straight Friendly Humble Trusting Honest Middle Class

FIRST IMPRESSION.

SIGNIFICANT?

IS LOCATION AN ELEMENT?

The word and image associations should be integrated to some extent. I would like to eliminate the need to go back and fourth between choosing a word and looking at the image. Layering would be the most logical approach in solving this problem. The fact that users are anonymous is also a significant feature to the experience, it allows for fewer bias results.

The location is a prominent element as well. The site should hold a degree of consistency visually; therefore all users will be prompted to photograph their profiles against a white backdrop, in order to showcase their body and their clothing.

IS TIME AN ELEMENT? Having the second photo of the uploaders description of themself appear as soon as a user is finished tagging an image is an important element as well.

IS SOUND AN ELEMENT? I believe the site will function more productively if uploaders and/or users are kept anonymous, this allows for less bias results. Incorporating sound may take away from the simplicity of characterizing someone based on appearance.

Bisexual Average Outcast 18-25 Drug User Fearful

Fearful Average Straight Drug User Popular 18-25

Gay Smart Lazy Substance-Free Courageous -18

Straight Friendly Smart Trusting Honest Athletic

PROCESS

CONCEPT DEVELOPMENT

DIRECTION ONE

This direction would contain about six levels, from landing on the welcome page to tagging other users, the layout is meant to evoke fluidity with the images, and an impact with itâ&#x20AC;&#x2122;s content.

WHATâ&#x20AC;&#x2122;S POSSIBLE? Users have the ability to visit the site, take a photo of themselves in two outfits, and upload them to the site.

FIRST IMPRESSION.

CONCEPT DEVELOPMENT

DIRECTION TWO

This direction is really about the scroll and how it delivers the information. The site has four levels total, three that can be accessed through scrolling on the homepage. The fixed footer may serve as an interesting design and navigational device. Also, I wanted to consider the search feature, how does it play a role in the numbering system?

First Impressions

Upper Class Average Bisexual Average Dishonest Average Honest 18-25 Outcast Friendly Smart Outcast Courageous Vain Poor Top Tags

WHAT’S POSSIBLE? They also have the ability to tag their own photo (in a white shirt), once they have uploaded two images.

18-25 Popular Straight Drug User Lazy Unfriendly FearfulSmart

Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s Sort

18-25

PROCESS

FIRST IMPRESSION.

PROCESS

FIRST IMPRESSION.

CONCEPT DEVELOPMENT

DIRECTION THREE

The navigation itself, and the scrolling is really what are controlling the narrative of the site. Perhaps the up and down arrows will be fixed as well so users have an option of how they want to navigate through the homepage.

About Instructions Tag

Upper Class Average Dishonest 18-25 Smart Courageous

WHAT’S POSSIBLE? Top Tags

Users have the ability to browse the site and tag other user photo’s anonymously.

About Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s

First Impressions

Instructions: Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s

Download Email Upload Tag

PROCESS sort

FIRST IMPRESSION.

PROCESS

FIRST IMPRESSION.

First Impressions

Upper Class Average Dishonest 18-25 Smart Courageous sort

Instructions:

Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s standard

Download Email Upload Tag

PROCESS

Top Tags

WIREFRAMES/ SITEMAP

SITEMAP

The welcome page would essentially serve as the first page you land on once you visit the site. The homepage allows users to learn more about the project, perhaps some concepts regarding generalizing. Instructions regarding how to upload photos, what they need to look like, and how to label your own photo are all on this page. Top labeled images will be made available for viewing at this level. Users may also browse, and tag.

WIREFRAMES/ SITE-MAP Already having a slight vision in mind regarding the look and feel of the site, I began sketching the wireframes and layout. The site map also began to develop as well.

PROCESS

The navigation of the site is vital in presenting the hierarchy of the data. The site is essentially a place for people to interact, however, the aspect of anonymity provides another layer.

FIRST IMPRESSION.

PROCESS

LANDING PAGE

WIREFRAMES/ SITEMAP

On the welcome screen, users will receive an initial message regarding what the site is about. Not necessarily to provide instructions. This will be a provided on the homepage.

HOMEPAGE TOP LABELS (SUB LEVEL) After clicking on one of the images on the home screen, users are taken to this page where they can view the photos at a higher resolution.

HOMEPAGE (LEVEL 1) Users will click off of the landing page via the “x” button. Then they will land on the homepage, in which “Top Labels” will be visible first. Navigating this page will ultimately deliver most of what the site has to offer. Users can submit a photo, view unlabeled photos, choose one, search, and learn more about this project.

ABOUT (SUB LEVEL) Additional info and background regarding the project. Goals, thoughts. etc.

SORT (SUB LEVEL)

EXPERIENCE? Users can view the top labeled images. They can also access the ‘about’ and contact subpages, thus gaining further insight unto the project. Finally, users are urged to participate and upload a photo.

View the users average number of six labels. Also view up to ten archived images labeled by other users.

SEARCH (SUB LEVEL) Using their given number ID’s, users can search for their image or someone else’s image. Using one of the words provided as a search tool is also an option.

SUBMIT A PHOTO/ REGISTER EMAIL (LEVEL 2) This section of the site can be accessed through the homepage, or from the navigation. Instructions are provided, and they will be given a number assigned to their email address, once they submit/register.

Menu About

Submit Label

account

photo

SEND A LABEL (LEVEL 3) This is where users can use the word bank in order to label a user in the image. Then simply submit your label.

PROCESS

How to upload photo, instructions

First Impression.

FIRST IMPRESSION.

photo

PROCESS

FIRST IMPRESSION.

Menu About

Submit

Upper Class Average Bisexual Average Dishonest Average Honest 18-25 Outcast Friendly Smart Outcast Courageous Vain Poor Label

account

Top Tags

18-25 Popular Straight Drug User Lazy Unfriendly FearfulSmart Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s

Instructions: Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s

Download Email Upload Tag

WIREFRAMES/ SITEMAP

LANDING PAGE & TOP LABELS EXPERIENCE?

18-25

Sort

photo

The landing page offers a quick introduction before the user is able to exit and land on the homepage. The top labels level lets users view the photos that gain the most traffic. Click to exit and return to the homepage.

photo

First Impression. PROCESS

FIRST IMPRESSION.

PROCESS

FIRST IMPRESSION.

WIREFRAMES/ SITEMAP

Welcome to First Impression. The site where,ince the 1500ser since the 1500s Ipsum has been the industryâ&#x20AC;&#x2122;s stand photo

photo

ABOUT & SEARCH photo

photo

EXPERIENCE? Users gain further insight unto a bigger goal or picture that the site represents. Search your ID number and find your labeled images, or search other users in order to see an archive of their images.

How to upload photo, instructions

First Impression.

Top Labels

Upper Class Average Dishonest 18-25 Smart FirstCourageous photo

photo

How to upload photo, instructions

Impression.

PROCESS

FIRST IMPRESSION.

WIREFRAMES/ SITEMAP

About

LABEL & (SUBLEVEL)

About

Submit Label

account

photo

ajority have suffered alteration in some form, by injected anything embarrrepeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary photo photo of photo over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetitio How to upload photo, instructions

First Impression.

photo

EXPERIENCE? Users will first be provided the instructions once more. It is important they are as honest as possible in their assessments. What really comes to mind first? They will then be able to label the image they have chosen. Once they click submit, they will be provided additional user statistics from his/her history on the site.

Menu About

Submit Label

account

photo

First Impression.

PROCESS

FIRST IMPRESSION.

PROCESS

FIRST IMPRESSION.

Label

Instructions

additional info

Image (zoom )

Word Bank

Label

+ —

First Impression.

Positive Negative

Trusting Suspicious

Virgin Experienced Athletic Lazy

Honest Dishonest

Label

Gay Straight Bisexual

Upper Class Middle Class Poor Homeless Smart Average Unintelligent

Drug User Substance-Free Popular Outcast

First Impression. Instructions

Friendly Unfriendly Humble Arrogant

Modest Vain

Courageous Fearful

Image (zoom )

+ —

First Impression.

PROCESS

Straight Substance-Free Average Fearful Experienced Upper Class

additional info

Word Bank

FIRST IMPRESSION.

PROCESS

FIRST IMPRESSION.

Label

Menu Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s standard dummy text ever since the 1500ser

Straight Substance-Free 1 Average Fearful Experienced Upper Class Positive Negative

Trusting Suspicious

Virgin Experienced Athletic Lazy

Honest Dishonest

Gay Straight Bisexual

Upper Class Middle Class Poor Homeless Smart Average Unintelligent

Drug User Substance-Free Popular Outcast

First Impression.

Friendly Unfriendly Humble Arrogant Modest Vain

Courageous Fearful

Ipsum has been the industry’s standard dummy text ever since the 1500ser since the 1500s Ipsum has been the industry’s standard dummy text ever since the Straight 1500ser since the 1500s Ipsum has been Substance-Free the industry’s standard dummy text ever since theAverage 1500ser Fearful Experienced Upper Class

Straight Substance-Free Average Fearful#167 Experienced Upper Class

PROCESS

Upper Class Average Dishonest 18-25 Smart Courageous

Straight Substance-Free Average Fearful Experienced Upper Class

FURTHER DEVELOPMENT

FURTHER DATA

I had an initial round of data that was collected, however I needed more participants, as well as more word assessments. I used the lobby of the Terra building as a photo booth. As students walked to and from class, I would share with them information regarding the project and had them participate if interested. I now had more subject images, and could use them to receive additional data.

FURTHER DEVELOPMENT The majority of the site has been fleshed out; therefore I began thinking in terms of design, color, and how all my elements could work better as a system. Various iterations were made until the look and feel of the site really began to come together.

PROCESS

FIRST IMPRESSION.

PROCESS

FIRST IMPRESSION.

PROCESS

FURTHER DEVELOPMENT

HOMEPAGE

As the homepage began to take shape, there was a hierarchy that was very apparent. The “Top Labels” portion worked nicely as a slideshow. Visually it adds an interesting graphic nature to the site. The ‘participate‘ button on the left is a quick indicator of what the site is about. By clicking on it, users will be taken to the submission portion of the site where they can upload a photo, if desired. I really wanted to introduce the idea of having articles, videos, etc. Anything relating to stereotyping, gender roles, perhaps racism. This would offer additional content for users to browse through. It turns the site into a community of curated content. As users scroll down the page they are introduced to additional material.

FIRST IMPRESSION.

FURTHER DEVELOPMENT

HOMEPAGE (SUB-LEVELS) Instead of constantly taking the user to a new page, the usage of the light box came in handy. Muse is quite limited in it’s functionality it offers your site, however I found the light box feature to be very useful. Visually it adds a nice touch to the sublevel pages. Users can quickly access the about page, and the contact page without hindering the ‘experience’ of the site. The “Top Labels” page can be easily accessed as well.

PROCESS

FIRST IMPRESSION.

FURTHER DEVELOPMENT

SORT (SUB-LEVEL)

The sorting feature is easily accessed on the homepage. Here, users can filter the images that live below the fold. If they only want to view unlabeled images, they have the choice to do so, the same goes for labeled images. The ‘ALL’ button will take you back to the homepage in which these images are mixed with each other as well as additional content.

PROCESS

FIRST IMPRESSION.

FURTHER DEVELOPMENT

SUBMIT (LEVEL 2)

My solution wasto include the submit page as another separate level. This can be accessed from the main menu that is fixed at the top of every page. There are stipulations on how the photo should look and this information can be found at this level. In keeping with the overall aesthetic of the website, all photos submitted must meet these requirements. Additional features such as a local photo booth that is capable of traveling to multiple locations will be examined with further development.

PROCESS

FIRST IMPRESSION.

FURTHER DEVELOPMENT

LABEL (LEVEL 3)

“The meat & potatoes,” so to speak, of the website. This level is where the majority of user interactivity occurs. Instructions will be given as soon as you land on this page, and from there it is up to the user to make whatever assessment they choose about the subject. The words will appear as each one is clicked. Once 6 words are chosen and ‘Submit’ is clicked, you will see your response once more, then the users personal statement. Finally the top 6 labels for that particular subject. The zoom feature on this level also helps when making your assessments. Users will want a good look at whom they’ve chosen.

PROCESS

FIRST IMPRESSION.

PROCESS

LOOK AND FEEL

STYLE GUIDE

The color system became a prominent element in the visual system. Also utilizing the stroke as an element became quite interesting. This idea was carried over to the system of social networking icons. I thought of how to tie these in visually, but still maintaining the integrity of the icon. The image/type element is perhaps most vital. The words act as an important message, one that came straight from the mind of another user. Spreading this across the site visually ties the whole idea together.

LOGOTYPE

PALATE

LOOK AND FEEL The overall look and feel of the site began taking shape quite early, however once each page was beginning to come together, the site began to function more as a system. Creating visual elements that tie the experience and the content together helps this system work more cohesively.

ICONS

Helvetica AB C D E F G H I J K LM NOPQRSTUVWXYZ abcdefghijkl mnopqrstuvwxyz

PROCESS

Courier ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijkl mnopqrstuvwxyz

FIRST IMPRESSION.

GRAPHIC & VISUAL LANGUAGE

Brett Anthony Robinson Problem Solving UArts Fall 2013

PROCESS