Timeless by Justin Chen

SUMMER

TIMELESS

This website works as a tool that helps people record all of their memorable events. The main goal of the website is to allow user find events that fit his/her interests. User also has the option to create his own events and store them all in a personal collection. May all memorable events remain timeless.

Justin Chen Term 03 Summer 2012 Interactive Design 03 Instructor: Brian Boyl + Dave Bullock

PAGE

INITIAL IDEA

PAGE

WHO

organized individuals people who wants a diary people who take photos and videos

PAGE

WHat

a place to record memory system for photos and videos an online diary a personal collection a timeline

PAGE

WHy

people always look back to events in life people would be able to remember what theyâ&#x20AC;&#x2122;ve done people can share their experience with friends and family from a far distance. people will be able to join events that fit their interests

PAGE

other websites

PAGE

tone study Memorable Celebrations This website allows user to make plans for a big day! user can create an event for a wedding, birthday, or graduation party and invite all of the guests to see the event info. only people who have attended the event will be able to see and download photos from the event. event creator will always be able to modify event info and the guests will always be updated. features: - create/modify/delete events - upload photos and videos from the event - invite friends and family to the event - make a checklist for all of the things to prepare - attach an interactive map to the event - display slideshow of the event tone: lively, exciting, direct, cheerful

PAGE

tone study My Secret Diary This works as a personal blog that is not opened to the public. user can add photo, video, word description to any day in life. the content will be displayed like a scrapbook and as user flip through pages, events will be viewed in chronological order.

features: - create/modify/delete events - upload photos and videos from the event - design layout of each page - flip through pages to see events in order - slideshow for photos tone: free, quiet, lose, personal, private

PAGE

tone study A Collection of Timelines This website allows user to create multiple events that vary in lengh. User of the website can always add event to his personal timeline. You can always go back to modify the information, add photos, videos, and other comments about the event.

features: - create/modify/delete events - enter date to find a specific event - upload photos and videos from the event - invite friends and family to the event - privacy setting - allow guests to add comment to the event tone: organized, clean, large photo display

PAGE

interviews

Akihiro Matsui

guillaume wolf

Timothy cheng

student 22

art director 40

motion designer 23

what websites do you like?

I like veoh, youtube, hypebeast, blue lug

Facebook

http://www.fastcodesign.com

why do you like those websites?

I love exploring music and watching good videos so I like youtube and veoh for that. I like hypebeast for it’s simplicity and feel for a target marketed online magazine. I like bluelug for it’s design/feel and for it’s bike parts.

so I can connect with friends and learn about new things.

user friendly design and good content.

what do you think might be helpful for my website design?

you should check out how blogger and tumblr handle their posts.

making it special enough by offering features not presented on Facebook.

i think what you are looking for is a more advance Facebook event page with smarter functionality and better design.

what is your media profile? what do you read, what websites do you use to find updates?

I read manga for hobby and read japanese fashion/bike magazines like Cool trans, Fudge men’s, Honeyee, Loop, Eyescream and etc. I use youtube to keep myself updated with music, I also use Facebook to see if there is any interesting events.

I read inc. and Fast Company.

design related information. i use motionographer.com to find motion related information

is there a website that has made an impression to you visually?

http://www.beams.co.jp/en http://www.honeyee.com

Less is more. Minimalist simple is always better!

http://www.fastcodesign.com’s flushed image on the top looks pretty nice.

is there a website that you hate? and what are some of the features on websites that annoy you?

urban outfitters, its messy, plain and too many things on the website.

MySpace, too tacky.

http://www.heyshow.com.tw/ too much ads and they are not unified. information are cramped, shitty content.

what do you use the web for that your phone cannot do? what are the unique benefits from websites?

Using the web shows the true potential of how a website can be and will show a certain lifestyle visually through a good website.

I prefer to browse on bigger screen.

easier to browse with a mouse.

INTERVIEW

Mike su

pearlyn lii

angelina mikhailovna

game designer 36

student 18

student 19

what websites do you like?

Facebook, twitter, techcrunch, business insider, espn, la times

Social media sites, but twitter.com in particular.

Youtube, Facebook, Google +, Netflix, The Pirate Bay

why do you like those websites?

facebook and twitter to keep up with friends and industry, others are for their content: news and sports

Mostly its functionality. Twitter doesn’t have too much room for a good look, especially having to manage so many tweets and information.

Youtube has simple design, which makes it easy to search and I find it very functional because it offers maximum results for every search.

what do you think might be helpful for my website design?

check out erly.com, it’s founded by a good friend of mine. they actually recently sold the company to sean parker’s new company it’s goal was to help create timelines etc

Remember to not let users have too much flexibility. Keep a good design skeleton like Facebook does...only really let the user decide on information and pictures.

Simple design is timeless and often best because it does not distract the viewer from its purpose and functionality, sometimes “less is more” is the way to go

what is your media profile? what do you read, what websites do you use to find updates?

i read new usually from latimes or nytimes or huffington post, i get industry news from places like techcrunch, business insider, and more recently pando daily.

Honestly? Twitter. Twitter acts faster than some news sites nowadays. It’s crazy how fast word-of-mouth can spread. I also like listening to BBC Podcasts.

I read mainly online .pdf documents, for news I use Google reader

is there a website that has made an impression to you visually?

i think the erly.com guys did a good job visually. this is a good example of a slick web based pitch deck: http://piccsy.com/ investors/, i think looks aesthetically pleasing

https://path.com/ -- check it out on your phone! I’m not completely in love with it visually, but it’s a good compromise between functionality and look.

I like the new “timeline” layout of Facebook has a more cohesive design and the layout is easier to follow, I like that it has a color system

is there a website that you hate? and what are some of the features on websites that annoy you?

some websites ask me to do things that purely benefit the site, but provide no value to me, i get annoyed

It’s always the lack of features that would annoy anyone. Especially the lack of privacy for most common users.

The design for Pirate Bay is not very cohesive, the site has great functionality but there is less of a sense of design in terms of color.

what do you use the web for that your phone cannot do? what are the unique benefits from websites?

i usually get on the web when i need to do a lot of research fast. i.e. i need to fire up a lot of tabs, or switch back and forth.

Most phones can’t view flash. I really think that’s the main disadvantage of viewing video content on your phone.

I generally do not use the web on my phone because of the extremely slow speed and poor responsiveness.

INTERVIEW

PAGE

personas Novice user Sara Lauren Diaz Intermediate user Christophe Wu Advanced user Greg Batha

1. Personal background 2. Scenario / timeline 3. User storyboard 4. User flow chart

CAREER

MUSIC

TECHNOLOGY

I currently work for the Golden Gate Xpress as the online managing editor. That’s where I sit in front of the computer 8 hours a day doing the same thing everyday. When I’m not in front of the computer I work as a model for some local clothing companies. I love working with photographers on interesting projects as well.

I like trance music or any music that makes me want to dance. Some of my favorite DJ’s are Avicii, Kaskade, and Deadmau5. Anything upbeat should be acceptable.

I always work on my 15 inch MacBook Pro laptop, it simply gets the job done and has great durability. I don’t have a professional camera, but my digital camera from Sony helps me record all of the fun times with my friends. I also take photos with my phone a lot

Dislikes: I don’t like slow music or music that puts me into sleep. Classical music just doesn’t make it to my iPod.

Dislikes: I hate phones that have bad camera functions just like I hate TV’s that don’t have HD quality.

Sara Lauren Diaz, 23 San Francisco, CA NOVICE USER

PASSION

FOOD

MOVIES

MEDIA

I love to dance and sing. I can honestly dance for any song that I hear. I am not afraid to present myself in the public because I have nothing to be ashamed of. I am the girl who will get down on the floor and get everyone’s attention at the party. That’s right I love parties! I also do a lot of sports. I play vollyball, basketball, and I swim a lot.

I love pizza. I like food that I can eat with my hands. I also eat a lot of salad to keep a good balance on my nutrition. I go to Souplantation all the time. They have really yummy chicken soup. Oh and I love desserts! especially the ones with chocolate.

I love horror movies! I also watch a lot of thriller and sci-fi movies that have crazy characters. I also love Sexy and the City! The women in the movies are hilarious I love them.

I watch the TV often. I like watching dramas like Bones, House, CSI, and The Office. I don’t browse on the web that often, but when I do I’m always on Youtube checking out new shows and music videos.

Dislikes:

I don’t like movies that requires me to think. I don’t want to spend too much time analyzing what the movie is about and how does it relate to the society.

I don’t eat eggplant, onion, and any oily food. I also don’t like steaks, I can never finish eating one.

Dislikes:

BACKGROUND

ATTRIBUTES

WANTS

- female - in a relationship - online editor - lives with boyfriend - loves to party - always looking for events - loves the color red - has passion for art - likes trance music - watches TV often - loves pizza

- she can’t stand boredom - she is interested in what’s going on in her community - she rarely updates her friends about her current life. - she lacks ability to plan events

- she wants to be involved in events that are fairly close to her - she wants to share with her friends what she has been doing lately - she wants to be organized - she wants to be able to plan something fun - she wants to record her life

SCENARIO

NEEDS

BEHAVIORS

Sara got a phone call from her mom asking her how she has been doing lately. She wasn’t able to explain fully without showing her mom some photos or videos... so she tried sending her mom an e-mail with attachments, but the content she wants to include exceeds the limit of the e-mail so she had to send more than one e-mail to her mom. Her mom called back a day later saying that she never received any e-mail. Sara then found out that her mom’s e-mail account doesn’t receive anything bigger than 10MB therefore her e-mails bounced back to her. She then forgot about showing her mom the photos.

- a space to store her recent photos - function that allows her to share her events with her friends

One of Sara’s friends shared an event with her and got her attention. Sara clicks on the link that takes her to the main page of the website. She wants to try out how it works so she signs up for a new account. She immediately creates a new event and quickly writes some brief information about her recent camping trip with her college roommates. She then uploads 10 photos from her laptop and clicks on the ‘share event’ button. Sara enters her mom’s e-mail address. Within an hour, Sara’s mom calls her and tells her she misses camping with her.

Sara Lauren Diaz, 23 San Francisco, CA NOVICE USER

FEATURES - create a new event - upload photos and videos - a share button

Sara Lauren Diaz, 23 San Francisco, CA NOVICE USER

SCENARIO Sara got a phone call from her mom asking her how she has been doing lately. She wasn’t able to explain fully without showing her mom some photos or videos... so she tried sending her mom an e-mail with attachments, but the content she wants to include exceeds the limit of the e-mail so she had to send more than one e-mail to her mom. Her mom called back a day later saying that she never received any e-mail. Sara then found out that her mom’s e-mail account doesn’t receive anything bigger than 10MB therefore her e-mails bounced back to her. She then forgot about showing her mom the photos.

HOME PAGE

USER INFO

PROFILE PAGE

NEW EVENT

name: age: location: e-mail:

now collection add new network browse

event name: location: date:

click on sign up

fills out the form and clicks on the [submit] button

clicks on the [add new] button

creates a new event by specifying the location and date

SHARING

SELECT PHOTO

EVENT CONTENT

SHARE e-mail address add recipient

new window appears with photos stored on user’s computer

description upload photo upload video invite

UPLOAD clicks on the [share] button and enters mom’s e-mail

Within an hour, Sara’s mom calls her and tells her she misses camping with her.

selects 10 photos and clicks on [upload]

clicks on the [upload photo] button

Sara Lauren Diaz, 23 San Francisco, CA NOVICE USER

CAREER

MUSIC

TECHNOLOGY

I studied Communication at UCLA and work for Google now as the executive for communications. I am very confident to talk to people from all over the world. I like to make new friends. I am also a free lance photographer who travels often.

I like hip pop music. I do prefer Korean pop music over others because I am always attracted and inspired by their beats and creative music videos.

I love Apple products, I personally have a MacBook Pro, and iPhone 4S, and an IPad2. I do use all of them daily for work.

Dislikes: I’m not too interested in the mainstream pop music. I also can’t stand music that has shady raps.

Dislikes: I hate PC’s. I still can’t stand their interface. I prefer the cleaner and simpler look.

Christophe Wu, 25 Brooklyn, NY INTERMEDIATE USER

PASSION

FOOD

MOVIES

MEDIA

I have to say photography is my passion because I just love taking pictures wherever I go. I tend to take shots of people, especially random people on the streets. I like capturing emotions and personalities. I also like running to keep myself fit.

I like Japanese food. I find myself in one of the sushi bars in New York very often. I also like to make ribeye steak myself because I take meat very seriously.

I love action movies. I enjoy watching movies with lots of fight scenes, exotic cars, and sexy women of course. Some of my favorites are Mission Impossible, The Avengers, Fast and Furious, and Die Hard.

I watch CNN and read the newspaper everyday to keep myself updated with what’s going on around the world. I also listen to the radio on the way to work.

Dislikes: I don’t like fried food. I don’t go to fast food restaurants unless I’m in a hurry and need to grab something quick. I also don’t really like Mexican food because sometimes they smell really bad.

Dislikes: I don’t like to watch movies with bad story, even if they have great special effects I still think a good story is a must for every movie. I don’t like sad movies, I hate seeing people cry for a movie, it’s silly.

Christophe Wu, 25 Brooklyn, NY

BACKGROUND

ATTRIBUTES

WANTS

- male - single - executive for communications - also do free lance photography - likes to meet people - likes hip pop music - has good taste in fashion - travels very often - obsessed with Apple products - loves action movies - attracted to exotic cars - favors Japanese cuisine - updates himself with news - reads the newspaper - likes to keep his territory clean

- he is concerned about current events happening around the world - he is interested to meet people who share the same passion - he sees himself working well in a simple space - he learns from his past experiences - he doesn’t go to noisy restaurants

- he wants to connect with inviduals who has good taste in fashion - he wants to join random photoshoots to build up his portfolio - he likes to give advices to people and also collect opinions from others - he wants to organize his collection - he wants to be able to grab interesting elements from the past

SCENARIO

NEEDS

BEHAVIORS

Christophe has been working overtime for the last 3 months. His boss wants him to take a short break and come back with some creative ideas for the upcoming projects. Christophe logs into his existing account and finds a photoshoot in Soho, New York on a fashion show. He joins the event and follows updates from the event.

- an event that fits his schedule - receive updates from the event - upload photos and videos while he is at the event - export his experience and share it with his boss at the meeting

Christophe decides to join the fashion show in Soho 2 days later. He brings his Canon 5D mark II camera with him to the event along with his iPhone. He takes several shots of the models and immediately uploads to the new event named ‘Soho Fashion Show 06.11.12’. He also uploads a 30 sec video of the opening ceremony of the show. Christophe uploads 20 more photos from his camera when he gets home. He then writes some short comments on his photos regarding the designer’s work. He exports the event and creates a slideshow to present at work.

INTERMEDIATE USER

FEATURES - finds events related to his interest - function that allows him to upload content (photo and video) to an on going event instantly - export event and share

HOME PAGE

USER INFO

PROFILE PAGE

BROWSE

username: password:

now collection add new network browse

zipcode: interest:

Christophe Wu, 25 Brooklyn, NY INTERMEDIATE USER

SCENARIO Christophe has been working overtime for the last 3 months. His boss wants him to take a short break and come back with some creative ideas for the upcoming projects. Christophe logs into his existing account and finds a photoshoot in Soho, New York on a fashion show. He joins the event and follows updates from the event.

FIND EVENTS

click on login

enters username and password then click on login

clicks on the [browse] botton to look for events in his area

filters the events by filling in his zipcode and interest.

ADD VIDEO

PARTICIPATE

EVENT INFO

SELECT EVENT

from camera record now

add photo add video add comment

event info view photos view videos join event ask for updates

Brooklyn parade Hudson river night Soho fashion show City maze Broadway tour

clicks on the [record now] to record the opening ceremony

clicks on the [add video] button

clicks on [join event]

clicks on the event ‘Soho fashion show’

ADD COMMENT

EXPORT EVENT

writes a short comment then click on [done] button

click on [export]

UPLOAD

Christophe uploads 20 more photos from his camera when he gets home. He then writes some short comments on his photos regarding the designer’s work. He exports the event and creates a slideshow to present at work.

Christophe Wu, 25 Brooklyn, NY INTERMEDIATE USER

CAREER

MUSIC

TECHNOLOGY

I studied Design Media Arts at UCLA and graduated 2 years ago. I’m now working at Ignition Interactive as a developer. I do a lot of programming and web design, but I have a strong passion for video games design since I’m a big time gamer. I work hard, but I also spend time with my girlfriend and my friends during weekend fishing and going to the beach. My goal is to become someone who designs the best selling video games.

I like Muse and some underground bands. I enjoy music orginally made from unknown artists. I also listen to music from foreign countries such as Orange Range from Japan. I often turn on some Daft Punk while I work to boost motivation.

I am always upgrading my phone and my computer sofewares. It’s almost a must for people like me to be on top of the technological trend because I always develop with new softwares. I carry my laptop wherever I go. I simply cannot live without it.

Dislikes:

I don’t like High School Musical. and I don’t like music that sound too happy. Some commercial music are kind of gross, too.

I hate phones that don’t have access to the internet. To me that makes a phone useless.

PASSION

FOOD

MOVIES

MEDIA

Definitely video games. I play all kinds of games not because I’m bored, but I actually learn a lot from them. I have been participating in video game tournaments and creating new video games.

Well since I always work long hours, I normally don’t spend time for meals. I do like burgers and hotdogs. I also like to go to Venice once in a while for the food trucks. Anything fast and delicious should do it. I also like to eat sashimi and sushi when I go fishing. Anything fresh taste good.

I love movies with incredible graphics and special effects. Some of my favorite movies that I think of on the top of my head are Inception, Tron, and Lord of the Rings. I also enjoy random comedies such as Super Bad and Scott Pilgrim vs. the World that make me laugh very hard.

The web is definitely where I update myself with everyday. I also find Facebook to be a good source for news since my friends always share interesting stuff. I still rent DVDs from Netflix and watch movies whenever I have time. I only go to movie theathers for the big blockbuster movies.

Greg Batha, 24 Santa Monica, CA ADVANCED USER

Dislikes: I don’t go to fancy restaurants because I hate waiting 40 min just for a tiny plate of dish. I don’t like microwave food or anyfood that comes from a supermarket.

Dislikes: I can’t stand the romantic films... I will fall asleep everytime I watch those and of course my girlfriend will yell at me, but I just don’t get how people are always convinced by made up stories that don’t make sense. I also don’t like any movie that is too series or too moody.

BACKGROUND

ATTRIBUTES

WANTS

- male - in a relationship - an interactive developer - plays lots of video games - design games - loves hotdogs and burgers - attracted to movies with intense graphics and special effects - doesn’t go to fancy restaurants - watches comedies - always on Facebook - likes to go fishing with friends

- plays the leader role - always inviting friends to his trips - explores new fishing locations - shares ideas for games - makes small movies for his fishing experiences and shares them with his family from overseas - always giving comments on projects and colleague’s works

- he wants to invite friends - share his experience - make collection of his experiences and come up with creative ideas for video games

SCENARIO

NEEDS

BEHAVIORS

Greg is working on a video game for people who enjoys the fishing experience at home. He is gathering ideas on additional levels in the game that helps players learn more about the oceans. He uses his network on the website to assemble a group of people to go on a fishing trip over the weekend. He spends several hours looking through his friends’ past events to help him decide where he wants to go. Two of his friends happen to be free for the weekend as well, so Greg creates a new event for them to join.

- invite friends to his event - search for locations - record his experience

Greg creates a new event named ‘Newport Fishing Trip 06.15 - 06.17’. He invites his friends to join the event so that they can upload content, too. During the fishing trip, Greg and his friend Thomas uploaded 5 videos and 63 photos to the event. His other friend George didn’t upload anything, but helps record details of the trip by adding hilarious comments to some of the photos. Greg shares the event with his phone to one of his graphic designers back at the studio to come up with some creative drawings. Greg goes home and edits the event by getting rid of some of the repetitive photos and one video that’s too short. He goes to work on Monday and designs the new level with his own experience.

Greg Batha, 24 Santa Monica, CA ADVANCED USER

FEATURES - add friends - browse on past events - ability to invite friends - upload videos - create photo album

HOME PAGE

USER INFO

PROFILE PAGE

NEW EVENT

username: password:

now collection add new network browse

event name: location: date:

Greg Batha, 24 Santa Monica, CA ADVANCED USER

SCENARIO Greg is working on a video game for people who enjoys the fishing experience at home. He is gathering ideas on additional levels in the game that helps players learn more about the oceans. He uses his network on the website to assemble a group of people to go on a fishing trip over the weekend. He spends several hours looking through his friendsâ&#x20AC;&#x2122; past events to help him decide where he wants to go. Two of his friends happen to be free for the weekend as well, so Greg creates a new event for them to join.

click on login

enters username and password then click on login

clicks on the [add new] botton to create a new event

creates a new event by specifying the location and date

ADD VIDEO

PARTICIPATE

INVITE

EVENT CONTENT

from camera record now

add photo add video add comment

select friends

description upload photo upload video invite

clicks on the [from camera] to upload videos from phone

clicks on the [add video] button

selects 5 friends and then clicks on [send invitations]

SHARING

LOG OFF AND SAVE

SHARE e-mail address add recipient

click on [log off] event will be saved automatically

UPLOAD

SEND INVITATIONS

clicks on the [invite] button to invite friends to the event

Greg goes home and edits the event by getting rid of some of the repetitive photos and one video thatâ&#x20AC;&#x2122;s too short. He goes to work on Monday and designs the new level with his own experience.

Greg Batha, 24 Santa Monica, CA ADVANCED USER

PAGE

SITEMAP

Sitemap 1.0

splash page

italics indicate features on each page

- tag line - example pages

enter user info

collection

now

+ add new

friendâ&#x20AC;&#x2122;s events

browse

- name, age - location - e-mail

- past events - photo albums - timelines

- the current event - main photo - update

- create new event - enter start date

- see what your friends are doing - comment

- view events around your area

start 1st event

enter date

edit

invite

join

- name of event - location - dates

- search an event - timeframe

- add photo - add video - add comment

- add friends - send updates

- send request - ask for update

past event

+ add photo

+ add video

+ comment

- share to friends - download photos - download video

- from phone - from computer

- on event - on photo - on video

PAGE

wireframes FLOW CHART

TIMELESS WIREFRAME FLOW CHART BACKGROUND IMAGE PLACEHOLDER

PAGE

DESIGN 01

PAGE

DESIGN 02

PAGE

DESIGN 03

PAGE

DESIGN 04

PAGE

final stills

PAGE

stills flow chart

TIMELESS screenshot FLOW CHART

Home page with the most recent event on the top, events around the area and featured events arranged in columns beneath. Recent updates is always on the top right. Drop down navigation stays on the top right as well.

Create a new event by entering event details, set privacy, and upload photos.

All events are stored in a collection in timeline style. User can click on any of the past events to view the content.

Users may upload photos from many different sources such as Facebook, Flickr, Instagram, and Dropbox.

A new event page with photo thumbnails and event info in the white box. and the eventâ&#x20AC;&#x2122;s date on the left side.

Users can always go back to an event to add new media from either the computer or the mobile devices.

Click on the thumbnails to see the large display of the photo.

All event photos are stored in a photo collage. User can view photos from different events all at once and enlarge them as desired.

PAGE

IPAD + IPHONE

SUMMER

TIMELESS