PRODUCT DESIGN
SPRITZ PRODUCT
Spritz is an app that enables everyday financial tasks directly from your crypto wallet. Spritz users can pay off their bills, send money to a friend, or load up a pre-paid card & use it anywhere online or in person at a shop or cafe, all using crypto.
I worked with a global team of builders to design & launch the Spritz app. I created all front-end designs, component library, & custom icons & illustrations for the web app, as well as provided design direction for the subsequent mobile app.
PAY WITH SPEND BUY OFF-RAMP
PAY WITH SPEND BUY OFF-RAMP
CRYPTO
SET UP + FUND SPRITZ CARD
REQUIREMENTS
As a user, I can:
-
Create one virtual card.
-
See my card details: Securely display full number, exp, cvv.
-
See the current balance on my card.
-
Fund the balance of my card.
-
See a history of crypto transactions that were executed to fund my cards.
LIMITATIONS
-
Cannot delete card.
-
Cannot view or download spending transactions.
-
Cannot edit name, address, phone # on card.
FUTURE WORK
As a user, I can:
-
See a list of spending transactions on my card.
New user empty state; User has not passed KYC
New user empty state; User has passed KYC
User has added a Spritz Card
User connects their wallet
User funds a Spritz Card
Funding summary
Spritz Card has been funded
Funding activity transaction details
SET UP + FUND SPRITZ CARD
REQUIREMENTS
As a user, I can:
-
Create one virtual card.
-
See my card details: Securely display full number, exp, cvv.
-
See the current balance on my card.
-
Fund the balance of my card.
-
See a history of crypto transactions that were executed to fund my cards.
LIMITATIONS
-
Cannot delete card.
-
Cannot view or download spending transactions.
-
Cannot edit name, address, phone # on card.
FUTURE WORK
As a user, I can:
-
See a list of spending transactions on my card.
New user empty state; User has not passed KYC
New user empty state; User has passed KYC
User has added a Spritz Card
User connects their wallet
User funds a Spritz Card
Funding summary
Spritz Card has been funded
Funding activity transaction details
UX IMPROVEMENT: TRANSPARENCY OF FEES
PROBLEM
Users are confused about whether or not Spritz fees are included in the amount that they are paying or off-ramping.
For example, a user might pay their credit card bill by entering in the total amount owed, but will be short a small amount if they did not account for the Spritz transaction fees.
Users either forget to account for the fees, find it difficult to calculate the fees to include -- Spritz fees are based on a user’s total transactions each month -- or may not even be aware that there are fees.
SOLUTION
Users are given the option to include or not include fees in the amount that they enter to pay or off-ramp. Visual cues indicate to the user which state has been selected.
This solution makes it clear to the user what the transaction fee will be & makes it easy for the user to determine how much they want to pay or off-ramp while taking the fee amount into account.
When fees ARE NOT included in the amount entered:
-
Payment amount input field reads: “Your [credit card] receives $X.XX after fees”
-
Input box & input text colors are purple.
-
Payment details expands to clearly indicate the payment amount (this will be the same amount entered in the payment amount input field above), Spritz fee, & total amount the user pays or off-ramps.
When fees ARE included in the amount entered:
-
Payment amount input field changes to: “You send us $X.XX including fees”
-
Input box & input text colors change to green.
-
Payment details updates accordingly to clearly indicate the payment amount, Spritz fee, & total amount the user pays or off-ramps (this will be the same amount entered in the payment amount input field above).
UX IMPROVEMENT: TRANSPARENCY OF FEES
PROBLEM
Users are confused about whether or not Spritz fees are included in the amount that they are paying or off-ramping.
For example, a user might pay their credit card bill by entering in the total amount owed, but will be short a small amount if they did not account for the Spritz transaction fees.
Users either forget to account for the fees, find it difficult to calculate the fees to include -- Spritz fees are based on a user’s total transactions each month -- or may not even be aware that there are fees.
SOLUTION
Users are given the option to include or not include fees in the amount that they enter to pay or off-ramp. Visual cues indicate to the user which state has been selected.
This solution makes it clear to the user what the transaction fee will be & makes it easy for the user to determine how much they want to pay or off-ramp while taking the fee amount into account.
When fees ARE NOT included in the amount entered:
-
Payment amount input field reads: “Your [credit card] receives $X.XX after fees”
-
Input box & input text colors are purple.
-
Payment details expands to clearly indicate the payment amount (this will be the same amount entered in the payment amount input field above), Spritz fee, & total amount the user pays or off-ramps.
When fees ARE included in the amount entered:
-
Payment amount input field changes to: “You send us $X.XX including fees”
-
Input box & input text colors change to green.
-
Payment details updates accordingly to clearly indicate the payment amount, Spritz fee, & total amount the user pays or off-ramps (this will be the same amount entered in the payment amount input field above).
ICONS & ILLUSTRATIONS
ICONS & ILLUSTRATIONS
SPRITZ NATIVE APP
