70
Yi-Hsuan Liang 02762673 Academy of Art University | Web Design and New Media Spring 2012 | Tuesday, May 08, 2012 | 3:45 PM

Chinatown Snapshot

Embed Size (px)

DESCRIPTION

My MFA fianl thesis project book.

Citation preview

Page 1: Chinatown Snapshot

Yi-Hsuan Liang 02762673

Academy of Art University | Web Design and New Media

Spring 2012 | Tuesday, May 08, 2012 | 3:45 PM

Page 2: Chinatown Snapshot
Page 3: Chinatown Snapshot

3 | Chinatown Snapshot

Introduction ����������������������������������������������������������������������������������������������������������� 4

Research ���������������������������������������������������������������������������������������������������������������� 9

Development ������������������������������������������������������������������������������������������������������� 21

User Tasks & Walkthroughs �������������������������������������������������������������������������������� 29

Visual Design ������������������������������������������������������������������������������������������������������� 49

Usability Test ������������������������������������������������������������������������������������������������������� 59

Conclusion ����������������������������������������������������������������������������������������������������������� 67

TABLE OF CONTENTS

Page 4: Chinatown Snapshot

INTRODUCTION

Page 5: Chinatown Snapshot

5 | Chinatown Snapshot

In today’s world, people travel much more than ever before� Some of us are lucky to travel abroad and see the world for ourselves� For many tourists, San Francisco’s Chinatown is one of the must see places� There are many great his-torical sites in Chinatown worth visiting� In my final project, I intend to create an application for iPad that provides an interactive map and guides users to find out more historical stories about their destination� This application is for visitors to get an in depth look into the Chinatown’s history, covering the past to the pres-ent day� To enhance and strengthen user engagement, users can upload their snapshots in Chinatown to different historical locations� With the use of new technologies and new ideas, the application will provides a thoughtful exploration that users can immerse themselves similar to walking through Chinatown in San Francisco� It will not only deliver information, but actually deliver the experience�

ABSTRACT

Page 6: Chinatown Snapshot

6 | Chinatown Snapshot

The application provides a historical photo collection of Chinatown in San Francis-co that serves as an important connection from present to the past� The objective is to encourage users to explore different historical spaces by immersing them-selves in the real-world feeling of this neighborhood� After tapping on a certain location for a virtual walking tour, Chinatown’s history and culture will be repre-sented through photos� Not only showing photos to be communicated through now and then, I will create and expand the atmosphere of Chinatown through the use of contemporary street photos as backgrounds�

The application is also educational by informing tourists about the history of Chinatown in San Francisco� It offers general information about Chinese immi-grant history through timelines� After users browse through some documentary photography, it will be helpful for them to dig deeper and know the key historical events based on related time periods�

UNIQUE POSITIONING STATEMENT

Page 7: Chinatown Snapshot

7 | Chinatown Snapshot

Page 8: Chinatown Snapshot

8 | Chinatown Snapshot

My interest in San Francisco’s Chinatown began with a project I’ve been working on since last semester’s class: Making Ideas Visible� The project was to create a book by developing an idea into a visual story� I had my concept by picturing the story with Chinese immigrants, like how they survived after many struggles and discrimination when they came to America� I quickly found out I grew more interested while doing the research� The research for the class was critically im-portant in helping me begin to understand both the historical events and culture of Chinatown�

San Francisco is home to America’s oldest Chinatown� For myself, a Taiwanese, though also a Chinese, I speak Mandarin and grew up in Taipei, a fast-paced city� However, people in Chinatown speak Cantonese and they live in a small com-munity that doesn’t want to be changed� Whenever I visit Chinatown, certain im-ages pop up in my head; people, places, scenes, colors, and of course dim sum� Although I came to San Francisco only a year ago, Chinatown is the place that I go to the most often� Somehow this neighborhood has a charming personality that draws me back again and again� Meanwhile, I also photograph Chinatown residents and capture their daily life� I can’t help but keep wondering how the Chinese maintains their traditions and attitudes while settling down in this small community� I want to translate my experiences and observations into the photos I take and turn them into a photo essay of this unique community and allow us-ers to compare them with historical photos I have found and organized�

STATEMENT OF INTEREST

Page 9: Chinatown Snapshot

RESEARCH

Page 10: Chinatown Snapshot

10 | Chinatown Snapshot

San Francisco’s Chinatownhttp://itunes.apple.com/us/app/san-franciscos-chinatown/id352884434?mt=8

With its narrow alleys and bustling streets, San Francisco’s Chinatown is an mysterious place to explore� This app guides users to the top dim sum parlors, restaurants, bakeries, souvenir shops, traditional stores, festivals, temples and historic sites�

The app covers Chinatown’s Grant Avenue, lined with colorful shops filled with souvenirs and merchandise, and the more authentic Stockton Street, whose markets are packed with a mind-boggling array of food and imported delicacies� At the center is historic Portsmouth Square where the declaration that of the gold discovery was first made, setting off the largest migration in hu-man history�

Included are dozens of photos, descriptions, maps, opening hours, price ranges, phone numbers and website links�

COMPETITORS & INSPIRATIONS

Page 11: Chinatown Snapshot

11 | Chinatown Snapshot

Fotopedia Parishttp://itunes.apple.com/gb/app/fotopedia-paris/id427149531?mt=8

Fotopedia Paris is packed with visual surprises� With more than 4,000 spectacular photos, it makes it easy to find the way through the beauty of Paris, deepen exploration and quickly find whatever interesting things� Whether it is art, architecture, cafes, castles, fashion, history, shopping or street life… everything is at the fingertips�

Explore Paris with:

- More than 4,000 spectacular photos

- Virtual Trips to the most popular places as well as the unexpected

- Trip Builder to create users own, easy-to-build personalized tours

- Rich Text Descriptions

- Social Media and share your favorites via email, Facebook and Twitter

COMPETITORS & INSPIRATIONS

Page 12: Chinatown Snapshot

12 | Chinatown Snapshot

Museum of London: Streetmuseumhttp://itunes.apple.com/us/app/museum-london-streetmuseum/id369684330?mt=8

Streetmuseum gives a unique perspective of old and new London whether for discovering the capital for the first time or revisiting favourite haunts� Hundreds of images from the Museum of London’s extensive collections showcase both everyday and momentous occasions in London’s history, from the Great Fire of 1666 to the swinging sixties�

Select a destination from our London map or use the GPS to locate an image nearby� Hold the camera up to the present day street scene and see the same London location appears on the screen�

COMPETITORS & INSPIRATIONS

Page 13: Chinatown Snapshot

13 | Chinatown Snapshot

Geo Photo Explorerhttp://itunes.apple.com/us/app/geo-photo-explorer/id375610961?mt=8

Spend hours exploring the world through geo located photos� This application provides an easy way to explore, organize, manage photo galleries and share photos from Google Panoramio and Flick� Recom-mended for all virtual tourists�

SEARCH: Find photos from visible region on map

PHOTOS: Tap, double tap , tap and hold gestures access an additional functionality

HISTORY: Assign multiple photos from history to a photo gallery and convert to favorites

FAVORITE GALLERIES: Present photos from gallery in grid, coverflow or carousel

LOCATION HISTORY: Information about search place location, country flag

SHARE: Share photo by email and tweet photo link

COMPETITORS & INSPIRATIONS

Page 14: Chinatown Snapshot

14 | Chinatown Snapshot

COMPETITORS & INSPIRATIONS

Time Shutterhttp://itunes.apple.com/us/app/time-shutter/id411557094?mt=8

Time Shutter San Francisco is the perfect way to explore San Francisco of 100 years ago and expe-rience it all - Market Street, Chinatown and Golden Gate Park - exactly as they were�

Whether seeing San Francisco for the first time or have seen it every day of the life – Time Shutter lets users see it in an entirely new way� Stand in the exact spot as a photographer 100 years ago, and see exactly what they saw�

Users can use the app’s geo-coded map to guide for a walking tour to many of the best-known and loved locations throughout the city� Then users can hold up their phone to the scene in front of them and by sliding the finger across the screen to see how that building, beach or street looked from that exact spot 100 years ago�

Page 15: Chinatown Snapshot

15 | Chinatown Snapshot

Page 16: Chinatown Snapshot

16 | Chinatown Snapshot

The target audience is people between 20~55 year-old who are interested in the heritage and culture of San Francisco Chinatown� To most visitors, Chinatown is an exotic place of oriental mystery� This app helps them to understand the history and culture of Chinese-American communities� Also, it helps them to understand the different streets and alleys in this neighborhood while they visit San Francisco’s Chinatown� For locals, who have lived near this neighborhood, the application could build an important connection to the past of San Francisco’s Chinatown�

Locals & Visitors

- Encourage locals who live around this neighborhood to connect to the past of San Francisco’s Chinatown

- Guide visitors to San Francisco’s Chinatown to understand different historical streets and alleys running across this neighborhood

Teachers & Students

- Provide resources for Chinese-American history to teachers and scholars

- Offer students an interactive way to learn about Asian cultures

TARGET AUDIENCE

Page 17: Chinatown Snapshot

17 | Chinatown Snapshot

Needs:

• An interactive map

• Easily explore from one spot to another

Goal:

• A sharing function

• Well-informative structure that is categorized properly

Internet information:

• 6 hours a day

• Favorite Website: http://www�backpacker�com

Background:

He is a student studying Psychology, and Culinary Arts� He likes to

travel and photograph old buildings, local people� His adventurous side

always guides him to different places and he enjoys that� He is plan-

ning to visit San Francisco in September this year� He would visit the

interesting parts of the city as well as the oldest Chinatown in America�

He heard there is a Chinatown Alleyway Tour that seems very interest-

ing� He wants to get a real feel of the place by seeing the local life and

interesting historical buildings� He thinks it’s a good way to explore the

place full of history

Name: Jonathan | Age: 30

Location: Atlanta, GA

Occupation: Student

“To me being a backpacker is setting off to a destination and exploring interesting histori-cal experience.”

PERSONA 1

Page 18: Chinatown Snapshot

18 | Chinatown Snapshot

PERSONA 2

Needs:

• An aesthetic and clean layout

• Easy and intuitive navigation

Goal:

• Know more about the history of this neighborhood

• Interactive way for searching for information

Internet information:

• 3 hours a day

• Favorite Website: http://www�thefwa�com/

Background:

She has lived in SF for 4 years and passed through Chinatown numer-

ous times� She heard about the cool, mazy alleyways and historical

spots and she is interested in those narrow streets, Chinese chatter,

quirky bars, and unpronounceable cuisine� It seems like the local Chi-

nese don’t really use English in communicating and she feels really lost

whenever she wants to know more about them� She hopes there is a

better way to understand their story than to read through history books�

Name: Angela | Age: 27

Location: San Francisco, CA

Occupation: Student

“I want to learn about the heritage and culture of San Francisco’s Chinatown.”

Page 19: Chinatown Snapshot

19 | Chinatown Snapshot

Needs:

• Easy to use browsing tool

• Sharing function with her students

Goal:

• Find interesting historical photos and events

• Get the feeling of the place by seeing the pictures that tell the story

Internet information:

• 2 hours a day

• Favorite Website: http://www�history�com/

Background:

Susan has always been a fan of discovering old neighborhoods and

history� She wants to know more about the interesting architecture in

Chinatown, although it is essentially created for the tourists�

Furthermore, she wants to see the temples, stroll through a few of the

Chinese groceries, and visit some great bakeries and tea shops� She

thinks she’ll and a deeper and richer experience if she can do some

background reading before she goes� After all, Chinatown in SF has it’s

claim to fame because of it’s heritage and it’s resilient and hard-working

community�

Name: Susan | Age: 43

Location: San Diego, CA

Occupation: History Teacher

“One immigrant neighbor-hood that’s still flourishing, however, is San Francisco’s Chinatown...”

PERSONA 3

Page 20: Chinatown Snapshot

20 | Chinatown Snapshot

Stakeholder(user/customer) Situation Need Feature/

Solution(Potential)

People with passion toknow about San Francis-co’s Chinatown

Interested in finding out the history of Chinese Americans

An interesting way to explore the past imagery of the neighborhood

An interactive map feature that allows users to explore important historical loca-tions

Want to get a quick peek into the oldest Chinatown

A collection of past imagery of the neighborhood

An interactive photo montage feature showcase a series of locationand time related imagery

Visitors to San Francisco’sChinatown A visit to the famous Chinatown An application to upload and share

the photos

An app on mobile device. Users can upload photos with geo-taggedinformation

With a GPS device while walking in Chinatown

Find interesting historical photos near the location

Geo-tagged historical photos that provide related information from user’s standing point

Locals live nearby SanFrancisco’s Chinatown

Near where they live but are not familiar with the area

An application to build an important connection to the past of the place

A transparency effect feature that com-pares the photos between past and present

Teachers & students The history course about Chinese Americans Enhance teaching and research Images and texts dealing with the Chinese

American experience

Get some quick historical insight of Chinese community

Search to help and relatedinformation they want

An easy to access search tool that allows users to input multiplekeywords

Chinatown historicalphotos collectors

Users have their own collections of historical photos and want toshare them with people who have the same interests

Want to explore the story behind other uploaders’photos Want to identify the location where the photo was taken

Upload your photo feature- Users can contribute to form the compos-ite using their upload images

SSNIF

Page 21: Chinatown Snapshot

DEVELOPMENT

Page 22: Chinatown Snapshot

22 | Chinatown Snapshot

CONCEPT MAP

Users

generate

cab be upload

contribute

manage

consist of

explore

input

through

include include

include

represent

Chinatown-SF

Context

flicker users

Content

my collection

Interactive mapSearch Timeline

activities

share flickr

time

pastpresent

location

story

people

streets

streetviews

builidings

alleys avenues

vendors

children

Photos

database

Montage

include

is navigated by

Page 23: Chinatown Snapshot

23 | Chinatown Snapshot

MIND MAP

A Time Travel Exploration through Photos

exploring

Storyline...What’s the starting point( choose several historical location...)

location

present

titleyearkeywords

past

photos

timeline

search

search

create montage

share

upload

interactive map

explore

collectvisualfunction

platform

location

builidings

year

style

keywords

categories

people

activities

key events

newspaper format

motageprojection ( on walls, photo remap??)

ramdomize, organic. order...color: toning and dark, clean, simple, b&w

dimension (2D, 3D...)

grid modular (how many sets...)free flowingoverlay

title: Chinatown Times

historical articleselegant book style

infographic, animation...flip, sliding transition effect

streets

alleys

avenues

corners

landmarks( Dragon Gate, Waverly Place, Portsmouth Square, St. Mary's Square,Temples and Churches, Unique Architecture...)

(compare)

timeline arranged (now to then...)

photo albums

floatedexpandible box

montagerandom

wide-size, panarama, large background

Google map API (street view & user-generated photos...)

illustrative style

shareupload

descripotion

customized mapGoogle map

historical mapcheck-in & check-out marks

my collectionuser-generate(flickr...)books, magazinesChines historical associationBerkley library

What’s the interactive way to browse Images content?

the complete of execution

photo thumbnails

historical events

overveiw intro

flashjavascript

php, mysql

html5, css3

desktop

laptop

iphone

smart phone

flexibility

portability

GPS database

large screen

small screen

rollover previewdirection compus

(interactive map)

Page 24: Chinatown Snapshot

24 | Chinatown Snapshot

past

current

email

wallpaper

facebook

activities

people

street views

buildings

Sing Chong Bazaar

Chinese Baptist Church

Tien Hou Temple

Portsmouth Plaza

Telephone Exchange

Sing Fat Bazaar

Snapshot

Stories & photos

Camera

Photos

Compare

Post

Walking TourPoint of Interests

Old Saint Mary's Cathedral

Chinatown Dragon Gate

Chinatown Kite Shop

Sing Chong and Sing Fat

Waverly Place

Eastern Bakery

Chinese Historical Society of America Museum

Tin How Temple

Golden Gate Fortune Cookie Company

Stockton Street

Old Chinese Telephone Exchange

Portsmouth Square

Ten Ren Tea Company

street views

buildings

AR Mode

Share

Compare Mode

INFORMATION ARCHITECTURE

Page 25: Chinatown Snapshot

25 | Chinatown Snapshot

WIREFRAME

Map page ( street filters ) Map page ( point of interests ) Map page ( walking tour )

Page 26: Chinatown Snapshot

26 | Chinatown Snapshot

WIREFRAME

Location page Compare page Snapshot Page

Page 27: Chinatown Snapshot

27 | Chinatown Snapshot

THE PLATFORMOperating System:

•iPadiOS4,IOS5

Storage:

•16GB,32GB,or64GB

Display:

•9.7-inch(diagonal)LED

•1024-by-768-pixelresolutionat132pixelsperinch (ppi)

•Fingerprint-resistantoleophobiccoating

•Supportfordisplayofmultiplelanguagesandcharacterssimultaneously

Size & Weight :

•Height:9.56inches(242.8mm)

•Width:7.47inches(189.7mm)

•Depth:0.5inch(13.4mm)

•Weight:1.5pounds(0.68kg)Wi-Fimodel;Wi-Fi+3Gmode

THE SOFTWAREVideo Demonstration:

•AfterEffect

•Illustrator

•Photoshop

High-Fidelity Online Prototype:

•Html5,CSS3,JavaScript

TECHNICAL SPECIFICATIONS

Page 28: Chinatown Snapshot

28 | Chinatown Snapshot

TIMELINE

Page 29: Chinatown Snapshot

USER TASKS

Page 30: Chinatown Snapshot

30 | Chinatown Snapshot

You are a tourist and this is your fist time visiting San Francisco’s Chinatown. You have your iPad with you and you just download the Chinatown Snapshot app. Find out a guided walking tour in this neighborhood and the info of walking tour distance.

Goals/output:

Find a walking tour on the map�

Inputs/assumptions:

Users plan to have a day tour before visiting Chinatown in San Francisco�

Steps:

1� From the map page, tap “Walking Tour” on top navigation�

2� The map displays a walking tour route on the map with a set of number markers�

3� Start tapping from 1st marker and tap “next stop”button in the pop up window to jump to next marker�

4� See “Walking Chinatown” box for additionally information�

USER TASK 01FIND A WALKING TOUR ON MAP

Walking Tour

Old Saint Mary's Cathedral

Chinatown Dragon Gate

Chinatown Kite Shop

Sing Chong and Sing Fat

Waverly Place

Eastern Bakery

Chinese Historical Society of America Museum

Tin How Temple

Golden Gate Fortune Cookie Company

Stockton Street

Old Chinese Telephone Exchange

Portsmouth Square

Ten Ren Tea Company

Page 31: Chinatown Snapshot

31 | Chinatown Snapshot

1� From landing page, tap “start exploration”� 2� A message pops up confirming using cur-rent location�

3� A map of chinatown shows up with mark-ers dropping on it�

WALKTHROUGH 01FIND A WALKING TOUR ON MAP

Page 32: Chinatown Snapshot

32 | Chinatown Snapshot

4� Tap “Walking Tour” at top navigation� The map displays a walking tour route with a set of number markers�

5� Start tour from the 1st marker with green label�

6� Tap “next stop”button in the pop up window� It automatically jumps to the next marker with window popping up�

WALKTHROUGH 01FIND A WALKING TOUR ON MAP

Page 33: Chinatown Snapshot

33 | Chinatown Snapshot

7� The marker with red label is the last stop�

WALKTHROUGH 01FIND A WALKING TOUR ON MAP

Page 34: Chinatown Snapshot

34 | Chinatown Snapshot

You heard there is a pagoda-like building: “Chinatown Telephone Exchange” in Chinatown. You wish to find this place and get the direction from your location to there.

Goals/output:

Explore point of interests and get the direction

Inputs/assumptions:

While walking in Chinatown with his iPad, user wants to go to famous landmarks�

Steps:

1� Tap on “Point of Interests” on top navigation�

2� (a) Find “Chinatown Telephone Exchange” from horizontal carousel� (b) Use the search icon and input the landmark�

3� Tap “Chinatown Telephone Exchange” and window pops up with description about the building�

4� Tap on “get direction” button and the map displays the route from current location to the landmark�

USER TASK 02EXPLORE POINT OF INTERESTS AND GET DIRECTIONS

Sing Chong Bazaar

Chinese Baptist Church

Tien Hou Temple

Portsmouth Plaza

Telephone Exchange

Sing Fat Bazaar

Point of Interests

Page 35: Chinatown Snapshot

35 | Chinatown Snapshot

1� Tap “Point of Interests” at top navigation� A horizontal photo carousel shows up�

2� Tap “show labels” at top right corner to see maker labels�

3� See the exact location of 1885 old map overlaying on current Chinatown neighbor-hood by adjusting alpha slider in the left legend box�

WALKTHROUGH 02EXPLORE POINT OF INTERESTS AND GET DIRECTIONS

Page 36: Chinatown Snapshot

36 | Chinatown Snapshot

4� A “Chinatown Telephone Exchange” win-dow pops up with short description�

5� Tap “get directions” and a route displays from current location to there�

WALKTHROUGH 02EXPLORE POINT OF INTERESTS AND GET DIRECTIONS

3� Find “Chinatown Telephone Exchange” by swiping through horizontal photo carousel or go through marker labels�

Page 37: Chinatown Snapshot

37 | Chinatown Snapshot

Now you are on the famous tourist street: “Grant Street”. Locate the street on the map and find out information about “Sing Chong Bazaar” on Grant Street.

Goals/output:

Locate a specific street and explore historical location on it�

Inputs/assumptions:

User wants to explore historical locations on a specific street�

Steps:

1� Tap through markers on grant Street and find “Sing Chong Bazaar” marker on the street�

2� Tap “more” button to get information of “Sing Chong Bazaar”�

USER TASK 03EXPLORE HISTORICAL LOCATION PHOTOS

Sing Chong Bazaar

Chinese Baptist Church

Tien Hou Temple

Portsmouth Plaza

Telephone Exchange

Sing Fat Bazaar

Stories & photos

Point of Interests

Page 38: Chinatown Snapshot

38 | Chinatown Snapshot

1� Find “Tien Hou Temple” on map� 2� Tap “more” in “Tien Hou Temple” popup window�

3� See story and photos about “Tien Hou Temple”�

WALKTHROUGH 03EXPLORE HISTORICAL LOCATION PHOTOS

Page 39: Chinatown Snapshot

39 | Chinatown Snapshot

4� Locate another place “Sing Chong Bazzar” on map

5� See story and photos about “Sing Chong Bazzar”�

WALKTHROUGH 03EXPLORE HISTORICAL LOCATION PHOTOS

6� The slideshow plays photos about the place through different years

Page 40: Chinatown Snapshot

40 | Chinatown Snapshot

Explore historical photos of “Sing Chong Bazaar” and compare its past and present.

Goals/output:

Compare a location both past and present�

Inputs/assumptions:

Users are interested in comparing historical looks with its current look�

Steps:

1� Tap “Explore Now and Then”�

2�The divider in the center splits the screen into past and present view�

3� There are 2 sets of thumbnails carousel on the bottom� Tap one thumbnail to swap different image for comparing�

USER TASK 04COMPARE A LOCATION BOTH PAST AND PRESENT

past

current

activities

people

street views

buildings

Sing Chong Bazaar

Chinese Baptist Church

Tien Hou Temple

Portsmouth Plaza

Telephone Exchange

Sing Fat Bazaar

Stories & photos

Compare

Point of Interests

Compare Mode

Page 41: Chinatown Snapshot

41 | Chinatown Snapshot

1� Tap “Explore Now and Then”� 2� A quick tutorial shows at the beginning� 3� The compare page shows in split-screen mode�

WALKTHROUGH 04COMPARE A LOCATION BOTH PAST AND PRESENT

Page 42: Chinatown Snapshot

42 | Chinatown Snapshot

5� Tap “current” to view full-size of current photo�

6� Swap current image at bottom right photo carousel, the old photo changes as matched-pair�

WALKTHROUGH 04COMPARE A LOCATION BOTH PAST AND PRESENT

4� Tap “past” to view full-size of old photo�

Page 43: Chinatown Snapshot

43 | Chinatown Snapshot

7� Swap old image at bottom left photo carousel, the current photo automatically changes as matched-pair�

WALKTHROUGH 04COMPARE A LOCATION BOTH PAST AND PRESENT

Page 44: Chinatown Snapshot

44 | Chinatown Snapshot

You are in front of a famous building “Sing Chong Ba-zaar”. Take a snapshot of this architecture using this app and post it.

Goals/output:

Upload a photo of Chinatown�

Inputs/assumptions:

User is at a historical location in Chinatown with his iPad�

Steps:

1� Tap on “Snapshot” button from top navigation�

2� GPS detects user’s location and generates location results�

3� Tap one of photo results from locked area�

4� Swipe through old photo slideshows�

5� Tap “camera” button at the bottom�

6� After capturing, login in with facebook account�

7� Fill out all fields in the box�

8� Tap “upload” button

9� User see the message of “successfully upload your snapshot”�

USER TASK 05EXPLORE AR SNAPSHOT MODE & SHARE A SNAPSHOT

email

wallpaper

facebook

Snapshot

Camera

Photos

Post

street views

buildings

AR Mode

Share

Page 45: Chinatown Snapshot

45 | Chinatown Snapshot

USER TASK 05EXPLORE AR SNAPSHOT MODE & SHARE A SNAPSHOT

1� Tap “snapshot” at top navigation� The camera mode fires up with loading alert�

2� Tap one of the photo thumbnails in the locked area�

3� See old photo of “Sing Chong Bazarr“� Swipe left or right to view next or previous old photo of the same building�

Page 46: Chinatown Snapshot

46 | Chinatown Snapshot

4� Tap camera icon to fire capture mode� 5� See the old image and current camera scene overlapping each other�

6� Reveal more of the old image overlaying on the camera scene by increasing alpha value�

USER TASK 05EXPLORE AR SNAPSHOT MODE & SHARE A SNAPSHOT

Page 47: Chinatown Snapshot

7� Reveal more of the camera scene by reducing alpha value� Tap camera button to capture the scene�

8� Preview the snapshot� 9� Share the snapshot by facebook, email, or save as wallpaper�

USER TASK 05EXPLORE AR SNAPSHOT MODE & SHARE A SNAPSHOT

Page 48: Chinatown Snapshot

10� Login in with Facebook account� 11� Fill out information of the snapshot and upload�

12� After uploading, the alert confirms user has successfully upload the snapshot�

USER TASK 05EXPLORE AR SNAPSHOT MODE & SHARE A SNAPSHOT

Page 49: Chinatown Snapshot

VISUAL DESIGN

Page 50: Chinatown Snapshot

50 | Chinatown Snapshot

MOODBOARD 01

Page 51: Chinatown Snapshot

51 | Chinatown Snapshot

MOODBOARD 02

Page 52: Chinatown Snapshot

52 | Chinatown Snapshot

LOGO DEVELOPMENT

CHINATOWNS A N F R A N C I S C OA H i s t o r i c a l P h o t o M o n t a g e

CHINATOWN

S A N F R A N C I S C OA H i s t o r i c a l P h o t o M o n t a g e

CHINATOWN

CHINATOWN

S A N F R A N C I S C OA H i s t o r i c a l P h o t o M o n t a g e

S A N F R A N C I S C O

A Histor ical Photo Montage

CHINATOWN

S A N F R A N C I S C O

A Histor ical Photo Montage

CHINATOWN

CHINATOWN

S A N F R A N C I S C OA H i s t o r i c a l P h o t o M o n t a g e

S A N F R A N C I S C OA H i s t o r i c a l P h o t o M o n t a g e

CHINATOWN

CHINATOWNS A N F R A N C I S C OA H i s t o r i c a l P h o t o M o n t a g e

CHINA OWN

Chinatown

Page 53: Chinatown Snapshot

53 | Chinatown Snapshot

Trajan Pro Regular

A B C D E F G H I J K LMN O P Q R S T U VWX Y Z

a b c d e f g h i j k lmn o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 & ?

Trajan Pro Bold

A B C D E F G H I J K LMN O P Q R S T U VWX Y Z

a b c d e f g h i j k lmn o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0 & ?

LOGO TYPEFACES

Page 54: Chinatown Snapshot

54 | Chinatown Snapshot

1ST VISUAL DESIGN

Page 55: Chinatown Snapshot

55 | Chinatown Snapshot

2ND VISUAL DESIGN

Page 56: Chinatown Snapshot

56 | Chinatown Snapshot

3RD VISUAL DESIGN

Page 57: Chinatown Snapshot

57 | Chinatown Snapshot

FINAL DESIGN

Landing page

Location page

Map page (Tour)

Compare page

Map page (POI)

Snapshot page

Page 58: Chinatown Snapshot

58 | Chinatown Snapshot

Page 59: Chinatown Snapshot

USABILITY TEST

Page 60: Chinatown Snapshot

60 | Chinatown Snapshot

LOW FIDELITY TESTING(PAPER BASED TEST)

Page 61: Chinatown Snapshot

61 | Chinatown Snapshot

PILOT TESTING & USER TESTING(SCREEN BASED TEST)

Page 62: Chinatown Snapshot

62 | Chinatown Snapshot

PROBLEMS & IMPROVEMENTS(MAP PAGE - WALKING TOUR)

- User need photos in information pop up window.- The route color is not obvious.- Weird floating walking info box.- Not clear where to start walking tour.- Not clear on how to get Chinatown.

Problems

- Add photo preview in info window.

- Change route color.

- Change walking tour info box as fixed position.

- Put labels on start point and end point in different colors.

- Provide legends of transportation that matched the icons on

map.

Improvements

Page 63: Chinatown Snapshot

63 | Chinatown Snapshot

PROBLEMS & IMPROVEMENTS(MAP PAGE - POINT OF INTERESTS)

- Too many marker styles that user doesn't know what they means.

- Not easy to find a specific location.

- Not clear what is the difference between "locations" and "point of interests" on top sub-navigation.

Problems

- Change marker styles into photo pins.

- Provide toggle button that hides (default) and shows marker labels.

- Change the name "locations" into "street filters".

Improvements

Page 64: Chinatown Snapshot

64 | Chinatown Snapshot

PROBLEMS & IMPROVEMENTS(LOCATION PAGE)

- After finding interested location on the map, user need to load an entirely new page just to access the location photo and story.

- User has to tap through each photo thumbnail to preview the image.

Problems

- Using a modal window that displays location photo and story instead of loading a new page.

- The slideshow plays the images chronologically when viewing the location story.

Improvements

Page 65: Chinatown Snapshot

65 | Chinatown Snapshot

- How the comparing work is not clear.

- Not clear which image set has been activated.

- User expect to quick compare image between then and now.

Problems

- Quick tutorial shows at beginning for first time user.

- User can activate a set of comparison between 2 image carou-sels. Whether which one has been activated, the other side should swap image automatically and highlight the matched one in carousel.

- Add buttons for comparing photos in full size

Improvements

PROBLEMS & IMPROVEMENTS(COMPARE PAGE)

Page 66: Chinatown Snapshot

66 | Chinatown Snapshot

PROBLEMS & IMPROVEMENTS(SNAPSHOT PAGE)

- Not easy to access the capture button at the center top.

- Not clear about snapshot AR mode has been activated or how to use the AR snapshot mode for first time user.

- User expect to see some indication of where they are at China-town.

Problems

- Put the capture button at the bottom.

- Show camera shutter open effect at the beginning.

- Displays number of results that has found in his location.

Improvements

Page 67: Chinatown Snapshot

CONCLUSION

Page 68: Chinatown Snapshot

68 | Chinatown Snapshot

The main point of the Chinatown Snapshot project is to create a unique way to see and compare the historical neighborhood� For me, it has been a real journey of discovery “now and then” of Chinatown� The iPad application provides histori-cal photo based on location that serves as an important connection from past to the present� I want to encourage users to explore different historical spaces by immersing themselves in the real-world feeling of this neighborhood� The China-town Snapshot project also supports augmented reality feature� While walking in Chinatown, users hold up their iPad to the scene and use it as a window into the past of exact spot 100 years ago and switch into current time results� My chal-lenges for this project is to reshoot the same scene from the same perspective� I reshot six well-known locations and the process was really amazing� I’m so excited how much this neighborhood has changed in the last hundred years�

CONCLUSION

Page 69: Chinatown Snapshot

69 | Chinatown Snapshot

BIBLIOGRAPHY

OPEN SOURCE

•GoogleMapsJavaScriptAPIV3

BOOKS

•SanFrancisco’sChinatown/JudyYungandtheChi-nese Historical Society of Americ

•SanFrancisco:yesterday&today/J.KingstonPierce

•Theunshakable:RebirthofS.F.Chinatownin1906

•TheChineseAmericans/WilliamDaley;SandraStotsky general editor�

•TheChineseAmericanfamilyalbum/DorothyandThomas Hoobler

•SanFrancisco’sChinatown/JudyYungandtheChi-nese Historical Society of America�

•ChineseAmericans/MichaelMartin.

HISTORICAL PHOTO RESOURCES

Society of California Pioneers

http://www�californiapioneers�org/index�html

Bancroft Library, University of California, Berkeley

http://bancroft�berkeley�edu/

California Historical Society

http://www�californiahistoricalsociety�org/

CHSA collection

http://www�chsa�org/

San Francisco Public Library

http://sfpl�org/

Page 70: Chinatown Snapshot

70 | Chinatown Snapshot