#Figma
#Casestudy
#web
Contra Crypto Payouts
Contra Crypto Payouts
Contra Crypto Payouts
Contra Crypto Payouts
Contra Crypto Payouts
Contra Crypto Payouts
Contra is an Independent-first community and commission-free hiring platform empowering the future of work. We match Independents with flexible opportunities, and Clients with the perfect Independent for any project — from content creation to coding.
Contra is an Independent-first community and commission-free hiring platform empowering the future of work. We match Independents with flexible opportunities, and Clients with the perfect Independent for any project — from content creation to coding.
Contra is an Independent-first community and commission-free hiring platform empowering the future of work. We match Independents with flexible opportunities, and Clients with the perfect Independent for any project — from content creation to coding.
Contra is an Independent-first community and commission-free hiring platform empowering the future of work. We match Independents with flexible opportunities, and Clients with the perfect Independent for any project — from content creation to coding.
Contra is an Independent-first community and commission-free hiring platform empowering the future of work. We match Independents with flexible opportunities, and Clients with the perfect Independent for any project — from content creation to coding.
Contra is an Independent-first community and commission-free hiring platform empowering the future of work. We match Independents with flexible opportunities, and Clients with the perfect Independent for any project — from content creation to coding.
3 months
Timeline
Product Designer
Role
3 months
Timeline
Product Designer
Role
The need for borderless payments
The need for borderless payments
In Contra's previous payments implementation, we only supported payouts for independents with US-based accounts. This is a limitation for opening up the platform. Previous access to payments (via Stripe) is limited to:
US-based users w/ US accounts
Users in 30 countries w/ US accounts via 3rd party
Hypothesis: Borderless payments (crypto) will enable us to support payouts regardless of country of location.
Team: Lead Product Designer (Me), Front-end engineer, Back-end engineer, Product Manager
In Contra's previous payments implementation, we only supported payouts for independents with US-based accounts. This is a limitation for opening up the platform. Previous access to payments (via Stripe) is limited to:
US-based users w/ US accounts
Users in 30 countries w/ US accounts via 3rd party
Hypothesis: Borderless payments (crypto) will enable us to support payouts regardless of country of location.
Team: Lead Product Designer (Me), Front-end engineer, Back-end engineer, Product Manager
Goals & metrics
Goals & metrics
1
Allow clients to pay via crypto
1
Allow clients to pay via crypto
1
Allow clients to pay via crypto
2
Allow Independents to payout via crypto
2
Allow Independents to payout via crypto
2
Allow Independents to payout via crypto
3
Provide users with a way to track their transactions, while consolidating the payment and payout experience.
3
Provide users with a way to track their transactions, while consolidating the payment and payout experience.
3
Provide users with a way to track their transactions, while consolidating the payment and payout experience.
⭐️
Number of users with access to payments
⭐️
Number of Countries supported
⭐️
Crypto payouts (as a percentage of total payouts)
Problem with current user flow
Problem with current user flow
Right now we look at payments and payout as two different things. Currently, when a user starts a project, they proceed with making a payment via Stripe. Once we add additional methods of payment and payouts, we’ll need a wallet/transaction log consolidate all transactions (payments and payouts) that go through the platform.
Right now we look at payments and payout as two different things. Currently, when a user starts a project, they proceed with making a payment via Stripe. Once we add additional methods of payment and payouts, we’ll need a wallet/transaction log consolidate all transactions (payments and payouts) that go through the platform.
Current UI
Explorations
Explorations
As the engineers began building a technical proof-of-concept for the functionality, I simultaneously started to map out user journey with wireframes. The wireframes aimed to validate the solution and facilitate discussions about the feature during user interviews and design critiques, but also helped us prioritize our resources. Some of the key features I focused on was :
Wallet verification and timestamp of withdrawal
Creating a standalone wallet page and showing transactions
As the engineers began building a technical proof-of-concept for the functionality, I simultaneously started to map out user journey with wireframes. The wireframes aimed to validate the solution and facilitate discussions about the feature during user interviews and design critiques, but also helped us prioritize our resources. Some of the key features I focused on was :
Wallet verification and timestamp of withdrawal
Creating a standalone wallet page and showing transactions
After aligning with the engineers on the technical specs, we landed on the following changes ⭐️:
Sticking with USDC for MVP
New UI elements for wallet page (verification from design team that its ready to be used)
Inline address verification + real time data pulled from coinbase API
Persona identity verification
Improvements ⭐️:
Adding in moments of delight via illustrations
Creating a branded experience throughout the app
Integrating chat to obtain user information and instantly provide quote based on input
Improvements ⭐️:
Adding in moments of delight via illustrations
Creating a branded experience throughout the app
Integrating chat to obtain user information and instantly provide quote based on input
Improvements ⭐️:
Adding in moments of delight via illustrations
Creating a branded experience throughout the app
Integrating chat to obtain user information and instantly provide quote based on input
Improvements ⭐️:
Adding in moments of delight via illustrations
Creating a branded experience throughout the app
Integrating chat to obtain user information and instantly provide quote based on input
Improvements ⭐️:
Adding in moments of delight via illustrations
Creating a branded experience throughout the app
Integrating chat to obtain user information and instantly provide quote based on input
Test & findings
Test & findings
We conducted a few tests with a prototype focusing on the flow of adding a crypto wallet as and Independent.
Tests: Usertesting.com Crypto Walkthrough Prototype, Crypto Beta Rollout (25 users)
Users expressed confusion with terminology on the wallet/transaction log
Users were confused with what the status of their payouts were
With both payouts and payments on the transaction log, users expressed the desire for a filter system
We conducted a few tests with a prototype focusing on the flow of adding a crypto wallet as and Independent.
Tests: Usertesting.com Crypto Walkthrough Prototype, Crypto Beta Rollout (25 users)
Users expressed confusion with terminology on the wallet/transaction log
Users were confused with what the status of their payouts were
With both payouts and payments on the transaction log, users expressed the desire for a filter system
Design iteration
Design iteration
To get to the final designs, we went through multiple iterations and refinements while conducting internal dog-fooding sessions as well as external user interviews.
Adding additional guides/tooltips along the entire payment + payout process
Adding moments of delight
The need of a filtering system and payment/payout tracker
To get to the final designs, we went through multiple iterations and refinements while conducting internal dog-fooding sessions as well as external user interviews.
Adding additional guides/tooltips along the entire payment + payout process
Adding moments of delight
The need of a filtering system and payment/payout tracker
Revamped crypto flow with user education and guidance
Revamped transaction log with filters, payment trackers, and call to actions
What we shipped ✓
What we shipped ✓
1
Crypto USDC Payouts:
Payouts via Crypto USDC address (using Coinbase integration); currently for International users only
1
Crypto USDC Payouts:
Payouts via Crypto USDC address (using Coinbase integration); currently for International users only
1
Crypto USDC Payouts:
Payouts via Crypto USDC address (using Coinbase integration); currently for International users only
2
Persona KYC Onboarding
Integrate Persona for KYC process to consolidate UX and fraud management for KYC across all payout methods.
2
Persona KYC Onboarding
Integrate Persona for KYC process to consolidate UX and fraud management for KYC across all payout methods.
2
Persona KYC Onboarding
Integrate Persona for KYC process to consolidate UX and fraud management for KYC across all payout methods.
3
Detailed Transaction Logs
Bolstered transaction log to provide more details on payment status, include actionable error messages, and enable support request directly from transaction
3
Detailed Transaction Logs
Bolstered transaction log to provide more details on payment status, include actionable error messages, and enable support request directly from transaction
3
Detailed Transaction Logs
Bolstered transaction log to provide more details on payment status, include actionable error messages, and enable support request directly from transaction
Conclusion
Conclusion
⭐️
100+ countries with access to payments
⭐️
350% increase in USDC wallet setups
⭐️
Crypto payouts averaging 60%+ amongst all methods
Tools
Tools
Figma
Usertesting.com
