Back to all projects
Brava: Buy Perks
Brava: Buy Perks
Easily top up perks to gift your employees.
Team
Boluwatife Olasupo, UX Designer
Ayo Moses, Product Owner
Role
Feature Design
Context
Context
During a review of the perks purchase flow, I identified several friction points affecting clarity, cognitive load, and conversion confidence. While the experience was functionally okay, it required users to perform mental calculations, interpret ambiguous labels, and process dense information before committing to payment.
The goal was simple: increase conversion by improving clarity, reducing friction, and reinforcing trust, without adding unnecessary complexity.
During a review of the perks purchase flow, I identified several friction points affecting clarity, cognitive load, and conversion confidence. While the experience was functionally okay, it required users to perform mental calculations, interpret ambiguous labels, and process dense information before committing to payment.
The goal was simple: increase conversion by improving clarity, reducing friction, and reinforcing trust, without adding unnecessary complexity.
Problem
Problem
Cognitive Load During Input
Users had to mentally calculate their payable total after entering a perk amount. This introduced avoidable friction at a critical decision point, and created confusion when totals scaled to large numbers like 5,000 = 5,000,000.
Unclear Field Labeling
“Perks amount” did not clearly communicate whether it referred to quantity or monetary value.
Transactional Emotional Tone
The interface felt purely functional. There were no trust reinforcements or emotional cues to reduce hesitation before payment.
Layout and Hierarchy Issues
The exchange rate visibility was inconsistent.
The legal copy competed with the CTA.
The primary action lacked emphasis despite being the only path forward.
Long explanatory text increased cognitive load.
Cognitive Load During Input
Users had to mentally calculate their payable total after entering a perk amount. This introduced avoidable friction at a critical decision point, and created confusion when totals scaled to large numbers like 5,000 = 5,000,000.
Unclear Field Labeling
“Perks amount” did not clearly communicate whether it referred to quantity or monetary value.
Transactional Emotional Tone
The interface felt purely functional. There were no trust reinforcements or emotional cues to reduce hesitation before payment.
Layout and Hierarchy Issues
The exchange rate visibility was inconsistent.
The legal copy competed with the CTA.
The primary action lacked emphasis despite being the only path forward.
Long explanatory text increased cognitive load.
UI BEFORE
UI BEFORE
My Approach
My Approach
Instead of treating this as a UI cleanup, I reframed it around three core principles:
Clarity Before Conversion
Conversion does not improve with persuasion alone — it improves with certainty. I:
Made the exchange rate explicit and always visible (e.g., 1 Perk = N1,000).
Removed the unnecessary “.00” decimals.
Recommended removing phrases like “exclusive discount on us” since the value was already established elsewhere.
Immediate Feedback to Reduce Mental Math
To eliminate cognitive friction, I:
Added a live price preview beneath the input field (e.g., Total: N10,000 when a user types “10”).
Recommended a dynamic CTA that updates based on selection (e.g., “Pay N5,000,000” instead of a static “Proceed to Payment”).
Guided Input to Increase Conversion
To reduce friction in quantity selection, I:
Added placeholder examples (e.g., “Enter perks amount, e.g 10,000”).
Recommended preset perk chips (5,000, 10,000, 20,000) for faster selection.
Reduce Cognitive Load
The long explanatory text was condensed into:
A short summary
A “Learn more” link
Emotional Reinforcement
From a user psychology perspective, the flow felt transactional. At the payment stage, hesitation is emotional — not informational.
To address this, I recommended:
Microcopy like “Cancel anytime” below the recurring billing toggle.
Moving legal text below the primary action.
Instead of treating this as a UI cleanup, I reframed it around three core principles:
Clarity Before Conversion
Conversion does not improve with persuasion alone — it improves with certainty. I:
Made the exchange rate explicit and always visible (e.g., 1 Perk = N1,000).
Removed the unnecessary “.00” decimals.
Recommended removing phrases like “exclusive discount on us” since the value was already established elsewhere.
Immediate Feedback to Reduce Mental Math
To eliminate cognitive friction, I:
Added a live price preview beneath the input field (e.g., Total: N10,000 when a user types “10”).
Recommended a dynamic CTA that updates based on selection (e.g., “Pay N5,000,000” instead of a static “Proceed to Payment”).
Guided Input to Increase Conversion
To reduce friction in quantity selection, I:
Added placeholder examples (e.g., “Enter perks amount, e.g 10,000”).
Recommended preset perk chips (5,000, 10,000, 20,000) for faster selection.
Reduce Cognitive Load
The long explanatory text was condensed into:
A short summary
A “Learn more” link
Emotional Reinforcement
From a user psychology perspective, the flow felt transactional. At the payment stage, hesitation is emotional — not informational.
To address this, I recommended:
Microcopy like “Cancel anytime” below the recurring billing toggle.
Moving legal text below the primary action.
UI After
UI After
Structural Reframe: The Three-Zone Model
Structural Reframe: The Three-Zone Model
I reorganized the experience into three clear zones:
Amount
Visible exchange rate
Input field
Perk chips
Live price preview
Subscription (Optional)
Clear toggle state
Supporting microcopy
Trust reinforcement
CTA
Center-aligned primary action
Dynamic pricing label
Legal text beneath
I reorganized the experience into three clear zones:
Amount
Visible exchange rate
Input field
Perk chips
Live price preview
Subscription (Optional)
Clear toggle state
Supporting microcopy
Trust reinforcement
CTA
Center-aligned primary action
Dynamic pricing label
Legal text beneath
Impact
Impact
Although these were primarily visual and interaction refinements, they addressed deeper behavioural principles:
Reduced cognitive load
Increased pricing transparency
Removed ambiguity
Anchored commitment through dynamic CTA
Improved emotional safety at checkout
Although these were primarily visual and interaction refinements, they addressed deeper behavioural principles:
Reduced cognitive load
Increased pricing transparency
Removed ambiguity
Anchored commitment through dynamic CTA
Improved emotional safety at checkout
ReflectionS
ReflectionS
The key insight from this iteration was that clarity scales conversion better than urgency tactics.
By making the exchange rate explicit, providing real-time feedback, and reinforcing trust subtly, the flow becomes self-explanatory — and self-convincing.
The key insight from this iteration was that clarity scales conversion better than urgency tactics.
By making the exchange rate explicit, providing real-time feedback, and reinforcing trust subtly, the flow becomes self-explanatory — and self-convincing.