Problemsolving processbook by debra Drodvillo

MY FIRST________. A Co-creative Interface to Share the Unforgettable First Memory

Project Overview

PROJECT OVERVIEW

MY FIRST______. is an interface that allows the user to submit photos of a first memorable experience of anything in their life time. Through this co-creative and easy accessible website the users can interact with each other by sharing their memorable photos.

Table Of Contents

TABLE OF CONTENTS

Project Overview 1 Table of Contents

Website Research and Analysis 3 Site Concept 1

Site Concept 2

Site Concept 3

Selected Concept 7 Selected Concept Context

Collected Data 9-10 Asset and Wordmark Study

Sitemap 12 Inspired Website 13 Wireframe Sketches

Prototype 1 15-18 Prototype 2 19-22 Prototype 3 24-26 Final Design Development(User Testing / Feedback / Reasons)

27-28

Final Website Overview 29-30 Final Website Screen 31-34

Website Research and Analysis

Dear Photograph | www.dearphotograph.com

Valuables | www.valuablesproject.com

Every Second | onesecond.designly.com

New York Sky | www.nskyc.com

XMapping | www.mappingexperiences.com

Inside Out Project | www.insideoutproject.net

LOOKBOOK.NU | www.lookbook.nu

Site Inspire | www.sitreinspire.com

Site Concept 1

SITE CONCEPT 1

THE FIRST EXPERIENCE People experience many things throughout their lives. We experience so many incidences and unexpected events in our lives. Therefore, it is difficult to plan an expected outcome. That is why people get anxious and upset with certain experiences. When beginning something new in their life, most people will be afraid before their first experience. This interface allows anyone to treasure their first experience in digital format.

AUDIENCE The audience would be anyone who wants to share a digital photo of an occurrence to share their first experience. ENGAGE Users will submit and publish their photo from a first experience from a happening that had occurred for them. The categorized filter will also provide them to bond with individuals such as themselves. STAGE Provides a platform to share what is considered a memorable first experience through submitting a photo. HOW HTML / CSS(image transition) / jQuery(sliding menu) / JavaScript(PopUp) / Responsive(Open source) ADVISOR Internship Web developer(Jeff), Web Design Professor(Juan Parada)

The 1st Bike / Smith Anderson USA When I was 8 years old, my father thought me how to bike.

- COLLECT INFORMATION, DATA - SORT DATA - REVEAL INFORMATION - REAVEL RELATIONSHIP

Site Concept 2

SITE CONCEPT 2

DESIGNER’S SCREEN Every Designer Has Different Types Of Wallpaper In Their Screen People who related in art filed, especially most artistic designers have a different style. They are not satisfy with provided wallpaper. Therefore, designers want to decorate their screen by making their own wallpaper. The difference of composition of each screen might show their work style, skill, characteristic and sense of color.

AUDIENCE The audience will be art designer.

Pilsung Kang / Seoul Korea

Carl Neubert / Philadelphia PA

Ell Levi/ Philadelphia PA

Graphic Designer

ENGAGE The submitted wallpaper from each designer will show their unique characteristic and this will trigger audience to visit the website. STAGE There is no log-in. User submit their profile photo and their screen shot. Provides a platform to share the collection of the designer’s laptop screen from this co-creative website.

Buddy Harris / Philadelphia PA

Brett Anthony / Marcus Hook PA

Teddy Czyzewski / San Francisco

Graphic Designer

HOW HTML / CSS(Image transition) / jQuery(Sliding menu) / JavaScript(PopUp) / Responsive(Open source) / image Hover ADVISOR Internship Web developer(Jeff), Web Design Professor(Juan Parada)

Zia Frank / Philadelphia PA

Brandon Sax / Philadelphia PA

John Montesano / Bloomfiled NJ

Graphic Designer

- COLLECT INFORMATION, DATA - SORT DATA - REVEAL INFORMATION - REAVEL RELATIONSHIP

Site Concept 3

SITE CONCEPT 3

MY PLACE(SECULSION) Each individual has a specific area for study. Most people get distracted and stressed out from their workplace. They need some refresh environments to clear their minds. This interface will provide a chance to share each userâ&#x20AC;&#x2122;s favorite place to relax.

AUDIENCE The audience would be student and businessman. ENGAGE This platform focuses on collecting data from each individual such as a place that plays soothing songs, a place where they can spend time alone without distraction and a place where they can enjoy the nature. STAGE User will submit their photo from individuals experience from good environment to study, they can share and comment each other. HOW HTML / CSS(image transition) / jQuery(sliding menu) / JavaScript(PopUp) / Responsive(Open source) / image Hover ADVISOR Internship Web developer(Jeff), Web Design Professor(Juan Parada)

- COLLECT INFORMATION, DATA - SORT DATA - REVEAL INFORMATION - REAVEL RELATIONSHIP

Selected Concept

SELECTED CONCEPT

MY FIRST________. We Experience So Many Events In Our Lives.

This Is My First_______.

What Is Your First?

1991 / Dangjin, South Korea

User visit the site

Browse contents

My First Pain of Loosing Teeth.

Directed to submit photo

Compare with others

AUDIENCE The audience would be anyone who wants to share a digital photo of an occurrence to share their first experience. 2003 / Jinju, South Korea The First Day of Army Training

ENGAGE Users will submit and publish their photo from a first experience from a happening that had occurred for them. The categorized filter will also provide them to bond with individuals such as themselves. STAGE Provides a platform to share what is considered a memorable first experience through submitting a photo.

2004 / Seosan South Korea The First Day of Army Training

HOW HTML / CSS(image transition) / jQuery(sliding menu) / JavaScript(PopUp) / Responsive(Open source) ADVISOR Internship Webdeveloper(Jeff), Web Design Professor(Juan Parada)

2005 / Seosan, South Korea The First Seating on F-16 Falcon

- COLLECT INFORMATION, DATA - SORT DATA - REVEAL INFORMATION - REAVEL RELATIONSHIP

2010 / Miami,USA My First Trip to Miami Beach.

Share information with comments

Selected Concept Context

MY FIRST________.

Crowd-Sourcing

Co-Creative

Nostalgic

Engaging

User Generated & Participated Connection

Photo

Interaction

Recall

Sentimental

Age target(20 to 50)

Content

Experience

Comment Sharing Skill

Nostalgia

Individual Experience

Timeline Based Archive

Comment

Easy Access

Selected Concept Collect Data

Selected Concept Collect WordMark Study

Arial Bold 21pt SELECTED WORDMARK

MY FIRST______.

UNIVERS 65 Bold 40pt

MY FIRST. Helvetica Neue Bold 40pt

MY FIRST. Gill Sans Bold 40pt

MY FIRST. Arial Bold 40pt

MY FIRST.

UNIVERS 65 Bold 20pt

UNIVERS 65 Bold 22pt

MY FIRST.

MY FIRST_____.

Helvetica Neue Bold 20pt

Proxima Nova Bold 40pt

MY FIRST.

UNIVERS 65 Bold 19pt

MY FIRST_____.

Helvetica Neue Bold 20pt

MY FIRST.

Frutiger 65 Bold 40pt UNIVERS 65 Bold 20pt

MY FIRST.

Frutiger 65 Bold 20pt

Airal Bold 20pt

Arial Bold 21pt

Arial Bold 18pt

MY FIRST.

MY FIRST______.

MY FIRST.

MY FIRST______.

Selected Concept Collect Sitemap

MY FIRST________.

ABOUT

SUBMIT

GALLERY

ARCHIVE

Light Box Pop Up

Gallery 1

Submitted Image

Comments Submit Button

first time in a magazine

Short Description

Parallax Slide Image 1

Submit Button

first time in a magazine

- ZIA FRANK

Footer Social Share Icon

Social Share Icon

Prototype 1 Overview

PROTOTYPE 1 OVERVIEW

Size : 960px Fixed Top Header Sticky Nav Vertical Scrolling(Active State) Black and White to Color Image Hover Light Box

Vertical Scrolling Down

Light Box

Selected Concept Prototype 1 / Weclome Page / About Page

PROTOTYPE 1

Welcome Page

Welcome Page -> About -> Gallery Page -> Main Page(Comment,Share) -> Submit Page -> Timeline Page

About Page

Prototype 1 / Gallery Page / Main Page

Why Is This Topic Interesting? This platform stimulates nostalgic feelings that people of different cultures from all over the world can relate to.

Gallery Page

Main Page

Prototype 1 / Submit Page / Timeline Page

Submit Page

Timeline Page

Prototype 2 Overview

PROTOTYPE 2 OVERVIEW

Size : 960px Fixed Top Header Sticky Nav Vertical Scrolling(Active State) Black and White to Color Image Hover Light Box

Vertical Scrolling Down

Light Box

Prototype 2 / Slideshow Page / About Page

PROTOTYPE 2

Slideshow

SLIDESHOW(HOME) -> ABOUT -> GALLERY PAGE -> MAIN PAGE(COMMENT,SHARE) -> TIMELINE PAGE -> SUBMIT PAGE

About Page

Prototype 2 / Gallery Page / Main Page

How Do You Document Your Outcomes? Through the collected photo each person submitting and their experience information will categorized. Also, the collected photo data will provides to other viewer to chance for participation and sharing their source or references.

Gallery Page

Prototype 2 / Submit Page / Timeline Page

Main Page

Prototype 2 / Timeline Page / Contact Page

Timeline Page

Submit Page

SELECTED PROTOTYPE

Prototype 3 Overview

SELECTED PROTOTYPE OVERVIEW

Size : 960px Fixed Top Header Sticky Nav Vertical Scrolling(Active State) Black and White to Color Image Hover Light Box

Vertical Scrolling Down

Light Box

Prototype 3 / About Page / Gallery Page

SELECTED PROTOTYPE

ABOUT -> GALLERY PAGE -> MAIN PAGE(COMMENT,SHARE) -> ARCHIVE PAGE -> CONTACT

What Are The Significant Elements Of Experience? - Achievement experience - Place - Funny moment - Pain - Nature - Purchasing

About Page

Gallery Page

Prototype 3 / Main Page / Submit Page

How Do You Engage An Audience? Users will submit and publish their photo from a first experience from an experience they had. The categorized filter will also provide them to bond with individuals such as themselves.

Main Page

Submit Page

Final Design Development Process

About Page

Gallery Page

Main Page

Scrolling Down

Final Design Development Process User Testing / Feedback / Reasons

Consider comment section. Does this feature work in prototype? Yes, It will be working in prototype, I hand-coded form tag into the Lightbox, the user will be able to post comment. When click the ‘SUBMIT COMMENT’ the message will come out. Consider repeating year in the Achieve image. I put the year into ‘Achieve’ content page, so the user will see the year when their first moment captured. Not clear how to get out of archive page. There is no indication. I made exit button on the right top area. When users click the button, the Lightbox will disappear. Doesn’t necessary ‘about’ navigation on the menu Yes, I agree. When I click the Title it goes to about page, so I got rid of the ‘About’ link on navigation menu.

Need ‘About’ description refinement. In order to impact my concept message, I needed to fix description. I simplified the description. Lightbox Color Change (Background color need consistency, all different background-color seems complicate) I used different color for light box, but it actually made the website more complicated looking for the users. So, I decided to use one grey background color to make consistency. Submit button has to be more recognizable. Yes, the bad choice of the hover color when mouse over. I changed the hover color to be more visible. How are the larger posts selected? Most popular? My overall web system is parallax design. The each big slide image will be filtered by recent post. It doesn’t select most viewed or popular. It just posts recent submitted image.

Need ‘Move to Top’ button. My website system is long vertical system, so I totally agree to make the move to top button, user can go to top whenever they want.

Submit Page

Archive Page

Footer(Contact & Share Page)

Final Website Overview

FINAL WEBSITE DESIGN OVERVIEW

Size : 960px Fixed Top Header Sticky Nav Vertical Scrolling(Active State) Light Box Parallax Design

Final Website Overview

Final Website Screen / About Page / Gallery Page

Final Website Screen / Main Page / Parallax Scrolling

Final Website Screen / Parallax Scrolling / Submit Page

Final Website Screen / Archive Page / Contact Page

Problem Solving GDES 403 01 Pilsung Kang Fall 2014 Instructor: Debra Drodvillo