MenuClose
PORTFOLIO
Checkout Page Revamp
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.
UX Designer
Ad-hoc Project, 2019
Before
After
Before and After Revamp
Summary
Objective:
- Focus on aligning key visuals with our Bukalapak new brand language,
- Prioritize high impact usability issues.
Impact:
- Aligned design language with the new brand, across different pages on crucial buyer journey (Homepage, Product Detail, Cart)
- Improvements in product performance such as number of paid transactions, and paid Gross Merchandise Value (GMV)
Challenges
Managing 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.
- Collaboration with project lead and researchers across department is important for better alignment and communication.
Product Design Problems:
- Users are unable to edit the purchased item attribute when buyer in 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.
APPROACH
Managing Project
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.
The results from this phase are:
- Stakeholder maps with their product information such as the success metrics, technical constraint, and concerns for both product and experience aspect,
- Collective product insights both qualitatively and quantitatively to drive design decision. Such as the payment method and courier selection,
- 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,
- List of product cases that can happened because of system error, or possible human mistakes.
- Mapping all intersected product and stakeholders within this product,
- Setting up interview with project stakeholder to get expectation on timeline, objective, and project scope,
- Collecting previous research on checkout to get our existing user insights and pain point when interacting with current checkout process,
- Doing a heuristic analysis on what can be improved in the terms of usability and user interaction from current product,
- Collecting previous product feedback from business perspective, on what should and shouldn’t do to keep in on track with business goals,
- Gathering technical constraint and possible use cases to minimize unhandled user flow.
2. Align and Create
During this phase, I’m involved in the creation process of a higher fidelity design, prototyping, and testing.
The results from this phase are:
- Centralized product and design decision log, to lock the direction moving forwards, and to inform future use upon product iteration,
- Created a few components and patterns that ready to use and develop. Components created for general usage for example are the Progress Pattern, Courier Selection List, and Product Item List.
- Iteration checklist and final results for the checkout design based on the testing results.
- 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.
- Crafting the higher fidelity design, proposing new components and pattern to support business objectives and user goals,
- Chip in on constructing research questions to ask and as an observer during usability testing,
- Iterate the checkout design based on the testing results.
APPROACH
Design Solutions
1. Adjusted Item Confirmation Flow
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. Recommended Payment Method Section
Current product behavior is auto selecting last used payment method by our users. But this is only available on the mobile app.
There is an inconsistency between mobile and desktop experience.This will resulting in more thinking process by users when switching platform, and hard to manage the experience for future improvements.
We want to make them consistent. But, there is a challenge if we do this on desktop:
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 our usability aspect?
What we do were:
- 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.
- To improve the exposure for promoted payment method, create a separate group that have a higher priority that shows on top of the screen.
- 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.
OTHERS
Selected Design System Contribution
1. Courier Selection
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
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
- Rehearsal 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,
- Always regularly providing updates to other related squads to be able for keeping the project timeline inline,
- 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,
- 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.