User Experience Guide
User Experience Guide

User Experience Guide

User Experience Guide

icon
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.

image

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).

image

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.
image

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.

image

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
image

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.

image

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.

image

NFT inventory

The NFL inventory houses all NFTs purchased with Dapper. Clicking on each tile will reveal additional details about each NFT.

image

Resources

Logos

Below are some examples of how 3rd party logos are featured in Dapper.

image
image

Sample marketing assets

Below are some examples of marketing assets you can leverage. Please contact your account manager for more information.

image
image