I have a new website. Check it out!

Skip to content

Kelana Batavia

Kelana Batavia

Project Overview

This project is a part of graduate thesis research in Institut Teknologi Bandung, where I study Master of Design in Digital Media. A static web version of this project is available at kelanabatavia.com. The process is documented (in Indonesian) in the blog.

The conservation of historical sites is an important endeavor towards understanding historical context of a place. At the same time, innovations in the field of tourism can help conserve and deliver it to the people at large. Jakarta as a capital city of Indonesia owns a considerable amount of historical sites, including historical buildings and infrastructures, such as streets, canals and bridges, as a result of its long history during Dutch colonial rule for almost four centuries from 16th to early 19th century. The concentration of these historical sites is focused in the Old Town (Kota Tua) area in northern part of Jakarta.

My Role

My role was architecting, defining user experience and designing user interfaces for the whole project.

Goals

The goals were to make it easy for people to explore and learn about Jakarta’s Old Town (Kota Tua) district with their digital devices, without depending on specific platforms or devices.

Challenges

Defining scope. Jakarta has a lot of historical legacies. These are in the forms of buildings, streets or other infrastructures. The challenge was to define which areas to focus on first, and the solution was to focus on the Old Town (Kota Tua) area in northern part of Jakarta.

Mobile connectivity. Between maximizing learning chances and absorbing immersive experience on the streets, there has to be a perfect balance: tourists do not want to spend 100% of their time on their gadgets or connectivity. The app has to be blazingly fast, or can be read offline, or it has to promote actual travel and interaction.

Process

I normally follow this process: 1. Discovery, 2. Concept, 3. Wireframing, 4. Design, 5. Prototyping and 6. Iteration.

With Discovery, I discuss with stakeholders, do background research online, make presentations to the team, talk to stakeholders. Find the problems and what we have done in the past that worked and didn’t.

User flow

Moodboard
Defining user flow and moodboards

With Concept, I write down the findings from Discovery and make quick sketches. Then present again to the stakeholders.

With Wireframing, I take the quick sketch into digitized wireframes that show the basic level of information architecture and interaction flow.

Storyboarding
Storyboarding

Wireframes
Wireframes

With Design, I take the wireframes to the next level and add details, including colors, shapes, illustrations, icons and others.

Sketches
Sketches

With Prototyping, I work with a front-end developer to make the design come alive in actual template or interface.

Early prototypes
Early prototypes

With Iteration, I work with the whole stakeholders to fine-tune every little detail to perfection.

Results

The result of this research is the design of a web-based interactive application that lets its users to navigate themselves in Kota Tua area through visuals and text depicting its 21 historical sites. Utilizing the web as its medium, this interactive travel guide can be accessed from many mobile devices as long as they have a browser and internet connection. Users of this application can visit historical sites in the real life, then learn about its background stories on the application, and leave digital marks (“passport stamps”) as they leave. They can then share this experience with their friends and families. It is hoped that this research can serve as a solid ground for further effort to document Jakarta’s historical sites and present them in a fun and engaging way for the visitors.

There are three versions for this web app, the first is a desktop version, smartphone mobile web version and a feature phone mobile web version.

A prototype of the website is available here. This is the mobile site. Academic paper related to this work has been published in a national design journal and presented in an international conference.

A video explaining this website can be played below.

Main page
Public page

Map navigator page
Map page

Article page
Article page

Timeline
Timeline

Menu page
Menu page

Mobile version
Mobile version

Passport page
Passport page

Mobile version pages
Mobile version pages

See my projects