Issuu on Google+

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


TABLE OF CONTENTS

Introduction����������������������������������������������������������������������������������������������������������� 4 Research���������������������������������������������������������������������������������������������������������������� 9 Development������������������������������������������������������������������������������������������������������� 21 User Tasks & Walkthroughs�������������������������������������������������������������������������������� 29 Visual Design������������������������������������������������������������������������������������������������������� 49 Usability Test������������������������������������������������������������������������������������������������������� 59 Conclusion����������������������������������������������������������������������������������������������������������� 67

3 | C hi nato w n Snap shot


INTRODUCTION


ABSTRACT

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 historical 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 present 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.

5 | C hi nato w n Snap shot


UNIQUE POSITIONING STATEMENT

The application provides a historical photo collection of Chinatown in San Francisco that serves as an important connection from present to the past. The objective is to encourage users to explore different historical spaces by immersing themselves 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 represented 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 immigrant 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.

6 | C hi nato w n Snap shot


7 | C hi nato w n Snap shot


STATEMENT OF INTEREST

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 important 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 community that doesn’t want to be changed. Whenever I visit Chinatown, certain images 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 users to compare them with historical photos I have found and organized.

8 | C hi nato w n Snap shot


RESEARCH


COMPETITORS & INSPIRATIONS

San Francisco’s Chinatown http://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 mindboggling 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 human history. Included are dozens of photos, descriptions, maps, opening hours, price ranges, phone numbers and website links.

10 | C hi nato w n Snap shot


COMPETITORS & INSPIRATIONS

Fotopedia Paris http://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

11 | C hi nato w n Snap shot


COMPETITORS & INSPIRATIONS

Museum of London: Streetmuseum http://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.

12 | C hi nato w n Snap shot


COMPETITORS & INSPIRATIONS

Geo Photo Explorer http://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. Recommended 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

13 | C hi nato w n Snap shot


COMPETITORS & INSPIRATIONS

Time Shutter http://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 experience 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.

14 | C hi nato w n Snap shot


15 | C hi nato w n Snap shot


TARGET AUDIENCE

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

16 | C hi nato w n Snap shot


PERSONA 1 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 Name: Jonathan | Age: 30

Background:

Location: Atlanta, GA

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 planning 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-

Occupation: Student

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

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

17 | C hi nato w n Snap shot


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/ Name: Angela | Age: 27

Background:

Location: San Francisco, CA

She has lived in SF for 4 years and passed through Chinatown numerous 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 Chinese 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

Occupation: Student

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

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

18 | C hi nato w n Snap shot


PERSONA 3 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/ Name: Susan | Age: 43

Background:

Location: San Diego, CA

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.

Occupation: History Teacher

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

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.

19 | C hi nato w n Snap shot


SSNIF

Stakeholder (user/customer)

Situation

Need

Feature/ Solution(Potential)

People with passion to know about San Francisco’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 locations

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 location and time related imagery

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-tagged information

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 San Francisco’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 compares 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 related information they want

An easy to access search tool that allows users to input multiple keywords

Users have their own collections of historical photos and want to share 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 composite using their upload images

Visitors to San Francisco’s Chinatown

Chinatown historical photos collectors

20 | C hi nato w n Snap shot


DEVELOPMENT


CONCEPT MAP flicker users

contribute

database my collection

manage consist of

explore

Users

input

Search

through

Photos

is navigated by

Chinatown-SF

represent

Interactive map

include

include

Timeline

Context Content

include

generate

story include

time

builidings

Montage cab be

people streetviews

upload

activities

present

location

past

children vendors

streets

share

flickr

alleys

avenues 22 | C hi nato w n Snap shot


MIND MAP timeline arranged (now to then...) photo albums floated expandible box random montage

past

streets alleys

(compare)

avenues corners ( Dragon Gate, Waverly Place, Portsmouth Square, location St. Mary's Square, (interactive map) Temples and Churches, Unique Architecture...)

wide-size, panarama, large background

present

landmarks

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

photos

title year keywords share upload

descripotion

historical events overveiw intro

my collection user-generate(flickr...) books, magazines Chines historical association Berkley library

timeline

photo thumbnails

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

categories

location builidings

the complete of execution flash javascript php, mysql html5, css3

laptop large screen

year

search

desktop

style

platform

people

iphone

activities

smart phone A Time Travel Exploration through Photos

portability

key events

flexibility GPS database small screen

What’s the interactive way to browse Images content?

function

explore collect interactive map search create montage share upload

Google map customized map historical map check-in & check-out marks rollover preview direction compus

visual

newspaper format

motage

title: Chinatown Times elegant book style historical articles infographic, animation... flip, sliding transition effect

dimension (2D, 3D...) projection ( on walls, photo remap??) grid modular (how many sets...) free flowing overlay ramdomize, organic. order... color: toning and dark, clean, simple, b&w

23 | C hi nato w n Snap shot


INFORMATION ARCHITECTURE

Point of Interests

Walking Tour

Portsmouth Plaza

Chinatown Dragon Gate

Tien Hou Temple

Old Saint Mary's Cathedral

Snapshot

AR Mode

Chinese Baptist Church

Sing Chong and Sing Fat

Sing Chong Bazaar Chinatown Kite Shop

Sing Fat Bazaar

Eastern Bakery

Telephone Exchange

Waverly Place

Stories & photos

Photos buildings street views

Tin How Temple Chinese Historical Society of America Museum

Compare Mode

Stockton Street

Camera

Golden Gate Fortune Cookie Company

Compare

facebook Share

Ten Ren Tea Company buildings

current past

street views people

Old Chinese Telephone Exchange

email wallpaper

Post

Portsmouth Square

activities

24 | C hi nato w n Snap shot


WIREFRAME

Map page ( street filters )

Map page ( point of interests )

Map page ( walking tour )

25 | C hi nato w n Snap shot


WIREFRAME

Location page

Compare page

Snapshot Page

26 | C hi nato w n Snap shot


TECHNICAL SPECIFICATIONS

THE PLATFORM

THE SOFTWARE

Operating System:

Video Demonstration:

• iPad iOS4, IOS5

• After Effect

Storage:

• Illustrator

• 16GB, 32GB, or 64GB

Display: • 9.7-inch (diagonal) LED

• Photoshop

High-Fidelity Online Prototype: • Html5, CSS3, JavaScript

• 1024-by-768-pixel resolution at 132 pixels per inch (ppi) • Fingerprint-resistant oleophobic coating • Support for display of multiple languages and characters simultaneously

Size & Weight : • Height: 9.56 inches (242.8 mm) • Width: 7.47 inches (189.7 mm) • Depth: 0.5 inch (13.4 mm) • Weight: 1.5 pounds (0.68 kg) Wi-Fi model; Wi-Fi + 3G mode

27 | C hi nato w n Snap shot


TIMELINE

28 | C hi nato w n Snap shot


USER TASKS


USER TASK 01

FIND A WALKING TOUR ON MAP

Walking Tour Chinatown Dragon Gate Old Saint Mary's Cathedral Sing Chong and Sing Fat Chinatown Kite Shop Eastern Bakery Waverly Place Tin How Temple Chinese Historical Society of America Museum Stockton Street Golden Gate Fortune Cookie Company Ten Ren Tea Company Old Chinese Telephone Exchange Portsmouth Square

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.

30 | C hi nato w n Snap shot


WALKTHROUGH 01

FIND A WALKING TOUR ON MAP

1. From landing page, tap “start exploration”.

2. A message pops up confirming using current location.

3. A map of chinatown shows up with markers dropping on it.

31 | C hi nato w n Snap shot


WALKTHROUGH 01

FIND A WALKING TOUR ON MAP

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.

32 | C hi nato w n Snap shot


WALKTHROUGH 01

FIND A WALKING TOUR ON MAP

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

33 | C hi nato w n Snap shot


USER TASK 02

EXPLORE POINT OF INTERESTS AND GET DIRECTIONS

Point of Interests

Portsmouth Plaza Tien Hou Temple Chinese Baptist Church

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

Sing Chong Bazaar Sing Fat Bazaar Telephone Exchange

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.

34 | C hi nato w n Snap shot


WALKTHROUGH 02

EXPLORE POINT OF INTERESTS AND GET DIRECTIONS

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 neighborhood by adjusting alpha slider in the left legend box.

35 | C hi nato w n Snap shot


WALKTHROUGH 02

EXPLORE POINT OF INTERESTS AND GET DIRECTIONS

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

4. A “Chinatown Telephone Exchange” window pops up with short description.

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

36 | C hi nato w n Snap shot


USER TASK 03

EXPLORE HISTORICAL LOCATION PHOTOS

Point of Interests

Portsmouth Plaza Tien Hou Temple Chinese Baptist Church

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.

Sing Chong Bazaar Sing Fat Bazaar Telephone Exchange

Stories & photos

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”.

37 | C hi nato w n Snap shot


WALKTHROUGH 03

EXPLORE HISTORICAL LOCATION PHOTOS

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”.

38 | C hi nato w n Snap shot


WALKTHROUGH 03

EXPLORE HISTORICAL LOCATION PHOTOS

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

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

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

39 | C hi nato w n Snap shot


USER TASK 04

COMPARE A LOCATION BOTH PAST AND PRESENT

Point of Interests

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

Portsmouth Plaza Tien Hou Temple

Goals/output:

Chinese Baptist Church Sing Chong Bazaar

Compare a location both past and present.

Sing Fat Bazaar

Inputs/assumptions:

Telephone Exchange

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

Stories & photos

Steps: 1. Tap “Explore Now and Then”.

Compare Mode

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

Compare buildings

current past

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

street views people activities

40 | C hi nato w n Snap shot


WALKTHROUGH 04

COMPARE A LOCATION BOTH PAST AND PRESENT

1. Tap “Explore Now and Then”.

2. A quick tutorial shows at the beginning.

3. The compare page shows in split-screen mode.

41 | C hi nato w n Snap shot


WALKTHROUGH 04

COMPARE A LOCATION BOTH PAST AND PRESENT

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

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

6. Swap current image at bottom right photo carousel, the old photo changes as matchedpair.

42 | C hi nato w n Snap shot


WALKTHROUGH 04

COMPARE A LOCATION BOTH PAST AND PRESENT

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

43 | C hi nato w n Snap shot


USER TASK 05

EXPLORE AR SNAPSHOT MODE & SHARE A SNAPSHOT

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

Snapshot

AR Mode

Goals/output: Upload a photo of Chinatown.

Photos Inputs/assumptions: User is at a historical location in Chinatown with his iPad.

buildings street views

Steps: 1. Tap on “Snapshot” button from top navigation. 2. GPS detects user’s location and generates location results.

Camera

3. Tap one of photo results from locked area. facebook

Share

email wallpaper

Post

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”. 44 | C hi nato w n Snap shot


USER TASK 05

EXPLORE 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.

45 | C hi nato w n Snap shot


USER TASK 05

EXPLORE AR SNAPSHOT MODE & SHARE A 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.

46 | C hi nato w n Snap shot


USER TASK 05

EXPLORE AR SNAPSHOT MODE & SHARE A 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 05

EXPLORE AR SNAPSHOT MODE & SHARE A 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.


VISUAL DESIGN


MOODBOARD 01

50 | C hi nato w n Snap shot


MOODBOARD 02

51 | C hi nato w n Snap shot


LOGO DEVELOPMENT CHINA TOWN SAN

CHINATOWN

CHINA TOWN

FRANCISCO

A Historical Photo Montage

SAN

FRANCISCO

A Historical Photo Montage

CHINATOWN

CHINA SAN

OWN

FRANCISCO

A Historical Photo Montage

CHINA TOWN SAN

FRANCISCO

A Historical Photo Montage

CHINA TOWN SAN

FRANCISCO

A Historical Photo Montage

CHINATOWN SAN

FRANCISCO

A Historical Photo Montage

CHINATOWN SAN

FRANCISCO

A Historical Photo Montage

CHINA TOWN SAN

Chinatown

FRANCISCO

A Historical Photo Montage

52 | C hi nato w n Snap shot


LOGO TYPEFACES 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 1234567890&?

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 1234567890&?

53 | C hi nato w n Snap shot


1ST VISUAL DESIGN

54 | C hi nato w n Snap shot


2ND VISUAL DESIGN

55 | C hi nato w n Snap shot


3RD VISUAL DESIGN

56 | C hi nato w n Snap shot


FINAL DESIGN

Landing page

Map page (Tour)

Map page (POI)

Location page

Compare page

Snapshot page

57 | C hi nato w n Snap shot


58 | C hi nato w n Snap shot


USABILITY TEST


LOW FIDELITY TESTING

(PAPER BASED TEST)

60 | C hi nato w n Snap shot


PILOT TESTING & USER TESTING

(SCREEN BASED TEST)

61 | C hi nato w n Snap shot


PROBLEMS & IMPROVEMENTS

(MAP PAGE - WALKING TOUR)

Problems - 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.

Improvements - 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.

62 | C hi nato w n Snap shot


PROBLEMS & IMPROVEMENTS

(MAP PAGE - POINT OF INTERESTS)

Problems - 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.

Improvements - Change marker styles into photo pins. - Provide toggle button that hides (default) and shows marker labels. - Change the name "locations" into "street filters".

63 | C hi nato w n Snap shot


PROBLEMS & IMPROVEMENTS

(LOCATION PAGE)

Problems - 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.

Improvements - 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.

64 | C hi nato w n Snap shot


PROBLEMS & IMPROVEMENTS

(COMPARE PAGE)

Problems - 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.

Improvements - Quick tutorial shows at beginning for first time user. - User can activate a set of comparison between 2 image carousels. 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

65 | C hi nato w n Snap shot


PROBLEMS & IMPROVEMENTS

(SNAPSHOT PAGE)

Problems - 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 Chinatown.

Improvements - 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.

66 | C hi nato w n Snap shot


CONCLUSION


CONCLUSION

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 historical 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 Chinatown 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 challenges 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.

68 | C hi nato w n Snap shot


BIBLIOGRAPHY OPEN SOURCE • Google Maps JavaScript API V3

HISTORICAL PHOTO RESOURCES Society of California Pioneers

BOOKS

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

• San Francisco’s Chinatown / Judy Yung and the Chinese Historical Society of Americ

Bancroft Library, University of California, Berkeley http://bancroft.berkeley.edu/

• San Francisco : yesterday & today / J. Kingston Pierce

California Historical Society

• The unshakable : Rebirth of S.F. Chinatown in 1906

http://www.californiahistoricalsociety.org/

• The Chinese Americans / William Daley ; Sandra Stotsky general editor.

CHSA collection http://www.chsa.org/

• The Chinese American family album / Dorothy and Thomas Hoobler • San Francisco’s Chinatown / Judy Yung and the Chinese Historical Society of America.

San Francisco Public Library http://sfpl.org/

• Chinese Americans / Michael Martin.

69 | C hi nato w n Snap shot


70 | C hi nato w n Snap shot


Chinatown Snapshot