User Experience Guide

Learn about how to support recommended patterns for user flows.

User Flows

Account creation flow

Creating an account

When users create an account, the Dapper signup and login screens appear as a pop-up (640px * 760px). Users can create their account with both an email and password and Google authentication. There is no email verification or MFA required for setting up an account.

When creating a call-to-action button, we recommend using clear language such as “sign up” or “log in” rather than “start” to avoid confusion. Users without a Dapper account need to create one before they can purchase an NFT. We recommend using “Dapper” in your call-to-action so the pop-up doesn't surprise users.

Initiating the account

The Initiate Dapper account screen appears as a pop-up. Users will need to initiate their Dapper account for your specific dApp before they make their first purchase (this is a one-time requirement).

Checkout flow

Checking out

When a user makes a purchase, the Dapper checkout window appears in a pop-up. Acceptable payment methods are Dapper Balance, credit cards, and cryptocurrencies. We recommend payments in that order for the follow reasons:

If the value of the item is less than their current Dapper Balance, then the Dapper Balance is the recommended payment method.
If the value of the item is less than $2,000 USD, then a credit card is the recommended payment method.
Crypto payments are not yet supported with Flow Client Library). Users can purchase Dapper Balance with crypto (in the Dapper account app) and then used that increased Dapper Balance on 3rd party marketplaces.

Post-checkout

The Dapper checkout window will close automatically after a purchase is completed. Auto-close is also fine. We strongly recommend a “Purchase Confirmation” or “Summary” screen to give users confirmation of their purchase.

Transaction signing flow

Signing transactions

The Dapper transaction screen appears as a pop-up. Dapper supports listings for NFTs for sale and the removal of listings. Dapper provides the following metadata to the user so that is always clear what NFT they are putting up for sale:

NFT name
NFT image
Listing price
A brief description

Navigating to Dapper flow

Clear PATH/CTA to account app

Purchases and sales are recorded in the Dapper account app on the home page. Detailed information like payment method, date/time, and fees are provided.

Dapper Account App

Activity History

Purchases and sales are recorded in the Dapper account app on the home page. Detailed information like payment method, date/time, and fees are provided.