S T R E E T F O O D H KAN e-GUIDE TO STREET FOOD IN HONG KONG BY PANSY HUI

FALL 2011 SEMESTERPROCESS BOOK

GRAD PROJECT

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR Initially, my design objective was to create a mobile

app that would be a “travel assistant” when people are

traveling to specifically Hong Kong. It would suggest

the things to pack, teach the common phrases, show-

case the major attractions, and inform these potential

tourists of what may be “strange acts” so to decrease

culture shock.

What inspired me was my one-month visit to Hong

Kong, Malaysia, Singapore, and Guangzhou during the

summer. I have never stayed in Asia for such a long

time, and not only was I experiencing culture shock, I

wasn’t used to the temperature and food. It was defi-

nitely more humid than I imagined. If only I received

some advice on packing and preparing for the trip.

PHASE ONE CONCEPT

852THE GUIDEBOOKWordmark for the e-guidebook.852 is Hong Kong’s area code.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

MOODBOARD ACTIVITY

This workshop has helped me get a clearer sense

of the app concept, where random ideas were forming

visual and metaphorical connections.

I worked with 3 categories for my moodboards:

context, content, and audience. I wasn’t aiming

to consider about the appearance of the app at this

stage yet; however, when I put together the mood-

board for content, I realized that this somewhat

forced me to form a general “style” of the app design.

It was totally unintentional - I wanted to focus only

on the content.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

MOODBOARDCONTEXT

MOBILE APP

PORTABLE

TRUSTY

ON-THE-GO

ORGANIZED

BARRIER

CONVENIENCE

COMMUNICATION

CONFUSION

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

MOODBOARDCONTENT

CLEAN

BOLD

ORDERLY

COLOUR-CODED

ORGANIZED

HIERARCHY

FRIENDLY

ICONS

SILHOUETTE

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

MOODBOARDAUDIENCE

BARRIER

LOST

MAPPING

CONFUSED

TRUSTY

GUIDANCE

TOURISTS

WESTERN

LOCATION

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR I’ve received a lot of helpful feedbacks from class

peers regarding my app concept. Most important of

them all, though, was that I should concentrate

on one aspect of traveling.

During this phase, I have decided to design an app that

focuses on learning about street food in Hong Kong

and using location -based technology to help tourists

find street food vendors around Hong Kong. Before

having the idea of creating a street food app though, I

did research into travel publications and travel apps to

get a sense of the general travel lifestyle and how they

reach their audience.

PHASE TWO CONCEPT

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR Brief research into existing print travel magazines

would help me get a generalized sense of the kind of

content in a tourist guidebook. Also, I want to observe

how they set up the “mood” to travel for their fellow

travel enthusiasts. One thing I have observed already

while skimming through these magazines is that they

lure their readers in with large beautiful imageries of

travel destinations much like how images in food mag-

azines would cause readers to become hungry. I have

looked into four different popular travel magazines for

guidance:

Conde Nast Traveler

Phaidon Wallpaper* City Guide

National Geographic Traveler

Travel + Leisure

RESEARCHTRAVEL MAGAZINES

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

Conde Nast Traveler

National Geographic Traveler relies heavily on imager-

ies as well. Because it’s National Geographic, it’s also

known to be rooted towards educating and exposing

its readers to places and things in the world that they

have not seen befoe. It inspires its readers to become

more daring and adventurous. This magazine is all

about adventure and discovery and it is for those who

do their research before getting to their destination.

National Geographic Traveler

The Conde Nast Traveler is a luxury travel magazine

that relies heavily on full-page, full-spread images. Its

layout and choice in typefaces are elegant and mini-

malistic. Their targeted audiences are upper class peo-

ple, which are basically those who can afford to travel

luxuriously, business people, and middle-aged retirees.

The content features five-star destinations and hotels

and its images are usually of beach and island getaways.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

Travel + Leisure

Recently, Travel + Leisure has been putting more effort

into their magazine design. They are more conscious

about their typefaces and layouts than before; how-

ever, their identity does not seem as established as the

previous three magazines mentioned.

Phaidon Wallpaper* City Guide

Phaidon has always been known for its simplicity.

There are no fancy grids, layouts, and typefaces and its

Wallpaper* City Guide is not an exception. It is pub-

lished as a series of small books, each with a different

colour for different city. Unlike Conde Nast Traveler,

its style is quite contemporary.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

RESEARCHTRAVEL APP CONCEPTS

I researched into the kinds of interactions and func-

tions incorporated in upcoming travel app concepts to

make it “interesting”.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

WWMD (What Would MacGyver Do)

This app assists people in getting out of sticky situa-

tions during their vacation. It would ask the user

to enter the items they currently have with them

and to describe the situation that they need to over-

come. WWMD will find a solution for them.

Bedbug Detector

This is a more advanced app, which incorporates

a heat map so that bedbugs are represented in red

once the mobile device is hovered over the bed.

The Haggler

For shopping tourists, this app would help suggest

a fair, local price when bargaining. It will also suggest

some phrass to use during the bargaining process.

You’re Off Track

This app makes the mobile device buzz/ring, notifying

the user in case they are off track during an adventure.

The Consul Finder

They say that finding a friendly consul to get a tourist

visa can sometimes get hectic. This app tells the user

the location of the most “friendly” consulate in the

region when they enter their nationality, the country

to which they are trying to get a tourist visa, and

where they are currently located.

Mini Taser

This is a gentle mobile weapon for unwanted people

during vacation. It would have two settings: the subtle

and the brutal.

Street Food Sleuth

For tourists who want to experience street food

without having to worry about having a bad stomach

after, this app helps scan street food for parasites and

bacteria.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

RESEARCHHONG KONG TOURISM BOARD’SEXISTING APPS

In addition to the above apps I have mentioned, I have

also looked into a few of the apps produced under

the Hong Kong Tourism Board. I want to take note

of the expectations, criteria, and content of existing

Hong Kong tourism apps, especially the kinds of inter-

actions with new-age technology they have embedded

such as AR (Augmented Reality).

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

Discover HK · City Walks

This app also uses AR technology to help tourists find

places to visit. There are four categories, or “themed

walks”: Arhitecture, Time, Living Culture, and City Life.

City Walks is easily navigable and I really like the

scrolling of the different tourist attractions. This app

presents just the right amount of information.

Discover HK · Local Delicacies

This is an e-guidebook that introduces the basic dish-

es of Hong Kong cuisine and sorts them into four cat-

egories: congee, rice noodles, noodles, rice. It recom-

mends restaurants that serves these dishes; however,

it could be possible that restaurants pay for getting

themselves featured on the app. This app, hence, seems

to benefit large, chain restaurant businesses more so

than to promote the traditional, down-to-earth small

Hong Kong eateries that are essentially cultural relics.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

Discover HK · AR

Using AR (Augmented Reality) technology, it enables

the phone’s camera to scan its surroundings, recognize

it, and will provide information on where and what the

user is looking at. On top of this, the content is avail-

able offline so that tourists can view the app’s con-

tents without a data plan and they do not have to look

for Wi-Fi services.

Discover HK · 720º

Unique from the above mentioned two apps, this app

offers virtual tours of the several key attractions

in Hong Kong. Videos are embedded into the app for

a multimedia approach.

Discover HK · Food & Wine Pairing

This app attempts to cater to Westerners by recom-

mending Chinese food that could be paired up with

wine.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

WHY STREET FOODIN HONG KONG?

Street food has become a unique representation

of Hong Kong’s well-known street culture. It is local

and authentic; it is a distinctive aspect reflecting Hong

Kong’s past while following current culture. In addi-

tion, being under British rule from the 50’s to the 90’s

explains how Western culture is embedded into its

history and continues to influence its society today,

hence Hong Kong’s iconic East-Meets-West culture.

Efforts have been made to preserve old Hong Kong

traditions and culture as seen in their festivities and

architecture; yet Hong Kong is constantly under rapid

modernization and Western influence. Street food cul-

ture is slowly disappearing, as is with old Hong Kong

traditions and culture.

Inspired by the recently growing market for street

food carts in Vancouver, it struck me that Hong Kong

has had street food for decades but there are

no guides introducing this cultural aspect of Hong

Kong to tourists.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

RESEARCHEXISTING STREET FOOD APPS

This area of research is particularly interesting be-

cause it allows me to compare and contrast the defini-

tion of street food between North American culture

and Hong Kong culture. Doing research in this area

has helped me realize that street food in North Amer-

ica is served in carts while street food in Hong Kong

are sold in small stores, which in some way implies

that street food in Hong Kong is more established and

the market for it is stable because street food in Hong

Kong is so abundant, popular, and wellknown.

Hong Kong initially sold street food in carts; however,

due to increasingly strict regulations being implement-

ed into street food and eventually banning street food

carts from the streets, it is now sold in small stores.

Now, North America is introducing the mobile food

culture in an effort to bring vividness to street life and

culture.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

Road Stoves GPS

Using GPS, this app is the most accurate in terms

of tracking street food trucks around town; however,

it is the most sparse in terms of the varieties

of food trucks because not every truck is GPS-en-

abled. It is easy to access Twitter feeds and menus

of other trucks, but it does not put them on the map.

Advantage: GPS tracking accuracy

Trux Map Lite

This app locates trucks near the user that are open

for business. It also utilizes Twitter feeds to track and

plot locations. Users can request new trucks to be

added into the app.

Food Truck Fiesta

This app tracks trucks on a live map using Twitter

feeds. The Twitter feed for each truck is revealed when

the user clicks on the truck.

Eat St.

On top of being able to track trucks on a map, the

relationship between the truck owners and their cus-

tomers is drawn closer because food truck owners

to update their own locations, menus, hours of opera-

tion, and customize their “restaurant” profiles through

the Eat St. database.

Advantage: Food truck owners can customize profile.

Roaming Hunger

This app uses tweets and calendars to keep track

of street food trucks on a map. It also categorizes the

street food into three categories: savory, sweet, and

vegetarian. Users can also plan ahead by searching only

for trucks that are open.

Advantage: Food categories available.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

RESEARCHARTICLES ON HONG KONG’SSTREET FOOD CULTURE

The Rise and Fall of Cooked Food Stalls’ Agglomerations

by Rita Yi Man Li

In this article, I will find the history of how street food

carts all began and why it existed. This article is useful

because it provides dates (years) for all major events

that occurred and I could use those dates for the

timeline. It also highlights the transition from tradition-

al dai pai dongs, a casual outdoor eating environment,

to the current street food stores. I also like how this

article stresses the significance of these dai pai dongs

as a cultural relic and their disappearing presence

in Hong Kong is affecting its street culture as well.

Cultural Heritage in Hong Kong: The Rise of Activism and

the Contradictions of Identity

by Sebastian Veg

This article touches briefly on how activism has

changed and shaped Hong Kong. Such topics of debate

revolve mainly around modernization versus pres-

ervation of cultural relics and tradition. An instance

would be bringing down old architecture to construct

new apartment complexes. As explained in the article,

Hong Kong seems to be battling between two contra-

dictive social ideology - rapid modernization and cul-

tural preservation.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

RESEARCHWHERE CAN I FIND INFOON THE COMMON FOODS?

Lists of top and most common street foods to try in

Hong Kong could be found in websites such

as CNNGo and food blogs in particular. Food blogs

tend to document people’s experience towards this

street food culture as well and how they interpret

these food.

Another research source is to ask locals in Hong Kong

for their recommendations on what tourists should

try out in order to experience the taste of Hong

Kong. I could ask relatives in Hong Kong for input.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

PHASE THREE CONCEPT

Phase Two was a major turnaround for my grad proj-

ect. I finally knew where I was heading and after so

long, I finally had confidence working because I felt I

could finally have a grasp at the project.

In Phase Three, I began producing my ideations. I drew

wireframes, a user task flow, and started designing.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

DESIGN OBJECTIVES

Phase Two was a major turnaround for my grad proj-

ect. I finally knew where I was heading and after so

long, I finally had confidence working because I felt I

could finally have a grasp at the project.

In Phase Three, I began producing my ideations. I drew

wireframes, a user task flow, and started designing.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

POSTER + TAGLINEACTIVITY

This rapid poster design activity condenses our grad

project into one poster with one tagline - it helped in

clarifying my design intent.

In a way, it is both stepping away from the project and

stepping closer. I stepped away from it and began

to think from another person’s point of view and

the information I attempted to communicate. I also

stepped closer because I discovered errors I have not

thought of before.

For example, I have to take into account that no one

knows what are curry fish balls and how they look like.

No one knew what 852 meant either.

Rough poster for Discover852.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

ROUGH WIREFRAMES

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

USER TASK FLOW

LOADING PAGE

HISTORY

GUIDE

BROWSE

NEARBY

PROFILE

EDIT

MY REVIEWS

MY PHOTOS

SHOP

DETAILS

REVIEWS

PHOTOS

POPULAR

DISTRICT

PIONEERS

SHOP

WRITE

POST

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

COLOUR PALETTESVIA COLOURLOVERS.COM

CONTRASTING

HARMONY

BOLD

FRIENDLY

VIBRANT

HONG KONG

I really liked the bold, contrasting colours and tried

to work around these colours for the longest time,

but these colours just don’t work. These colour com-

binations don’t represent “street food.” I liked the red

in it, but the lime greens and turquoise seems “clini-

cal”.

It looks like a flu more than street food.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

THREE DIRECTIONS

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

INITIAL ITERATION

As I was working on the design, I didn’t like the colour

scheme at all - I wanted a lively colour palette but I

felt that the red on every page was too much. It took

away the focus of the photos.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

The red worked for the timeline (history) though.

However, I scrapped the idea of incorporating histori-

cal facts on street food because people could care less

while they’re on vacation.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

FINAL COLOUR SCHEME

After designing with the previous colour scheme and

realizing it didn’t work at all, instead of continuing

searching for the “perfect” colour palette, I created

my own. I took some colours out of an existing street

food vendor photograph.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

TYPEFACE

ArvoMedium

Helvetica NeueRegular

I chose Arvo, a slab-serif typeface, as the display text.

Slab-serifs are mainly used for display text; however,

I was actually quite surprised it works as both display

text and body text! Arvo is a rather versatile text,

despite its bold and stolid characteristic and its mono-

linearity. In addition, it also reflects this transition from

tradition to a modern, trendy environment inherent in

street food. The same weight in its vertical and hori-

zontal strokes reflect modernity.

Although Arvo works for both display and body texts,

I chose to use Helvetica Neue for the body texts

simply because it is one of the default fonts for the

iPhone.

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

FINAL ITERATION& REFINEMENT

What was so tricky about coming up with the right

colour palette was that it had to be somewhat clean

yet street food is usually associated with sloppiness.

I didn’t want to give people a sense of chaos and unti-

dyness in my design so I settled with a colour palette

that has hierarchy - the turquoise that I later incor-

porated acts as the contrasting colour so that all the

browns, oranges, and beiges don’t act like a boring

sepia photograph.

The final iteration reflected refinement of the initial

design - I attempted a clean and vivid app design in

which the vibrant colours would reflect Hong Kong’s

dynamic street culture. User-friendliness was a prior-

ity and instead of re-designing iPhone’s graphical user

interface (GUI), I used their template and designed

this app according to the standard GUI. This design

decision was a critical one because the users (tourists)

won’t want to learn and adapt to a new GUI ... when

they’re standing in the middle of a busy street in a for-

eign city trying to search for things to eat!

FINAL ITERATIONPHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR

PHASE ONE

PHASE TWO

PHASE THREE

PHASE FOUR