[Narrative Interaction] Process – Proposal Presentation

“Longya Men Reidentified”
An interactive website


Reidentify Longya Men through recollections, accounts and archeological evidences to trace back Singapore’s history way back before Raffles’ arrival in 1819.
User will play the role as modern Singaporen girl as she discovers her grandmother’s box titled Longya Men, containing different items from different centuries. She becomes involved in the interpretation of the past as she utilizes analytical and interpretive skills to piece the missing history.

Why So?

Modern Singaporeans are told the stories of history, which may be dull to them as it involves people who lives are far too different. Through active involvement, users are more willingly to accept the facts presented to them, realising the true engaging qualities of the historical process.


What is it?
Longya Men (or Dragon’s Tooth Gate) is a granite outcrop which served as a key navigational point for ships entering and passing by Singapore’s main port of Keppel Harbour.

It is most importantly the first historical documentation of Singapore in the maritime trade. It traces ourhistory way back before Raffles even came. I believe it should be one of Singapore’s important cultural heritage as the identification of the outcrop by travellers at that time managed to tell a story on how Singapore’s settlements and communities were.

Why was is called Longya Men? Who first created that name? What was Singapore like before the 19th century? I started to question all these.

Why is it important?
By exploring the history of Longya Men, we see the existence of Singapore before the arrival of the British in the 19th century. 

The allusion to Longya Men in historical records and its association with the presence of established polities on the island, thus extending the Singapore Story further back in time.

Art Syle

ProposalPPTMany of the information from this era were based on recollections or retellings. They could be stories, legends or myths. This opens up the possibility of depicting less-than-accurate representations of events. The style or visual palette chosen take influences from the visual art of the region, particularly Chinese art and Javanese elements. Such include landscape, paintings, hints of calligraphy as well as ‘look’ and ‘feel’ of old Chinese paper.

The color scheme gravitates towards more ink and watercolour tones. The palette chosen has more earthen/natural schemes such as browns, greens, lighter/paler shades of blue.

Website References

1) Sailing with Greenpeace
A great interactive site to bring awareness to Greenpeace’s work and past projects. I loved the variety of content and features on this site – short documentaries, an interactive map that truly makes you feel like you are floating in sea, and tours of Greenpeace’s ships.

2) Sons of Gallipoli
ProposalPPTThis website has the overall warm feel that I wanted for my interactive website. It is clean with smooth transitions between the pages.

3) Un/Civilized
ProposalPPTAlthough it is just a scrolling website, I like how the overall mood helped user to get immersed in the narrative. The subtle movements such as floating mist and moving text add depth onto the website. Adding sound effects or background music might help bring out the ambience more.

4) Fornasetti History

ProposalPPTThe website mainly features scrolling and parallax motions which create a subtle ‘animation’ throughout. The layering of images and content also create an illusion of depth as user moves his cursor around. I wanted to implement this idea to my own project so as to avoid any static screens. Another element to point out is the use of visual graphics that managed to compliment each other.


Main Software
Dreamweaver (HTML, CSS, Javascript)
ProposalPPTEditing Softwares
Photoshop (photo manipulation & illustrations)

Audition (sound effects)

Special Scripts
Layered image movement (jquery)

On-load content (javascript)
Parallax (javascript)
Fade transitions (jquery)
Audio onlick (html audio)

The Plot

Act 1 – Beginning
– Perspective of a modern Singaporean girl (dreams to be an explorer)
– She finds a wooden box under grandmother’s bed
– Titled ‘Longya Men’
– Consists of various objects e.g. maps, notebooks, papers, old items
– She asks her grandmother what it is
– They look through the objects on the bed

Act 2 – Middle
– Each item has its year

– User/Girl explores each of them freely
– Occasional voiceover conversation of user/girl and grandma

– Old map of maritime route (1450-1680)
      + Trade already existed in the South-east asia region

      + Discovered through shipwrecks (marked X on the map)
      + Indicates maritime trade around LYM
      + X Marks can be clicked to learn more on each shipwrecks
      + Artefacts are clues on what was traded around LYM

– A small notebook ‘Daoyi Zhilue’ (1349)
      + Important source of info for SEA and the Chinese

      + Wang Dayuan took note of customs, traditions, trade products
         in at least 99 places
      + Temasik known for the outstanding quality of hornbill
         casques and lakawood
      + Wang mentions three places in conjunction with Singapore :
         Danmaxi, Longya Men, Banzu
      + Describes the Longya Men and Banzu settlements at that time
      + Pirate attacks at Longya Men, people found safe haven at Banzu
         (a hill, with more cultivated community)

– A sketch of the Singapore Stone (13th century)
Location was at Artillery Point

      + Discovered in 1819, blown up in 1843 to clear/widen river mouth
      + A clue to LYM’s location & the reason for its absence 

– Chinese paintings of dragons
      + Clue as to why it is called ‘Longya Men’ which means Dragon’s Tooth Gate

      + Links to Chinese mythology and culture
      + Symbol of power and strength for Emperor of China
      + Symbolize control of water

– Gold necklace and coins with label ‘Banzu’ (14h century)
Archeological evidences or rich people on Banzu = links to WDY’s accounts

      + Includes a sketch of a palace with small handwritten ‘Fort Canning Hill’
      + Banzu = Fort Canning Hill?
      + Hints of a palace there

– Vietnamese Annals (1330)
Malay envoys were dispatched by a kingdom by the name of Sang-ma-tich to

         the Vietnamese court
      + They spoke the native language of the Malays

– A torn paper from The Nagarakatagama (1365)
      + Poem from the Majapahit court

      + Mentions ‘temasil’ amongst Majapahit’s list of vassals

– Wu-bei-zhi map by Zheng He (140 – 1433 Ming Dynasty)
      + Famous historical maritime annal

      + Charts used by or drawn from these voyages
      + Seven voyages to various parts of the South China Sea, Indian Ocean, and
         the east coast of Africa
      + All his seven voyages passed through the Straits of Singapore
      + LYM documented in the Wu-Bei-Zhi
      + Navigational marker used by the Ming and Qing Dynasty sailors

– Sketch of Lot’s Wife (British Ships)
      + Records suggest that British ships were in these parts of the world a 100

         years before Raffles
      + Longya Men was used a marker for European sailor to identify Temasek
      + Named Lot’s Wife

– Excavation pictures & a head ornament (1920)
      + During excavations for the reservoir of Fort Canning Hill in the 1920s, items

         of gold jewelry were found
      + Including rings, earrings, an arm band and a head ornament
      + Items would have been the possessions of a royal person

Act 3 – Ending
– User pieces her discoveries from the objects to identify LYM

– Click on ‘Identify LYM’ at the corner
– Place the thumbtack on the map to locate it
– Map turns into a scene that shows why LYM is gone
     + British’s arrival, to build a port, blew LYM up

+ After the 1819 formal treaty with the Sultan of Johor, modern Singapore was born
+ The British moved to Bukit Larangan (Forbidden Hill) and named it Fort Canning
+ Raffles also reported a large number of stone structure ruins
+ The harbour was blown up by John Thomson, in August 1848
+ To widen the entrance of the new harbour
+ Unknowingly destroyed Singapore’s important navigational mark


  • simplify story/project more
  • create a milestone what you can achieve in what week
  • target week 9 as prototype for presentation (simple web you can browse through – proof that you can finish this project)


Published by


Believes in creating works that someone can not only see or touch but be part of, to be within them.

Leave a Reply