* Made this in less than 1 day, so the portofolio is far from perfect. _____ Ask me for further details since i still need more time in making it :)
COD (Cash on Delivery) | 2019 - 2020 | Bukalapak
Adding COD (Cash on Delivery) as a payment method ______ across Bukalapak mobile app & website.
About Bukalapak
One of the biggest e-commerce in Indonesia. Their platform are: e-commerce Website, Mobile App, & Mitra App. I worked here since Oct 9th 2017 - Dec 18th 2020.
My Role
Solo designer in Logistics team. Buyer & seller side. Did an end-to-end design project. Weekly sync w/ criss cross team: from discovery to shipment & return page team.
Logistics Team
2 PMs (Brurce Abraham, Adi Purwanto). 1 APM (Thoriq Prima). 1 UX Researcher (M. Randika). 1 Copywriter (Widya Utami). Many engineers across Bukalapak.
Methods
UX Interview, User Journey, IA, Wireframe, Prototype, Usability Testing, Team Workshop & Weekly Sync.
Tools
Figma, Miro, Marvel app.
Research & Design Timeline
4 months in 2019. Then 3 months in 2020.
Paralel with other projects.
PROBLEM
1 How to educate new payment method to buyer?
2 Make sure the seller & buyer flow is well connected.
3 Make a COD return flow.
Person Challenges:
1 Work alone across a huge scope (one product designer works with five engineering team).
2 Work in paralel (3 projects at the same time. 2 big, 1 small in 2 weeks, etc).
3 Different team office location (WFO).
4 Engineering constraints.
All of my work as a Product Designer in Bukalapak includes working on a Corner Case (Negative / Error Screen) Flow. Not only the Happy Flow.
So it all connects. Cause sometimes when user are facing a Corner Case, they need a follow up Link / Button or something else to make the user stay in the loop.
DESIGN PROCESS
Making sure the COD flow is easy, smooth, understandable to buyer within C-D segment, by doing these:
- Gather context about what kind of COD from the stakeholder, which turns out to be adding COD as a payment method across Bukalapak mobile app & website.
- Mapping touch point & timeline estimation.
- UX Interview before and after product launch.
- User Journey, IA to gather the needs & placed correctly.
- Make Prototype & UAT to make sure the development created the same view as the design.
- Whitelist COD buyer to test if the design & development works well.
- Put a tracker on the Checkout page, to see how many user back off after we explained how COD works at Bukalapak. It also means we've reduced some user that haven't understand that COD should be paid first when the courier comes. They can't open the goods first.
So, the flow would be like this:
Buyer discover products > See product details > Add to cart > Checkout > Seller receive order > Seller process order > Seller send the products > Courier pick up > COD Payment when courier comes > Buyer pay > Buyer can open the products > Buyer click finish on the App > Seller get the money.
** If buyer wants to return, they take the products to the counter, then return it > Products arrive at seller > Seller confirm > Buyer get the refund money.
How I applied the Journey on Hi-Fidelity / Visual Design:
Some of the Visual Designs, up close:
Making sure the seller flow is also connects very well, within the limited working time:
- UX Interview before and after product launch.
- Apply terms & conditions to the seller: there'll be admin fee for the buyer, but it's the COD courier's policy to take the return fee.
- Make Prototype & UAT to check if it meet the seller needs.
- Whitelist COD seller to test if their flow are easy to use.
FINAL OUTPUT & IMPACT
A well received product: COD paid transactions has been increased since the beginning of the product launch (2020). At that time, it's not even 100% roll out on Apps, but already achieved the user transaction goal. Today, failed-to-send items are also at a very small rate, <2%.
Below is the live / prototype version of COD in Bukalapak:
"As a Product Designer, we value the process, the user and the business. That's how we create a solution, by finding a sweet spot between them."
---