pocket changsha-book

Introduction 1

Zena Wang

Introduction 3

TABLE OF CONTENT INTRODUCTION

03 Autobiography04 Resume

OVERVIEW

11 Elevator Pitch12 Abstract13 Statement of Interest

PROOF OF CONCEPT

16 Task 0118 Task 0220 Task 03

STRATEGIC PROCESS

27 Positioning Statement28 Competitive Analysis34 Matrix 35 Influence

VISUAL PROCESS

60 Visual Inspiration61 Moodboard62 Logo Design67 Character Design

TECHNICAL PROCESS

78 Technology Use79 Technical Experiments

CONCLUSION

86 Project links88 Bibliography89 Portfolio

07

08

03

04

05

06

01

02

UX PROCESS

38 Target Audience39 Personas42 Exploring44 Information Architecture45 Task Flow47 User Testing Process

Welcome to Changsha City

Pocket Changsha App / Thesis Book

Introduction 4

INTRODUCTION

A Short introduction about who I am and how I became involved in Web Design & New Media department.Include my educational, personal experiences, and career goals.

AutobiographyResume

01

Zena WangPocket Changsha App / Thesis Book

Introduction 6 Introduction 7

I grew up in the main city of Hunan, China. As the majority of my generation in China, I am the only child in my family. I am very independent and organized in my life. My major was Graphic Design in my undergraduate school, Hunan Normal University in China. Additionally, I got an opportunity to study abroad for one year in Maryland in the United States during my third year of school. This was an amazing experience for me because I traveled to almost all the famous cities across the whole US. I experienced American history and culture. After one year in Maryland I went back to China and received my Bachelor’s Degree in Graphic Design. Now, I am working on finishing up my Masters in web design and new media.

I chose design as my future career not only because I had an affinity for art and sensitivity for new things but also I was influenced by my family. When I

was a child I studied drawing under the direction of my grandfather, who was a calligrapher and artist. Because of my grandfather, I started to have interests in traditional Chinese culture and painting. He guided me into the art world. Also, my parents affected me by reading books and watching movies at home. My family provided a healthy art atmosphere during my childhood. Because of this my family supports me in becoming a designer and making art my career. In the future, I hope I can be a user-experience designer because I can realize user’s needs. I want to make my designs and products interactive.

AUTOBIOGRAPHY RESUME

WORK EXPERIENCE

ZINUO WANGUX/UI Designer

SKILLS

EDUCATION

AWARDS

BannerShop, San Francisco, CA, Present Freelance designer for advertising & printing

Hunan Province Art Publishing Company, Hunan, China 2012 Designer & Editor • Designed and edited books • Researched and collected information about artists in the book.

MCA Company Hunan Branch, China 2010-2011Assistant & Designer • Designed poster and business card for the company • Documented business activities using photo and video

Frosburg State University Frosburg, MD 2011Gallery Administrator • Art work arrangement • Maintained the gallery

Mac/PCPhotoshopIllustratorInDesignDreameaver

Edge AnimateHTML/CSSjQuery UIAfter EffectsBridge

DrawingSketchingPhotographyBranding

Academy of Art University, San Francisco, CA Web and New Media Design(MFA) Expected Graduation: 2015

Hunan Normal University, Hunan, ChinaGraphic Design, Bachelor of Fine Arts: 2012

Frosburg State University, Frosburg, MD Graphic Design, Exchange Student, 2010-2011

My artwork has been published in Xiaoxiang Magazine. Hunan, China 2014

The “Best of design” award for 2013 Public Welfare Design Competition Hunan, China 2013

Invited to attend “SFU Students show at Frasburg State University” and designed poster for the show MD,USA 2011

San Francisco, CA 94121 415-527-9576 [email protected] Linkdin: Zena wang Portfolio: www.behance.net/zinnor9003ebWeb: zenawang.com/Zenawang01.3/index.html


The core cencept, problem and solution of Pocket Changsha; A brief summary that encapsulates the essence of my project by communicating the audience and benefits, Why it’s important,unique and worth the effort.

Elevator PitchAbstractStatement of Interest

OVERVIEW02


Overview 11

ELEVATOR PITCH

Pocket Changsha is an application that helps English users to experience local Chagsha city (Hunan, China) culture and plan their trip to Changsha.

It offers an illustrated map and draggable clock as the main navigation tool that provides a visual way to explore the city with different times. More than a travel app, Pocket Changsha simplifies the landmarks and local dialect to teach users the current local culture in an interactive way. Also, this app could be a name card for Changsha and attract more tourists to visit Changsha City.

Do you have traveling experience to a foreign country or unfamiliar city? Do you like to experience different cultures and accept new things?

10Overview



THESIS ABSTRACT

Changsha is the capital city of Hunan Province in south-central China. The recorded history of the area can be traced back 3,000 years. Although not as ancient a capital city as Beijing, Nanjing or Xian, Changsha also has rich historical heritages including old wall remains, tomb sites, religious temples and buildings. Also, here is the hometown of a great man in Chinese resent history -- Chairman Mao Zedong. The city experienced several expansions from the past until nowadays. It has developed into the political, economic and cultural center of Hunan Province. Today, Changsha is not only an ancient historical city but also a modern entertaining city in China. Most of the entertainment houses in the city present dynamic and entertaining performances featuring a blend of the traditional essence and the modern flare.

With the development of travel industry in Changsha, there are thousands of tourists come to visit this city every year. Including increasing

number of foreigners around the world. However, the current travel tools only focus on the Chinese users instead of English-speakers which could cause lots of inconveniences to foreign visitors. In China, you may not be allowed to use such as Facebook, Yelp or Twitter apps to get information or reviews. The current popular travel apps in China only have Chinese versions for users. Changsha is not an international city, so most of public signs and official descriptions of landmarks are written by Chinese. Also, the local people in Changsha like to speak local dialect rather than Mandarin. Instead of using apps to research travel information about Changsha, you can also search online before you go there but i t might spent lot of your time. All above situations lead to more difficulties to foreign visitors.

Pocket Changsha provides an easy, quick, and fun interactive way to help users to experience the unique Changsha culture whenever they are.

STATEMENT OF INTEREST

“Better to see something once than to hear about it a thousand times.” --- Asian Proverb

Twenty-three years ago, I was born in a small city called Changsha, in Hunan, China. This city is not only my hometown but also home to my invaluable childhood memories. My family, and my close friends live there and grew up there as well. I am considered a local person in Changsha and I know everything about this city, so much that I know where I can get good local food, where I can find fun and interesting places. In my mind, Changsha is a beautiful, entertaining, and special city. Also, it has unique culture and life style.

“The first step towards getting somewhere is to decide that you are not going to stay where you are.”

When I was a kid, I always heard that America is a great place for dreamers to achieve their creative ideas. It is an international country, which contains different cultures around the world. After I graduated from the college in China, I decided to go to the United States to see the real America because I remembered a proverb from China. It

sais “Better to see something once than to hear about it a thousand times.” I did it! Now I have been in U.S about three years, I like my current life here and I appreciate that I made this decision to come to the US. I met a lot of friends from different countries and heard about different cultures from my friends. Meanwhile, I ‘d like to introduce my hometown and the unique culture and life style there. However, it’s hard to explain and describe my hometown and what the city looks like without any visual demonstration. I really miss my hometown and my family sometimes, I miss the spicy food in Changsha, I miss my close friends in Changsha. So I was thinking why not create an app to introduce my lovely hometown to my friends in a visual way and to let more people know about this special city in China?

殿宫火



Proof of concept03

A step-by-step high fidelity storyboard for three distinct representive use-case-scenarios. (with clearly title, description and interactive hints)

Task 01Task 02Task 03


Proof of Concepet 16 Proof of Concepet 17

TASK 1

Open the App

Drag to 18:00

Sunset view/ Closed

Drag to 19:00

Night view

Drag the little bar on clock

USER TASK 01

03 Drag the little bar on the clock to 18:00 -- The map shows different city views with animations. As landmarks close they will become darker than available landmarks.

04 Drag the little bar on the clock to 19:00 -- The map shows different city views with animations.

01 Open the app -- Map 02 Tap the buildings on the map -- Popout window shows the basic info of each landmark



USER TASK 02

TASK 2

Open the App

Tap “Fire Palce”

Get popout windows

Go to night view

Tap”Go”button

Enter the building

Background Intro

Enter the door

01 Drag the little bar on the clock to 19:00 and Tap the landmark highlighted above . Tap the “Go” button.

02 Enter the selected landmark, a scroll will come out and spread smoothly with animation.

03 Read the description on the scroll, tap the scroll or background to close it.

05 Enter the building with more animations

04 Zoom into the courtyard with automatic animations

06 Text comes out. Tap the area indicated by arrows



USER TASK 03

TASK 3

Tap the dishes

Tap the sound icon

Listen local dialect

Get the name

Drag the food on table

Check

Back to Map01 Waitresses come out with food 02 Tap the food to learn the name of it

Tap the voice button to hear the local dialect

03 Tap the food and get the name of it Tap the voice button to hear local dialect

05 Waitresses serve new dishes after drag and drop Play with the name tag or voice button. Tap the “check” to finish task.

04 Drag the food on the table to fit the shadow area

06 Two options: Back to map or Start over



USER TASK 04

TASK 4

General Info of local culture

Click one of the item

background & Knowledge

Close the page

01 Tap the “info”icon on the left corner 02 General Info Page pops out Tap one of the items on the page

03 The description of the item slides out 04 Tap the close button to go back to the map



STRATEGIC PROCESS04

Unique positioning statement; Key Research that includ core competitors, inspirational projects analysis. Competitors’ matrix chart illustrating relevant features of competing projects.

Positioning StatementCompetitive AnalysisInfluenceMatrix


Strategic Process 26 Strategic Process 27

POSITIONING STATEMENT

Pocket Changsha is an interactive application to help users to understand and experience local culture in Changsha. It was designed for attracting more people to know about Changsha and plan to visit this beautiful city. Pocket Changsha simplifies famous landmarks in illustrated map with interactive animations that gives users an easy way to explore interesting places in Changsha. Users can also get into each landmark to get an interactive experience and learn more information about this place.



COMPATITIVE ANALYSIS

Introduction

Recce is a fast, beautiful, and fun way to explore San Francisco and everything that is going on in your immediate environment. From great coffee shops and hip bars, to cool art galleries and theatres, Recce’s unique approach makes discovering and exploring the city fun and engaging.

Functionality & features

An interactive and 3D way to discover the most popular and vibrant parts of San Francisco.

Built-in GPS and Compass functionality to quickly locate yourself, and discover the most interesting things in your immediate surroundings.

Available both on-line and off-line with rich and relevant information.

User Requirements

Users that access this app are probably travelers who are already in San Francisco because the main function in this app is to track user’s current location and help them explore certain places on the 3D map.

Strengths

Cute and nice interactive illustrationed 3D mapFast and quick GPS tracking system for users to check their current locationUsers can check nearby famous landmarks, coffee shops, bars, etc.

Weaknesses

Navigation system is not interactive and hard to click

Users are not allowed enter the buildings to explore more info about the landmark

Relevance

This app is relevant to my project because I am using illustrated map to express the city and help users to explore the city by themselves. My project tends to focus on helping users to experience an unfamiliar culture instead of a traveling tool to track their locations and provide exact locations and shops. In summary, Recce is a great example of how to visualize a city and how to help users explore the city by themselves.

COMPATITIVE ANALYSIS

Introduction

City Master is an app for helping users to explore interesting places in Guilin, China. It provides an illustrated map and basic information of the city, such as food, landmarks, and a to-do list.


Provides the famous landmarks and basic info on the illustrated mapInteractive animation Helps users to make a trip plan to GuilinPoints out useful Info & Tips for visitors

User Requirements

City Master App is suitable for either visitors who want to visit Guilin or local residents who live there. However, all the content in this app is in Chinese and it is unavailable for foreign visitors.

Strengths

Nice illustrations and visual designInformation of landmarks, food, and special souvenirs are very helpful

Weaknesses

UI design doesn’t match the style of illustrated mapUsers only get the basic info about landmarks without interactionOnly has Chinese version

Relevance

Even though City Master helps users to visit Guilin instead of Changsha, it inspires me to consider how to provide the most important and useful info to users in an easy way.

Recce – San Francisco City Master



Introduction

Airpano Travel Book is a collection of unique spherical photo panoramas of the most amazing places in the world with a bird’s eye view. The aerial panorama technology allows viewers to soar in the sky above Niagara Falls, Taj Mahal, Las Vegas, etc.


360o photo panoramas allow viewers to rotate images, change the field of view, and zoom in on a particular detail.

User Requirements

The target of Airpano is English speaking users, both of visitors or local residents.

Strengths

Amazing city views with high quality 360o real photos

User-friendly interactions

Well designed interface and navigation system

GPS map function

Weaknesses

Only provides images and little info

Introduction

Changsha strategy is the current travel app for Changsha. It allows users to find information and photos about popular landmarks and restaurants in Changsha. Also, users can see visitor’s reviews and their traveling plans in the app.


Specific categories include landmarks, food, public transition, hotel, etc.Images for each landmarkGPS mapUser’s reviews and recommendations

User Requirements:

Chinese visitors and local residents

Strengths

Includes particular travel guidance about Changsha

Weaknesses

Outdated UI designNavigation system is hard to useNo interaction user experience Only Chinese content, unavailable for foreign users.

Relevance

The main reason this app is relevant to my project is because it is a city guide for Changsha. Same as the goal of my project, the idea is to let more visitors know about this city and come to visit here. However, users can’t notice the real Changsha and have fun experiences through this app. I think there are more possibilities to express Changsha culture in a fun way.

COMPATITIVE ANALYSIS COMPATITIVE ANALYSISAirPano Travel Book Changsha Strategy



CONCEPT INSPIRATION CONCEPT INSPIRATION

Introduction

This interactive application is to help users to discover the beauty of nature in Chinese art and the mystery of ancient Chinese mythology through this application’s collections.

Exquisite original illustrations and hand-drawn map of Forbidden City;Presented as a Chinese painting scrollEasily understand background knowledgeZoom out to see the selected objects in the museum’s collectionCreate your own variation of the original beasts and share it with friends

Introduction

Frontier heroes is part of Planet H – a new brand from history, created for kids to ex-plore historical topics and ears through play.Experience what it was like to be alive during Early American times, the Colonial Peri-od, the American Revolution, life on the Frontier and during The Gold Rush.

Play through five Eras of American History with dozens of mini-gamesHighly stylized animation brings the past of lifeMaster multiple levels of difficulty in each era’s challenges.

After I played with this funny game, I refined my concept of my project. I was realized that I need to make users experience what it was like to be traveling in Changsha with stylized interactive animation.

The Palace Museum Frontier Heroes

This is a wonderful inspiration for my project. I was inspired by its amazing interactions and they way of story telling. Also, the UX and UI design in this app are well designed with elegant traditional Chinese style. I got idea of how to present the traditional Chinese knowledge in an interesting way.



COMPETITIVE MATRIXv

Illustrated Map

Simplified famous landmarks in illustrations Interactive animations Explore interesting places in Changsha City

Draggable Clock

Displays the current time Drag the bat to see different city views that relate to the specific time

General Info

Introduce traditional local culture with interactive animations

Local Dialect

Tap the audio button to listen the name of food or landmarks in local dialect

Introduction 2

Pocket Changsha App / Thesis Book

What is the uniqueness?



UX PROCESS05

Target Audience, Personas, Diagrams of final Information Architecture; Detailed User Testing Process includ description of all phases of user testing. Result of user testing to validate my design.

Target AudiencePersonasExploringInformation ArchitectureTask FlowUser Testing Process


UX Process 38 UX Process 39

TARGET AUDIENCE

Tablets / desktop ownersTravelersEnglish-speakersYounger generationEducation: high school, universityComfortable to using a smart phone and the Internet.

Primary

18-25 year-old English-speaking visitors who intened to travel in Changsha. Unfamiliar with Changsha or Chinese cultureDon’t have time to do research before going to Changsha.English-speaking visitors who have been to Changsha before and they want to share their experience with their family and friends.

Secondary

18-25 year-old international students who are planing to go to Changsha.They want to know and experience the real Changsha culture before they go there. They have time to explore and experience local culture.


UX Process 42 UX Process 43 Introduction

MIND MAP



SITE MAPAnimated MAP

Alanding Page

LandmarksClockGenneral Info

Six main aspects of local culture


Specific timePopout Info Mark & Tag

Save as favorite

Marked Places

Enter a landmark

Interactive animation

Interactive Task

Voice over

Back to the Map

Specific city views

Landmarks open hoursbackground & Knowledge

My journey Settings

USER TASK FLOW

TASK 1 TASK 2T ASK 3T ASK 4

General Info of local culture


background & Knowledge

Close the page

Open the App

Drag to 18:00

Sunset view/ Closed

Drag to 19:00

Night view

Drag the little bar on clock

Open the App

Tap “Fire Palce”

Get popout windows

Go to night view

Tap”Go”button

Enter the building

Background Intro

Enter the door

Tap the dishes

Tap the sound icon

Listen local dialect

Get the name

Drag the food on table

Back to Map



USER TESTING PLAN Objectives

To test the main functions of the applicationTo test the visual map appropriate for user to explore interesting placesTo validate the navigation system of the appTo test the voiceover function To test the interactive animation of the app

Target Users for this Test

Travelers (Live in U.S, wish to have a vacation to Changsha)

International Students (Unfamiliar with Changsha yet)

Travelers (Have been to Changsha before and currently in the U.S)

TESTING PROCESS PHASE 1

Goal Test main interaction of the task

Results People were concerned that it has too much click-through to finish the taskConfusion about the navigation systemThe Task and Reward pages were uninteresting and not interactive

Next Step

Refine the navigation system Refine the layout Explore interesting interactions and find a way to do story-tellingRefine the Reward and Task pages

Wire FrameDate: 09/2013Number of people: 8




Goal

Test main functions of the application, as well as the visual design.

Results Most of the testers like to explore by themselves instead of going to “one day trip” pageMany testers are not interested in Temple page. They prefer to explore local food instead of serious historical storyThe landmarks on the illustrated map are not enough to express the whole cityThere are no certain connections between time, weather, and map

The navigation system is too complicated to useTask page (creating own postcard) is not attractive and interactive

Next Step

Refine visual design of mapRefine navigation systemChoose a new landmark as demonstration

High Fieldility PrototypeDate: 10/2013Number of people: 5

Time / Weather / Location

Main navigation




Wire Frame(During User Experience class)

Date: 11/2014Number of people: 6

Goal

Test main interaction of the task

Results

Most testers are likely to use clock as main navigation The illustrated map still needs to improve with more details “Order Page” needs more interaction and some descriptions are unnecessaryFour testers want to skip “ Login ” section

Next Step

Refine the connection between time and mapContinue to improve the visual design of illustrated mapAdd more interaction

Time / Weather / Location




Formal Digital Prototype(After Responsive web class)


Goal Test coded prototype with functional animations

Results

The map has more details but not stylized and organized in a standard visual principleTesters were confused about the light behind the landmarksTesters also confused about the name and background of the landmarks when they select the location marks on the map.No description to help users understand the background of a certain landmarkTesters didn’t get feeling of enter in the building

when they click the place on the mapThe animations of “order food” page are too fast and need more interactive actionsGeneral Info Page is hard to find

Next Step

Keep working with the visual design of mapRefine “order food” page, add more function to make it funRefine animations on the map

Before Before

After After




Formal Digital Prototype(After visual design class)


Goal Test coded prototype with functional animations

Results

Animation on the main map works great Illustrated map was organized The font was too small to read The animation of “Fire Palace” page was a little too slow and confusing People want to know Info about the food before draging it

Next Step

Resize the fontRefine animationsAdd basic Info of each food

Before After

Before After



Before AfterAfter After



VISUAL PROCESS06

Demonstration of my inspiration for visual design. Moodboard, Branding, sketches and final visual design guidelines.

Inspirations & Mood BoardLogo DesignInterface Design Process


Visual Process 60 Visual Process 61

Mood BoardsINSPIRATION FOR VISUAL DESIGN

Recce – San Francisco

DescriptionToca Boo is made for kids as young as 4 yet can capture excitement of those much older. It’s filled with surprises - there are no limits, just fun!

Features- Big house to explore with 2 floors and 6 rooms!- 6 family members to scare- Hidden surprises around the house- Get bigger scares by eating things! - Interact with objects in the house- Beautiful, original artwork- Open-ended play with no rules or stress- Kid-friendly interface



logo logoRough Drafts Guideline / Reference



POCK ET CHANG SHAChin a

#F3682 8# FDDF82 #B6E7E B# 181F4 C

POCK ET CHANG SHAChin a

ABCD EFGHIJKLMN

OPQRSTUVWXYZ

1234567890

Arca M ajora Heavy

ABCDEFGHIJKLMN

OPQRSTUVWXYZ

123456789 0

Moon Ligh t

#F7873 5# F36828 #181F4 C# B6E7EB

ABCDEFGHIJKLMN

OPQRSTUVWXYZ

1234567890

abcdefghijklmn

opqrstuvwxyz

1234567890

Avenir

This is the popular traditional breakfast and supper in Changsha City.

Arca M ajora HeavylogoGuideline



CharacterGuideline

Sketches

3.5

propotionElements

Styl e



CharacterGuideline

LandmarksGuideline



LandmarksGuideline

sceneFire Palace


Visual Process 72 Visual Process 73 Introduction 2

Zena Wang

Visual ProcessIllustrated Map

Round 1 Round 2 Final Design

Previous Version

Final Design



Visual ProcessFire Palace

Round 1 Round 2 Final Design

Before Final Design



technical process07

Demonstration of the Technolog I used. Indicate the use and orign of open source utilities; Technical Specifications to optimize user experience.

Technology UseTechnical Experiments


Technical Process 78 Technical Process 79

Project Form: iPad appProject Platform: iPad2, iPad Air, iPad miniFor the best performance, please consider using iPad air

Technology Specification THECHNOLOGY USED

Adobe Edge Animate CC

Adobe Edge Animate CC 2014.1

Features

• Interactive animation design with key frames and timeline• Responsive for different width devices • Easy to add code or function with animation• Visually workspace



CLOCK

SOURCEhttp://baijs.com/tinycircleslider/



DRAG & DROP

SOURCEhttp://threedubmedia.com/code/event/drag http://jqueryui.com/draggable/

84 Introduction 85

CONCLUSION08

The summery of my success

Inspirations & Mood BoardLogo DesignInterface Design Process


Conclusion 86 Conclusion 87

CONCLUSION PROJECT LINKS

With the development of the economy in China, there are thousands of tourists who come to visit my hometown every year. Including an increase number in the foreigners from around the world. However, the current travel tools and apps are not on target for foreign visitors. I think there is a huge potential market to create travel apps or tools for foreign users. I hope “ Pocket Changsha” will be a really useful app for users to experience and explore Changsha culture.

Since my midpoint, my visual and UX designs were enhanced and improved through many rounds. I am satisfied to see how users can interact smoothly by using my app and are surprised by those interactive functions. During the user testing process, I got much helpful feedback from testers. I refined my navigation system and visual design based on

their comments. Last but not least, it has been a memorable process doing my final thesis. I will never forget the days I spent in the lab and the lovely teachers and classmates who gave me a lot of supports and feedback. I am so happy to see the final design.

In the future, I will continue refining the app to make it more useful and professional. Also, I will find collaborative opportunity to promote my project with a local media company in Changsha.


Conclusion 88 Conclusion 89

BIBLIOGRAPHY PORTFOLIO

Content and Book Vedio sources

Technology sources

http://www.eegeo.com/recce/http://www.planethistory.com/http://tocaboca.com/app/toca-boo/https://itunes.apple.com/us/app/zi-jin-cheng-xiang-rui-gu/id836477582?mt=8http://www.airpano.com/http://www.brainyquote.com/quotes/topics/topic_design.htmlhttp://www.csta.gov.cn/http://www.changsha.com.cn/travel/73357.htmlhttp://www.askci.com/reports/2014/08/19/153015nk2b.shtml

https://vimeo.com/91378976https://vimeo.com/96711040https://vimeo.com/phongluonghttps://www.pinterest.com/pin/348677196128240063/https://www.pinterest.com/pin/348677196128240072/https://www.pinterest.com/pin/348677196128239615/http://pinsta.me/dezert_ro

https://www.youtube.com/watch?v=7vQmW-0mckYhttps://www.youtube.com/watch?v=s7l7bIO2mh0https://www.youtube.com/watch?v=Jaq5OEp4-cEhttps://jqueryui.com/draggable/https://jqueryui.com/droppable/http://touchpunch.furf.com/

pocket changsha-book

Documents