Case Study: Nifty Football Delivers State-of-the-Art Dapp UX on Mobile and Desktop
Nifty Football is a- Ethereum powered football — or ‘soccer’ for those of you in the US and Canada — crypto-collectible trading card game with provably scarce assets. The team behind Nifty Football is experienced in the space, having previously worked at KnownOrigin, CryptoKaiju, and BlockCities.
The team’s deep understanding of how to build successful, engaging Dapps led them to focus on providing a clear, easy-to-understand user experience from the outset. Look no further than the Dapp’s streamlined front-end to see how simple it is to use. After connecting with the Blocknative team, the Nifty Football leadership realized that they had an immediate opportunity to extend this clarity and simplicity into their onboarding and transaction flows. According to Andy Gray, the co-founder of Nifty Football:
“A full 50% of Nifty Football transactions happen on mobile. We wanted to help our customers understand the status of their transactions — regardless of their device of choice. By providing real-time visibility at every step of the transaction, Blocknative Assist improves our user experience at the most critical moments of engagement.”
The experience begins when users land on the site. If they’re on an unsupported browser; Nifty Football and Assist.js will direct users to a Web3-compatible browser:
When users access Nifty Football without wallet installed, Blocknative Assist guides them through — and verifies their progress in real-time! — the process of wallet installation, logging in, authorizing Nifty Football, selecting the correct network, and more:
This ensures that as many users as possible are ready and able to transact, all in an effort to maximize the active user base and transaction volume.
Whenever users initiate a transaction, Blocknative Assist is there to help them understand what’s going on with each and every step of the transaction, from Waiting for Approval to Pending to Confirmed. And with easy-to-understand alerts that appear in line with the Dapp itself, users are no longer forced to dig through wallet settings or navigate away to a third-party block explorer:
Critically, these transaction notifications work just as well on mobile Dapp browsers:
The combination of a clean user interface, onboarding support, and transaction notifications puts Nifty Football well-ahead of the pack in Dapp usability. Want to experience it for yourself? Go buy some cards to experience Nifty Football’s industry-best UX in action.
Major Improvements to Nifty’s Transaction Usability Audit (TUXA) Score
By deploying Assist.js into their Dapp, Nifty Football drove a major improvement in their Dapp Transaction Usability Audit Score — now ranking among the best Dapps that we have encountered on Mainnet. You can quickly assess your TUXA score with Blocknative’s recently open-sourced Audit Template.
Integrating Assist.js into Nifty Football
The team at Nifty Football chose to engage Blocknative to deploy Assist.js via our ‘white glove’ integration service. We kicked things off with a private channel on Blocknative’s Discord so that everyone involved, including our CTO and integration team, could collaborate fluidly. Deploying Blocknative Assist requires just a handful of steps:
- Create an API Key: This uniquely identifies your Dapp and enables Performance Analytics
- Initialize Blocknative Assist: Add Assist.js to the first page of your Dapp.
- Initialize the library.
- Call Onboard.
- Decorate your contract: This adds the Transaction Awareness capabilities described above.
And that’s it, after 5 steps Nifty Football was up and running with Blocknative Assist. The initial deployment took our team about a day to set up. Along the way, we received useful product feedback and invested additional cycles to design and implement several of the features included in our recent Assist.js 0.8 release. We’re excited to be playing a part in helping Nifty Football and the broader Dapp ecosystem improve Web3’s UX.
Want to improve your Dapp’s transaction UX?
If you want to connect with the team, join our Discord — which contains free Downloads like our Dapp UX Audit Template. You can also sign up for a free account at Blocknative.com and begin integrated Assist.js into your Dapp in minutes.
Originally published at https://blog.blocknative.com.