Loading
  • Portfolio
  • Open Access
  • Marketplace Transaction Product, 2019

Redesigning Checkout Page for Bukalapak Rebranding

Initiated with the Bukalapak rebranding project to refresh our new brand identities, we aim to make crucial user journeys such as Checkout to be aligned with the new direction without harming current business metrics.

Summary

Objective:
  1. Focus on aligning key visuals with our Bukalapak new brand language,
  2. Prioritize high impact usability issues.

Impact:

  1. Aligned design language with the new brand, across different pages on crucial buyer journey (Homepage, Product Detail, Cart)
  2. Improvements in product performance such as number of paid transactions, and paid Gross Merchandise Value (GMV)

User Jobs to Be Done (JTBD):

  1. Finalizing the purchase of selected physical product.
  2. To evaluate and select the best item purchase options from address, product notes, cheapest courier option, and the payment method.
Before After

Fig 1. Bukalapak Checkout Page, Before and After Rebranding

Challenges

1. Managing Design Project:

  • Managing multiple product stakeholders to align with the new design concept is needed to get a buy-in so the new checkout design can be implemented smoothly with less push back.
  • Collaboration with project lead and researchers across department is important for better alignment and communication.

2. Product Design Problems:

  • Buyers are unable to edit the purchased item attribute when selecting payment method.
  • Inconsistent payment method experience between mobile and desktop.
  • New business opportunity that is cannot be accommodated on previous design.
  • Some design pattern and component that needed for checkout are not available yet in the Library.

1. Managing Design Project

1.1. Align and Define

During this phase, the objective is to get the right expectation of the project, context of the product, users behavior, and the success metrics.

Results:

  1. Stakeholder maps with their product information such as the success metrics, technical constraint, and concerns for both product and experience aspect,
  2. Collective product insights both qualitatively and quantitatively to drive design decision. Such as the payment method and courier selection,
  3. List of what can be improved in the terms of usability and user interaction from current product. Resulting in the modified technical approach to move between pages on payment and item confirmation,
  4. List of product cases that can happened because of system error, or possible human mistakes.
  1. Mapping all intersected product and stakeholders within this product,
  2. Setting up interview with project stakeholder to get expectation on timeline, objective, and project scope,
  3. Collecting previous research on checkout to get our existing user insights and pain point when interacting with current checkout process,
  4. Doing a heuristic analysis on what can be improved in the terms of usability and user interaction from current product,
  5. Collecting previous product feedback from business perspective, on what should and shouldn’t do to keep in on track with business goals,
  6. Gathering technical constraint and possible use cases to minimize unhandled user flow.

1.2. Align and Create

During this phase, I’m involved in the creation process of a higher fidelity design, prototyping, and testing.

Results:

  1. Centralized product and design decision log, to lock the direction moving forwards, and to inform future use upon product iteration,
  2. Created a few components and patterns that ready to use and develop.
  3. Components created for general usage for example are the Progress Pattern, Courier Selection List, and Product Item List.
  4. Iteration checklist and final results for the checkout design based on the testing results.
  1. Present the new checkout design to all involved product squads (we call it a roadshow) to  achieve a holistic experience by minimizing miscommunication between products.
  2. Crafting the higher fidelity design, proposing new components and pattern to support business objectives and user goals,
  3. Chip in on constructing research questions to ask and as an observer during usability testing,
  4. Iterate the checkout design based on the testing results.

2. Product Design Problems

2.1. Adjusted Flow for Item Confirmation

On previous Checkout, the transaction created a moment after the user move to the payment selection page.

This is not fair for the user that has an intent to open a payment page to check the available payment method selection. Also this will resulting in a technical debt that affecting the metrics.  

This approach harming the metrics that indirectly stated that: for all users that had moved to the next page, they already made the decision to pay the products. But in reality, it does not.

Due to this approach, user experience is being sacrificed. They cannot edit, or change their items after they were visiting the payment page. This will led to increasing customer contact due user complaints.

So what we do is to move the transaction creation process at the end of the flow to mimic the real purchasing journey of our users.

2.2. Recommended Payment Method Section

Current product behavior is auto selecting last used payment method by our users. But this experience is only available on the mobile app. Hence, inconsistencies occur between mobile and desktop experience.

Inconsistency in design will resulting in more thinking process by users when switching platform, and hard to manage the product experience for future improvements.

We want to make them consistent, but there is a challenge: If we always select user last payment method to use easily, how can we give exposure to other promoted payment method that give user advantage without sacrificing the usability aspect?

What we do:

  1. Identify the characteristics of our payment method so we can understand on how we can group and ordering the payment method without harming business goal.
  2. To improve the exposure for promoted payment method, create a separate group that have a higher priority that shows on top of the screen.
  3. To minimize user thinking process, we use the space for promoted payment method, and last used payment method since buyer that successfully paid their product, also tend to purchase again using the same method.

Selected Contribution to the Design System

1. Courier Selection Pattern, Local Component

This new pattern is locally use for a specific checkout purpose: to enable user select courier preferences by duration easily. We incorporate a recommendation pattern to support business objective by giving courier selection that has more benefit to the user.

2. Stepper Progression, Local Component

The purpose is to give user clear navigation on current page, give expectation on what to do next, and how much step they need to take.

Lesson Learned

1. Courier Selection Pattern, Local Component

  1. Pre-meeting with the internal squad first is very helpful to get buy-in from the squad. By involving other squad members early in the work process, it will help smoothing communication on design proposals,
  2. Always regularly providing updates to other related squads to be able for keeping the project timeline inline,
  3. Sharing the testing results with the internal squad before the development phase helps all team members to empathize and have a deeper understanding of product work. As a result, the feedback given will be always on point,
  4. Financial costs in 3rd party implementation need to be considered better. This can resulting in increased costs incurred due to design decisions that are not supported by in-depth knowledge of how the API of the implemented system works.

Product Design Team:

Back To Top