The Jakarta Post

Project Overview

The Jakarta Post Digital is the digital arm of the longest-serving English newspaper in Jakarta, Indonesia. This is a concept for a travel website with three main features: stories, places and itineraries. Stories gather travel articles, places collect information from a database of places with all sorts of types, including accommodation, places of interest, culinary spots, and many others. Itineraries present a list of user-curated itineraries in which every registered user can make and publish as a suggestion for others.

My Role

My role was to lead the UX and UI redesign project, starting from sketching, wireframing to designing mockups. I work with the CTO, a Front-End Engineer and two Back-End Engineers.

Goals

Our goals were to create a solid travel news site that engages users beyond one-way information. We want the users to take part in learning and curating their own experiences. First step is to make them learn about available point of interests, read more about related experiences written by the journalists, then create their own itineraries and share them with the world.

Architecture

Challenges

Formulating a new concept. No news site in the world has done this before: mixing journalism with social curation. We took the brave world to be the first. Hence, there was almost an absolute freedom, but we had to create our own guides.

Scale. Our target audience is expatriates and foreigners living in or visiting Indonesia. Hence, our main content was Indonesian destinations and experiences. We had to make sure that what we are planning would scale well from the smallest unit of locality: an address, to the biggest one: the whole nation — and make the product still easy to use and make information easy to find.

Differentiation. With many travel publications already moving to online realm, we had to define our own identity. What kind of writing style do we need? What kind of information we would want to offer, and audience we need to cater to?

Process

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

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

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

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

Wireframes

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

With Prototyping, I work with a front-end developer to make the design come alive in actual template or interface. I don’t usually code, though, but I give the devs my intention.

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

jp_10
Developing alternative comment layouts

Developing alternative single article layouts

Results

I designed a new experience and took it to the first stages of user interface design. My main design consideration was to make it more visual with some experimentation in magazine-style article.

As previously said, three main features were introduced: stories, places and itineraries. Stories gather travel articles, places collect information from a database of places with all sorts of types, including accommodation, places of interest, culinary spots, and many others. Itineraries present a list of user-curated itineraries in which every registered user can make and publish as a suggestion for others.

The travel itinerary editor is an essential part to this web application. Itineraries are divided into days, and within each day major timings of the day such as morning, afternoon and evening. They can select as many as five places for each major timing of the day, with a total of 15 places maximum in a day.

The published itineraries can be shared and will be linked to relevant travel stories.

Photos inside are copyrighted, and used only for sample and mockup purposes.

Main page