Checkout, Where Users Decide to Continue - or Walk Away.
Checkout, Where Users Decide to Continue - or Walk Away.




Role
Product Designer
Platform
Desktop and Mobile Web
Timeline
January - February 2024
Teams
Product Manager
⛳️ Overview
⛳️ Overview
In digital commerce, a "pause / freeze" moment is dangerous. It is the split second where a user decides to trust you or close the tab. At FLIK, our conversion rate was hovering below 13%, lagging far behind the 35% industry standard. Users were freezing at the critical moment of payment—not because of technical bugs, but because of doubt. I diagnosed this "Hesitation Gap" and re-architected the flow to restore confidence.
In digital commerce, a "pause / freeze" moment is dangerous. It is the split second where a user decides to trust you or close the tab. At FLIK, our conversion rate was hovering below 13%, lagging far behind the 35% industry standard. Users were freezing at the critical moment of payment—not because of technical bugs, but because of doubt. I diagnosed this "Hesitation Gap" and re-architected the flow to restore confidence.



😎 About the Product
😎 About the Product
FLIK is a unified digital commerce platform that empowers merchants to manage their entire sales lifecycle, from transaction to payment, in one system. The checkout flow is the engine of this platform. It is the final, critical step where merchant effort converts into revenue.
FLIK is a unified digital commerce platform that empowers merchants to manage their entire sales lifecycle, from transaction to payment, in one system. The checkout flow is the engine of this platform. It is the final, critical step where merchant effort converts into revenue.
🍀 The Evaluation
🍀 The Evaluation
To ensure this redesign was driven by data rather than assumption, I structured the project as a rigorous "Compare and Contrast" study. I didn't just want to improve the design; I wanted to measure the delta of improvement.
To ensure this redesign was driven by data rather than assumption, I structured the project as a rigorous "Compare and Contrast" study. I didn't just want to improve the design; I wanted to measure the delta of improvement.



Phase 1: The Baseline (As-Is):
I audited the existing flow to identify drop-off causes and established quantitative (System Usability Scale) and qualitative (Usability Testing) baselines.
Phase 1: The Baseline (As-Is):
I audited the existing flow to identify drop-off causes and established quantitative (System Usability Scale) and qualitative (Usability Testing) baselines.
Phase 2: The Intervention (Design):
I synthesized those insights into a redesign grounded in three pillars, Transparency, Hierarchy, and Action, ensuring every change addressed a Phase 1 user pain point.
Phase 2: The Intervention (Design):
I synthesized those insights into a redesign grounded in three pillars, Transparency, Hierarchy, and Action, ensuring every change addressed a Phase 1 user pain point.
Phase 3: The Validation (To-Be):
Finally, I re-tested the new design using the exact same methodology to ensure a fair, apples-to-apples comparison of the impact.
Phase 3: The Validation (To-Be):
Finally, I re-tested the new design using the exact same methodology to ensure a fair, apples-to-apples comparison of the impact.
🧩 Phase 1: The Baseline
🧩 Phase 1: The Baseline
With the conversion rate stuck below 13%, we knew users were walking away. My hypothesis was that clarity issues were eroding trust at the final hurdle.
With the conversion rate stuck below 13%, we knew users were walking away. My hypothesis was that clarity issues were eroding trust at the final hurdle.



🧠 The Method
🧠 The Method
I deployed a mixed-method strategy to capture both the what and the why:
Usability Testing (UT): I observed 5 participants in real-time to pinpoint exactly where the "freeze" happened.
SUS + Open-Ended Feedback: I surveyed 35 respondents using the standard System Usability Scale.
Heuristic Evaluation: I audited the screens against standard usability principles.
I deployed a mixed-method strategy to capture both the what and the why:
Usability Testing (UT): I observed 5 participants in real-time to pinpoint exactly where the "freeze" happened.
SUS + Open-Ended Feedback: I surveyed 35 respondents using the standard System Usability Scale.
Heuristic Evaluation: I audited the screens against standard usability principles.
🔍 The Discovery
🔍 The Discovery
The data confirmed a fracture in the experience.
The Score: The baseline SUS hovered in the mid-60s, indicating only "marginal" usability.
The Voice: The open-ended responses revealed the root cause. Users weren't confused by the interface; they were anxious about the money. Quotes like "Takut ada biaya tambahan yang belum kelihatan" (I'm afraid of hidden costs) proved that our lack of transparency was killing confidence.
The "Cold Start" Problem (Heuristic Analysis): Beyond user testing, I conducted a heuristic evaluation and identified a violation of "Internal Locus of Control." First-time users were dropped into the flow with zero guidance. Because they didn't understand the system's logic immediately, they felt the interface was controlling them, rather than the other way around.
The data confirmed a fracture in the experience.
The Score: The baseline SUS hovered in the mid-60s, indicating only "marginal" usability.
The Voice: The open-ended responses revealed the root cause. Users weren't confused by the interface; they were anxious about the money. Quotes like "Takut ada biaya tambahan yang belum kelihatan" (I'm afraid of hidden costs) proved that our lack of transparency was killing confidence.
The "Cold Start" Problem (Heuristic Analysis): Beyond user testing, I conducted a heuristic evaluation and identified a violation of "Internal Locus of Control." First-time users were dropped into the flow with zero guidance. Because they didn't understand the system's logic immediately, they felt the interface was controlling them, rather than the other way around.
🎨 Phase 2: The Intervention
🎨 Phase 2: The Intervention
To bridge the gap between our 15% reality and the 35% industry standard, I moved from diagnosis to execution. I implemented three targeted interventions designed to prioritize clarity and reduce the cognitive load at the moment of commitment.
To bridge the gap between our 15% reality and the 35% industry standard, I moved from diagnosis to execution. I implemented three targeted interventions designed to prioritize clarity and reduce the cognitive load at the moment of commitment.



🫅 The Persona
🫅 The Persona
To keep the design focused, I synthesized our observations into a primary user archetype:
The Anxious Buyer: A value-conscious user who has already decided to buy but needs constant reassurance.
The Goal: Complete the transaction quickly.
The Barrier: "The Hesitation Gap"—a fear of hidden costs or making a mistake at the final click.
1️⃣ Deferring the Decision (Entry Point)
1️⃣ Deferring the Decision (Entry Point)
The Friction (As-Is):
First-time users were hit with a wall immediately: "Login or Guest?" This forced them to make an account management decision before they had even reviewed their order, creating early cognitive overload.
The Fix (To-Be):
I flipped the flow. I simplified the entry to allow users to review items and costs first, deferring the authentication decision until they were already mentally committed to the purchase.
The Fix (To-Be):
I flipped the flow. I simplified the entry to allow users to review items and costs first, deferring the authentication decision until they were already mentally committed to the purchase.



2️⃣ Radical Transparency (Payment Selection)
2️⃣ Radical Transparency (Payment Selection)
The Friction (As-Is):
Users were forced to do mental math. Payment methods lacked context on additional fees and weren't ordered by usage, forcing users to click back and forth to compare costs. This lack of clarity was a primary driver of hesitation.
The Friction (As-Is):
Users were forced to do mental math. Payment methods lacked context on additional fees and weren't ordered by usage, forcing users to click back and forth to compare costs. This lack of clarity was a primary driver of hesitation.
The Fix (To-Be):
I redesigned the selection interface to be explicit. Payment methods are now grouped by common usage with additional costs clearly displayed upfront. No surprises at the final click.
The Fix (To-Be):
I redesigned the selection interface to be explicit. Payment methods are now grouped by common usage with additional costs clearly displayed upfront. No surprises at the final click.



3️⃣ Actionable Guidance (Feedback)
3️⃣ Actionable Guidance (Feedback)
The Friction (As-Is):
When issues arose or information was presented, the system provided passive text (informational messages), leaving users unsure of the next step.
The Friction (As-Is):
When issues arose or information was presented, the system provided passive text (informational messages), leaving users unsure of the next step.
The Fix (To-Be):
I turned feedback into action. Informational text was replaced with specific directives (e.g., "Ubah"), turning a dead-end into a clear path forward.
The Fix (To-Be):
I turned feedback into action. Informational text was replaced with specific directives (e.g., "Ubah"), turning a dead-end into a clear path forward.



4️⃣ Step by Step Introduction (Bonus)
4️⃣ Step by Step Introduction (Bonus)
The Friction:
New users/first-time visitors often abandoned the cart simply because the flow felt unfamiliar. The "Cold Start" left them unsure of the sequence of actions (e.g., where to input a voucher or how to change an address).
The Friction:
New users/first-time visitors often abandoned the cart simply because the flow felt unfamiliar. The "Cold Start" left them unsure of the sequence of actions (e.g., where to input a voucher or how to change an address).
The Fix:
I introduced a "Just-in-Time" coachmark system. Instead of a generic tutorial, these contextual overlays appear only for first-time users, guiding them through critical steps. This restores their "Internal Locus of Control," ensuring they feel capable and in charge of the transaction from the very first click.
The Fix:
I introduced a "Just-in-Time" coachmark system. Instead of a generic tutorial, these contextual overlays appear only for first-time users, guiding them through critical steps. This restores their "Internal Locus of Control," ensuring they feel capable and in charge of the transaction from the very first click.



⚖️ Phase 3: The Validation
⚖️ Phase 3: The Validation
To validate whether the redesign truly closed the "Hesitation Gap," I re-evaluated the new flow using the exact same mixed-method approach as the baseline. The goal was a strict apples-to-apples comparison.
To validate whether the redesign truly closed the "Hesitation Gap," I re-evaluated the new flow using the exact same mixed-method approach as the baseline. The goal was a strict apples-to-apples comparison.



1️⃣ The Quantitative Leap (SUS)
1️⃣ The Quantitative Leap (SUS)
The data showed a dramatic shift in user sentiment.
Before: The System Usability Scale (SUS) score hovered in the mid-60s (Marginal).
After: The score skyrocketed to the high-90s (Excellent).
The Meaning: This wasn't just a "better look"; it was a fundamental shift in perceived usability and trust.
The data showed a dramatic shift in user sentiment.
Before: The System Usability Scale (SUS) score hovered in the mid-60s (Marginal).
After: The score skyrocketed to the high-90s (Excellent).
The Meaning: This wasn't just a "better look"; it was a fundamental shift in perceived usability and trust.
2️⃣ The Behavioral Shift
2️⃣ The Behavioral Shift
The numbers were backed by behavior. In the second round of usability testing, the "freeze" was gone.
Users moved through the payment confirmation with zero back-navigation.
The anxious pauses were replaced by smooth, linear progression.
The User Voice: One participant summarized the win perfectly: "Langkahnya jelas, ada informasi extra fee untuk setiap payment method, jadi nggak ragu pas bayar." (The steps are clear, there is an information about extra fee for each payment method, so I don't hesitate when paying).
The numbers were backed by behavior. In the second round of usability testing, the "freeze" was gone.
Users moved through the payment confirmation with zero back-navigation.
The anxious pauses were replaced by smooth, linear progression.
The User Voice: One participant summarized the win perfectly: "Langkahnya jelas, ada informasi extra fee untuk setiap payment method, jadi nggak ragu pas bayar." (The steps are clear, there is an information about extra fee for each payment method, so I don't hesitate when paying).



🚀 Closing: The Business Impact
🚀 Closing: The Business Impact
This project proved that our low conversion rate wasn't a technical failure, it was a trust failure. By validating this design with a 90+ SUS score, I delivered a solution ready for A/B testing, positioned to lift our conversion rate from 15% toward the 35% industry standard. I demonstrated that in fintech, clarity is the highest form of conversion optimization.
This project proved that our low conversion rate wasn't a technical failure, it was a trust failure. By validating this design with a 90+ SUS score, I delivered a solution ready for A/B testing, positioned to lift our conversion rate from 15% toward the 35% industry standard. I demonstrated that in fintech, clarity is the highest form of conversion optimization.
Thank you for reading and have a nice day! 😎🤙
Thank you for reading and have a nice day! 😎🤙
Thank you for reading and have a nice day! 😎🤙