Skip to content

DBS Bank: Onboarding

Project

DBS Bank Onboarding

Project Overview

This project aims to digitally onboard existing customers to digital channels including iBanking and mBanking.

Customers must have existing DBS or POSB accounts. As a side goal it also aims to redesign the existing digital onboarding flow to make it much simpler and streamlined.

Although we had a Design Language System in place after the iBanking redesign in early 2015, we wanted to set a different tone for this flow: a tone that achieves the above goals better.

This project sets the direction for the future onboarding flows.

My Role

My role is to lead the design process, starting from sketching, wireframing to designing & prototyping the user interface. I work with the Business Analysts, Technology team, Project Managers, fellow Designers, and the senior management.

Goals

This project aims to digitally onboard existing customers to digital channels including iBanking and mBanking. It aims to eliminate the clutch of current onboarding flow, as they have longer steps. It is also non-responsive and has a visual design that doesn’t favor current DBS Bank’s branding, with low-impact layout, typography and colors.

Scope-wise, it needs to include a mobile web within a responsive website design and a plug into the mBanking design, which was also ongoing.

Scope

Existing

Challenges

We work with a team of businesspeople, compliance, technology and design to gather requirements before the project took off. Basically, requirements normally start from the business or marketing team, then handed over to solutions team, then design and finally technology team.

However, we tried a new approach whereby it’s a little more agile and iterative. It simply is not possible for a project to take off in silo-ed or waterfall manner, even in big company like DBS.

We had to work together daily, continually improving on our results. We were also challenged to dump our ideas and recycle, again and again.

In conclusion, the main challenge was more about to make the team stick together and to communicate as often as possible, because we are literally living in “silos”.

Process

We were trying to identify which design direction we would like to go. Currently, there is only one design language done by an agency, but we think it’s not clean and streamlined enough. We tried to improve the existing design language, starting from the onboarding flow. We wanted it to be an example that we can use to improve upon the other flows.

Our inspiration was Typeform onboarding, but we felt that was “too novel” of an approach for banking. We should balance it a little.

A great deal of time was spent prototyping in Invision and iterating it every single day to cope with changing requirements by business, and later, by technology. Invision was the perfect tool for this as it allowed easy and rapid changes, and because it was web-based, it was easy to share too.

Testing with the users

Prototyping with Invision

We spent initial time directly plunging into prototyping with “enough design”, as we felt it was more properly demonstrated with a hi-fi prototype. We used Invision as a tool. These prototypes can be shared with all stakeholders and eventually be presented in the user testing that we conducted with existing DBS customers.

Results

Concept

Learning about the new login page design that our team did a while ago, we decided to go that way.

To achieve the simple and focused design, we stayed away from the existing design in particular. We broke free and try to do a “paper sheet” design concept. It is the “center-stage” of the form-filling experience. It doesn’t mean that it’s a skeuomorphic interpretation of a paper as in traditional form, it just means it’s one focused space in which everything that need to happen, happens.

We tried to simplify the process, both flow-wise and perception-wise.

Wireframes

Responsive Design

First Drafts

Iterations

Final Design

Flow-wise, we tried to reduce the forms the users need to fill, and whenever possible, reduce the steps, but without compromising security and accuracy. Security is paramount in banking and it has not always been possible to reduce something.

Perception-wise, we tried to design it in such a way that it improves readibility (with bigger forms and text box), nuanced/softer colors, cleaner perception by increasing spacings and distraction-free environment.

The design will be a base for future onboarding flows, and hopefully on the new Design Language System that the team is building for the web and mobile.

Future designs can be different from this but the concept stays the same: clean & legible with rooms for improvements.

For the relatively short duration of the project, I tried to document the style guide for the web. The style guide for the mobile app looks vastly different because a different team handled it.

Final Design - Desktop

Final Design - Desktop - Popup

Final Design - Desktop

Final Design - Mobile Web

Final Design - Tablet Site

Final Design - Mobile App

Final Design - Guidelines

Final Design - Mobile App

KFC Indonesia

Project

KFC Indonesia

Project Overview

Kentucky Fried Chicken (KFC) in Indonesia wanted to revamp its consumer-facing mobile app that is currently handled by a white-label restaurant platform. Their issue was that it’s not customisable enough and branding falls short because of the white label nature of the platform.

My Role

My role is to lead the design process, starting from sketching, wireframing to designing & prototyping the user interface. I work with a Business/UX Analyst, and a Project Manager, a Program Manager and the senior management (CEO and COO). Because this is an initial pitch, we didn’t need engineer to prototype.

Goals

Our goal is to empathise with the customers of KFC in Indonesia. They need to be able to order food from nearest KFC with a breeze and speedy checkout experience. Most restaurant apps are clunky, slow and non-native which all contribute to the laggy experience. We also want to focus on the branding, and let the food photos shine and sell for themselves.

Challenges

The requirement was still in initial stage and thus it’s not specific. We worked hard with the team to focus on things that matter and propose something that has real value to their business, and to the customers, who will be the ultimate users of the app.

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.

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

Results

The result is a design of an app that is clean and has an integrity — it achieves basic functions in the leanest possible ways, focusing on speed. Heavy focus is put on the menu selection process with each food package having its own story or description to show.

Menu
Menu

Order
Order

Store Locator
Store Locator

Profile
Profile

Changi Airport

Project

Changi_UserJourney.009

Project Overview

Changi Airport is Asia’s—and probably world’s—leading airport. It’s the most important air hub in South East Asia, and an example to regional international airports. Their existing app is quite a standard airport app with directory of tenants & public facilities, flight information, offer or shopping information with an outdated interface & experience. Changi Airport approached Ice House, my former employer, to do a pitch. We came up with several prototyping rounds and ideas to propose a novel approach to airport app experience, which elevates not only technology itself, but by having a strong empathy to world travelers, aligning with Changi’s business propositions.

Changi_UserJourney.009

Changi_UserJourney.009

My Role

My role is to lead the design process, starting from sketching, wireframing to designing & prototyping the user interface. I work with a Business/UX Analyst, and a Project Manager, a Program Manager and the senior management (CEO and COO). Because this is an initial pitch, we didn’t need engineer to prototype. I also attended meetings in Changi Airport to present our ideas and gather requirements.

Goals

Our goal is to empathize with world travelers transiting in Changi Airport. We want them to experience the most seamless transit experience with a mobile app, and we’d like the app to be proactive. On the sides, we’d also like to cater regular visitors — which is not surprising for Changi Airport. It’s about the only airport visited casually for its wide array of dining options.

Challenges

We want to stay away from the regular airport app model: a brochure, static, boring, passive app that is waiting there to never be used. Travelers can always look up for flight information somewhere, they can navigate the airport alright with existing physical signage system, or they can shop directly by moving around. Even without a guide!

We’d like the app to proactively offer a seamless recommendation. We’d like it to be a small, effective and smart recommendation engine that caters for user’s needs. By user needs we’d like to think of pressing transit times — what to offer in limited time range?

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.

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 Flinto prototype.

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

Results

We want the app to be a recommendation engine with a minimal input. By signing in or scanning your boarding pass, we’d like to generate a recommendation of things to enjoy at the airport. Changi is dubbed the world’s best for transit with its wide array of dining, shopping and family-friendly activities.

Depending on the time range of transit, time of day and location, travelers can receive various recommendations to eat, shop, exercise, rest or just have fun. Watch movies, visit one of the indoor parks, dine, shop for chocolates. The option is endless. All this while accounting for your boarding gates and the travel time needed. Not to mention, with existing integration to Changi Airport’s amazing APIs, we can actually detect the traveler’s position and guide them through.

Changi_UserJourney.009

Changi

Changi

Changi

Changi

Changi

Changi

Changi

Changi

Changi

Changi

Hango

Project

Hango

Project Overview

Hango is a mobile app that lets you create on-the-go, spontaneous hangouts with your friends. Imagine that you are in town and want to invite your friend for a drink or two at the bar, or perhaps on a pizza excursion. Just create a Hango group and track your friends. You can share photos, locations and chat with all the participants. Each group session is real-time and must be ended, so the immediate fun is there.

My Role

My role is to lead the design process, starting from sketching, wireframing to managing a UI designer to design the user interface. I work with a Business/UX Analyst, and a Project Manager, a Program Manager and a team of engineers. Most of the UI design is done by a designer collaborator, Wieky Azza Mahfresya.

Goals

Our goal is to make it seamless and easy for the app users to create impromptu hangouts. This is achieved by creating a group and inviting them at once. Users can accept and reject an invitation.

Challenges

The client had a clear grasp of what the app is about, but they don’t have the user journey and flow yet. I helped them with the app concept, user journey, wireframing and iterating them all the way to final user interface design.

Process

Hango wireframing

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.

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 UI designer to create a Flinto prototype.

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

Results

Hango UI design

A solid design. Based on the brand guideline set by the client, we set forth to create a solid app design that not only looks modern and young, but also works straight out of the box. We want to minimise tutorials and use as little inline instruction as possible.

Hango UI design

A foundation. We believe in agile and iterative development, so the design has to be scalable and serves as a foundation for future improvements. We do this by not overcrowding the feature set and make it as familiar and close as possible to the native iOS user interface.

Bukalapak

Project
Bukalapak

Bukalapak

Project Overview

The project is to redesign a 3-year old C2C transaction-based e-commerce website, with only one head-to-head competitor in Indonesia.

The challenge is to make it very easy for people to sell and buy their goods online in Indonesia, where trust is an issue and online transaction has been limited to bank transfer, and to some extent, escrow implementations. Most people in Indonesia don’t have credit cards.

Current website has several issues:

Transaction system needs work. The transaction system is hardly streamlined. There are too many sections in the website related to transaction: negotiation, delivery, payment, user profile and messaging. There were more steps than necessary in purchase, registration or login processes.

Feature bloat. There were some features that, according to usage data, were not used frequently or properly, among others, they are the chat and comment system. They were a burden to our product curators and to the system in general. It seems that these features were implemented without proper research or needs.

No mobile-tailored solution. There is no mobile solution that works seamlessly to facilitate selling and buying. What they had was only a stripped-down, basic mobile site with no ability to sell and buy. There was no specific UX or UI catered for this segment.

Style inconsistencies. Some of the icons are vague, copywriting undecided, and categorization is always a problem. The branding is much an issue, too, with no brand or style guide in place to guide applications of visual assets and implementations.

My Role

My role is to lead the UX and UI redesign project, starting from sketching, wireframing to designing mockups. I also created style guides both for the brand and for the UX/UI. I work with a Business/UX Analyst, A Front-End Engineer and a Product Manager.

Goals

Our goals are to make it easy for users to sell and buy online. Easy means:

  1. Easy to browse products and compare them.
  2. Easy to upload and start a new item.
  3. Easy to buy through a seamless transaction process.

Each of the steps are to be achieved through desktop and mobile solutions that work best.

We measure success by user feedbacks gathered through multiple channels: customer service, occasional meetups/interviews with best sellers for quality input, user forum, emails and chats.

We collect them in a repository and grade by priorities and then log actionable items that are approved, to Github or Basecamp.

We occasionally use simple experimentation/iteration with copywriting or color to find out the desired impact.

Challenges

Shipping processes. Some users do not realize that they should and could update delivery status, including “delivered”, “paid” and “received.” Customer service officers often need to email or call users to remind them for this.

Picking the right shipping partner. We want to partner with the right shipping partners so we get the best pricing and delivery service. Shipping in Indonesia is pretty fragmented and geographic challenges prove to be difficult, it can be costly to ship.

Picking the right payment method. We want to ultimately move to credit card or online payment but that option is not really possible right now because of economic and cultural constraints.

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.

Sketch
App flow
App flow

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

Wireframing
Wireframing process

Product statuses
Setting up standards: Product statuses

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

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.

Iteration
Iteration

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

Results

A new design. I designed a new interface and a new experience for the users. Consolidated previous menus into one user dashboard: myLapak, which hosts everything. Makes it a one-stop shop for users to start selling, transacting, negotiating and interacting with each others. Streamlined the design so they match the intended brand image closely: fun and easy. Started utilizing the mascot, Billy, more to personalize the experience. A new visual style and UX guide was published to assist future designers working on the product. I made a Human Interface and a Visual Guide for the brand.

Redesigned homepage
Redesigned homepage

Redesigned menu
Redesigned menu

Single product page
Single product page

myLapak menu
myLapak’s handy top-right menu can be accessed from all pages

myLapak

Negotiation page
myLapak (literally: “My Store”) is essentially an integrated user dashboard

Streamlined purchase
Now users can login or register on their way to purchase, and have multiple item previews

Mobile siteMobile site

A glimpse of iconography

A glimpse of the iconography
A glimpse of the iconography

Top and bottom navigation bars
Guides for top and bottom navigation bars

Standards for buttons
Defining a standard for buttons

Text
Text hierarchy

Features that allow seamless buy & sell activities. We carefully curated which features didn’t work and what features are direly needed according to usage data and interviews. In the end, a shopping cart, visual-centric product navigators, responsive design (future), and mobile-tailored mobile solutions (mobile web and app) are the new product sets and features that we put in the pipeline. Mobile solutions are particularly the focus of 2013 and 2014 since Bukalapak sellers are basically mobile sellers who move from one place to another quickly.

Shopping cart was added recently
Shopping cart page was added recently

Bukalapak for Android
Bukalapak for Android

Full static HTML mockups can be viewed here. Front-end development is separately done by Arfandi Wijaya.

Oracle

Project
Oracle

Oracle ThinkQuest

Project Overview

For four years and eight months, I developed, delivered and managed interface design materials starting from wireframing, prototyping and detailed designs, conceptualized and executed print and digital promotion materials for Oracle corporate citizenship effort called ThinkQuest (www.thinkquest.org), an online project space/international learning platform for students and teachers to learn together online and compete in educational competitions. Streamlined marketing collaterals request process across the team. Managed a repository of design materials. The number of users reached 590,000+ students in 40+ countries, available through 11 languages. The ThinkQuest Library, a repository of student-created contents, reached a milestone 8,000+ entries visited by more than 50 million visitors per month.

I was also involved in research, user observation and user interviews. I staffed most local (Indonesian) training sessions in public and private schools to introduce ThinkQuest as a learning tool for them and how they can integrate it to the existing curriculums. Sessions like these include 7 hours of practice and theories. This experience allowed me to observe user needs first-hand and interview them, and made written documentations for future product improvements. Helped organize and conduct roadshows in various universities and schools in several Indonesian cities (Jakarta, Solo, Bandung), to gauge interests and motivate enrollments for the a year’s competition.

Role

I was a designer in the team, working together with a Design Manager and a Design Director. My job was to mainly execute directions. All of the works presented on this page are to be credited as a team collaboration and not myself only.

Goals

Product logos
I handled three products initially, before Think.com and ThinkQuest were merged into one, ThinkQuest

Our goals were to seamlessly connect students, teachers and university lecturers to a world of online collaborative learning. We initially had three programs to support that: Think.com, an online learning environment for K-12 students and teachers, ThinkQuest, an online collaborative learning competition whereby students competed in teams across countries to make websites or web applications, and Oracle Academy, a program for high school and university students, lecturers and teachers to integrate Oracle technology in their education curriculum and learn Oracle from early days.

Challenges

International borders. Different countries mean different teaching and learning methods, curriculums and cultural barriers. We had to embrace these as our motifs to create products that are easy and compelling to use across differences.

Marketing. Although the products are made ready to use, we still need marketing efforts that come down to bricks-and-mortars schools to initiate usage, particularly in developing countries where internet connection was an issue. We also faced competitions from other technology companies making their foray to education.

Target groups
Target groups

Understanding education. Coming from a technology background, Oracle is not exactly the type of business that aligns closely with education, except for their software education programs that include Oracle University and Oracle Academy. As technologists and designers, we had to dive deeper into understanding pedagogy to make the best products that empathize with the users.

Process

I normally follow this process, and this is a process I learned from Oracle: 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.

Illustration sketches
Sketches for illustration projects

Wireframe for a map explorer project
Wireframe for a map explorer project

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

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

Creating building specs was almost daily tasks
Creating building specs was almost daily tasks

With Prototyping, I work with a front-end developer to make the design come alive in actual template or interface. I didn’t usually code, though, but I worked together with the developers to refine my work.

Building interactive prototypes

Building interactive prototypes

Building interactive prototypes
Building interactive prototypes

ThinkQuest iteration
ThinkQuest navigation iteration

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

Results

During my years I helped merge Think.com and ThinkQuest into one solid learning platform, branded just ThinkQuest. It was decided that both programs have similar missions and they are stronger together.

ThinkQuest Competition dashboard
ThinkQuest Competition dashboard

I helped maintain continuous improvements of the programs through user experience, user interface and brand design. Projects spanned from the online platforms themselves and marketing materials for events and promotions, not only for ThinkQuest, but also for Oracle Academy.

ThinkQuest Library sticky bar
ThinkQuest Library sticky bar

Student project spotlight arts
Student project spotlight arts

2011 front page with bigger menu
2011 front page with bigger menu

ThinkQuest Live 2011 promotional materials
ThinkQuest Live 2011 promotional materials

Promotional postcard
Promotional postcard

ThinkQuest diversity ad
ThinkQuest diversity ad

Event graphics
Event graphics

Kelana Batavia

Project
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

The Jakarta Post

Project
The Jakarta Post

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
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
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
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
Main page

Itinerary list
Itinerary list

Itinerary editor
Itinerary editor

Itinerary editor, delete a day
Itinerary editor, delete a day

Places
Places

Stories
Stories

Ransel Kecil

Project
Ransel Kecil

Ransel Kecil

Project Overview

Ransel Kecil literally means “a small backpack”, which comes handy in describing what the website is all about: traveling independently. This website serves as a collective repository of thoughts, facts and experiences on independent travel curated with care from various contributors. The site won bronze in national-scale Internet Sehat Award 2010, nominated in the international-scale 2011 Deutsch-Welle Blog Awards (“The BOBs”), and won the national-scale 2012 AXIS Blog Awards in Jakarta, Indonesia. The blog was featured in The Jakarta Globe, Jawa Pos, TigerAir-Mandala inflight magazine, InfoKomputer magazine and Her World Magazine Indonesia. Twitter account @ranselkecil attracts nearly 32,000 followers as of January 2014.

Design mockup
Design mockup

Goals

Create and maintain a travel blog that serves a repository of amateur travel writing by Indonesians to Indonesians. With this, we evangelize the importance of good writing in travels, and as a campaign to travel better and responsibly. We aim to excite, inspire and motivate young Indonesians to spend their youth time traveling in a way that will enrich themselves and their future.

Apart from the website, we also want to promote this endeavour further by designing some memorabilia like t-shirts and creating travel guide e-books.

Challenges

I run the site voluntarily and accept voluntary contributions from friends and strangers, who happen to send their materials in to the email. Maintaining quality editorial process is a challenge, since we used to be a two-men team, and now still is, considering that we don’t reject contributions that often. We want to be inclusive, but at the same time, we want to maintain quality.

Process

With a personal project, I had a bit of a freedom to define where this project goes, even if it includes failures. I embraced them, and the site has undergone at least five redesigns since the start in 2010.

Design-wise, I tried to make it look somewhere in between practical and nostalgic, while keeping enough space for content to grow. This is an ongoing experiment and we do not know what the future might be: whether to collect all of the information and compile as travel guides, continuing to be a blog, or a much more selective curation, we decided to openly classify information according to their types and study which type of information will evolve best. Color codes are used to make things look friendly, which also symbolise the diverse experience of travel.

I start with the concept of the various themes explored in the blog, among others: travel notes, accommodation, culinary, tips and places. Each of these can be a world of its own. Thus, I started with the color-code concept for each of the theme. This color coding eventually ceased its way during the last two years, to accommodate easier addition of themes.

I normally start out with wireframes and prototypes, then continue on the small details along the way to iterate. Often, the actual HTML/CSS templates are much different from the static mockups, because I compromised on several design decisions.

Results

The results have been satisfying for me, but continue to excite future experiments. From 2010, there have been several redesigns that were notable.

Ransel Kecil 2014 design
Ransel Kecil 2014 design

Travel guide e-book design
Ransel Kecil 2014 e-book design

The 2014 design (soon to be launched) is a design that would be bullet-proof to any amount of content it holds. This design caters for more addition of article themes, types and provides easier search & category/archive navigation interface.

Ransel Kecil 2013 design
Ransel Kecil 2013 design

The 2013 design was an experiment in readibility. I took it a step forward for experimentation: wide, single column. Big types. Large pictures.

Ransel Kecil 2012 design
Ransel Kecil 2012 design, with updated logo and a Twitter account shot

The 2012 design was a step towards pictures as focus.

The original 2010 design
Ransel Kecil 2010 design

The first design was an experiment in content categorization, and a year where we focused on finding a design and editorial style. We gained momentum this year.

Garuda Indonesia

Project
Garuda Indonesia

Garuda Indonesia

Project Overview

This is an experimental study, done to complete Final Project for a bachelor degree in Visual Communication Design. I took on the challenge on thinking how Garuda Indonesia, the Indonesian flag carrier, could live up to the brand competition. The message is the historical and patriotical role that Garuda has played for the nation.

Goals

The goal of this project is to create a campaign for Garuda Indonesia that augments the image of a flag carrier of Indonesia. Research in 2007 showed that the image of the airline that time was declining due to bad management and economic crisis. Apart from service improvement, data and interviews agreed that Garuda needed something image-wise to help ease the transition.

Challenges

Garuda Indonesia was already an airline with problems, particularly since the national economic crisis in 1998. Several important routes were cut, including an important Jakarta-Amsterdam route, which was cut in 2004. It was banned to fly to Europe by European air authorities. The aircrafts were old and new ones were needed. A few accidents and incidents happened during this time, but were quite fatal. People were generally not choosing the airline in favor of the growing choices of low-cost carriers. Foreigners didn’t trust the airline and opted for other full-service airlines for their trips to Indonesia.

With an airline in need of help internally and substantially, a campaign seemed to be the least feasible way to help alleviate the problems. However, service improvement would mean nothing if it was not campaigned in proper ways.

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 stakeholders, do background research online, make presentations to the team, talk to Garuda Indonesia customers. Find the problems and what we have done in the past that worked and didn’t.

With Concept, where the moodboards, storyboards, sketches and theories are all blended in to form a concept.

With Design Draft, I worked on the details of the visuals and apply them through various collaterals.

With Iteration, I continue to perfect every detail as time progresses and further discussions with stakeholders take hold.

Results

Livery design. We wanted the forefront brand ambassadors to be on the spotlight: the planes. It’s a huge undertaking, and much a bolder way to express the message. There are two messages carried: Indonesia’s beautiful nature and Indonesia’s cultural highlights. A330-series aircrafts were used because they were used to long-haul international destinations (Japan, China, Korea, Saudi Arabia).

Culture livery
Culture livery

Nature livery
Nature livery

Nature livery in 3D
Nature livery in 3D

Below-the-line applications. Ads, banners on airports, mini-exhibition, boarding pass design, mini-website are among the applications that were used to further maximize the audience and impact of this campaign.

Interactive timeline
Interactive timeline

Printed overhead banners
Printed overhead banners

Website concept
Website concept

Inspiration ad
Inspiration ad

Magical ad
Magical ad

Historical ad
Historical ad

Mini exhibition setup
Mini exhibition setup

Website detail
Website detail

Desk calendar
Desk calendar