I have a new website. Check it out!

Skip to content

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.

See my projects