Product Design
Designing a Web2.5 Checkout Experience
Web3 could be the solution for a much cleaner, universal sign-in and checkout experience for the modern web —
but to get to that state, a solution to bridge the gap is needed first to convert new Web3 users into Web3 natives.
Confidential information have been redacted from this case study.
All opinions presented are my own and does not reflect the views of Mojito.
The Challenge
Onboarding New Users into Web3
One of the main challenges for this project was to create a seamless checkout experience that would enable new
Web3 users to successfully purchase an NFT.
Initially if you are a new Web3 user, this involves creating your own wallet via a provider like Metamask,
adding funds to that wallet through an exchange, purchasing the item in the marketplace and signing a smart contract
confirming your purchase on top of paying for gas to confirm the transaction before you get your item delivered to your wallet.
Explorations
Web2 Patterns for Web3
Before the payments mixer was developed, Mojito processed Web2 and Web3 payments separately — with Web3 sales involving high-value limited edition
items processed manually to ensure that tokens are sent to the right wallets. I designed the earlier versions of the consolidated Web2 and
Web3 checkout or what we call the "payment mixer" to be as fairly similar to Web2 checkout patterns except at the end of the payment flow, the users
items are delivered to a multi-sig wallet.
“Before the payments mixer was developed, Mojito processed Web2 and Web3 payments separately — with Web3 sales involving high-value limited edition
items processed manually to ensure that tokens and funds are sent to the right wallets.”
Why Multi-sig?
New users are automatically provided a multi-sig wallet where their purchased item is delivered to allow Mojito and the business to provide support for new users.
We discovered that new users found it difficult to initially work with the decentralized nature of Web3 resulting to loss of funds from incidents like sending to
the wrong wallet address or even falling victim to scams that steal their tokens.
Task
Enter Web 2.5
Combining these existing versions and designing them to support business and regulatory requirements led to the design of a Web 2.5 checkout experience
that aims to bridge the gap between a tried and tested Web2 flow to help users become more acquainted with Web3.
This helps onboard users into the space with controlled exposure to complexity, errors, and threats from bad actors in the space who aim to take advantage
of this transitory period.
Action
White-label Plug and Play
For a ”plug-and-play” approach, it was important to design a checkout that allows our users to choose between several payment channels that works for their
business. We designed the payments mixer to be customizable, allowing our clients to choose from different payment options from known Web2 channels to
partner Web3 payment integrations.
Results
Scalable Integrations
With the different type of businesses coming in with varying regulatory and payment method requirements, it became clear that the tabbed
approach to design would not scale well. Our Senior Designer stepped in and redesigned the payment option selection to allow our clients
to choose which methods they support and provide their clients with the options in an easy to access manner.
Team
Melvin Alvarez, Tiffany Young, Aimee Regur, Ionnix Design
