Dapp Transaction

UX Audit Template

Version 0.5

April 24, 2019

Copyright 2019, Blocknative Corporation

We created a template for

Dapp Transaction UX Audits,

focused on user onboarding and

transaction visibility.*

* Why? Because we want to improve Dapp usage

Copyright 2019, Blocknative Corporation

How to use this Audit Template

  • Make a copy of this read only file in your own Google Drive
    • File → Make a Copy

  • If you don’t use Google Drive:
    • Download as → your favorite file type.

  • Use the Dapp you want to audit and check for each one of the dimensions
    • Pro tip: take screenshots of areas that could be improved!

* Because we’re users too.

Copyright 2019, Blocknative Corporation

Level Set:
Definitions

Copyright 2019, Blocknative Corporation

Definitions: Onboarding and Transactions

Before we dive it, let’s make sure we’re all on the same page about the scope of these audits:

  • Onboarding Support: How well a Dapp helps:
    • 1) new users get set up with Web3 and
    • 2) existing Web3 users ensure they are ready to transact with the Dapp

  • Transaction Support: How well a Dapp provides feedback to a user during the transaction workflow: Approving, Rejecting, Pending, Confirming, Delayed, etc.

Copyright 2019, Blocknative Corporation

Part 1:
Onboarding Support

Copyright 2019, Blocknative Corporation

Onboarding Support Audit

Does your Dapp handle users who…

Score

Criteria

are using mobile devices?

1

1

are on unsupported browsers?

0

1

do not have MetaMask installed?

1

1

have MetaMask locked?

1

1

have Privacy Mode enabled?

0

1

are connected to the wrong network?

1

1

SUBTOTAL

4

7

INDEX

5.7

How we score:

+1 for handling UX scenario correctly

0 for not handling address UX scenario

-1 for handling UX scenario incorrectly

5.7

Copyright 2019, Blocknative Corporation

Notes:

Onboarding Support: Mobile Device

Overview:

  • Insert an overview of what you’re detailing

Assessment:

  • Provide specific feedback about what went well (and what didn’t!)

How to test: Navigate to the Dapp from your phone’s browser (Brave / Chrome) and attempt to transact. Screenshot common errors (like being directed to web based browsers) and upload them here.

Use highlights and callouts to draw attention to specific elements that require further attention

Add Screenshots to illustrate key findings and clarify your message

Copyright 2019, Blocknative Corporation

Onboarding Support: Unsupported Browser

Overview:

  • Insert an overview of what you’re detailing

Assessment:

  • Provide specific feedback about what went well (and what didn’t!)

How to test: Navigate to the Dapp from an unsupported browser (Safari / Netscape / IE) and see if you’re alerted to move to a modern browser.

Copyright 2019, Blocknative Corporation

Onboarding Support: MetaMask not Installed

Overview:

  • Insert an overview of what you’re detailing

Assessment:

  • Provide specific feedback about what went well (and what didn’t!)

How to test: Open a web browser that can support MetaMask but doesn’t have it installed (private / incognito mode) and attempt to transact. Does the Dapp direct you to install a wallet?

Copyright 2019, Blocknative Corporation

Onboarding Support: MetaMask Locked

Overview:

  • Insert an overview of what you’re detailing

Assessment:

  • Provide specific feedback about what went well (and what didn’t!)

How to test: Open a web browser that has MetaMask installed (but is logged out) and attempt to transact. Does the Dapp prompt you to log in? Is anything unusual or unexpected happening? What about if you log out mid transaction?

Copyright 2019, Blocknative Corporation

Onboarding Support: Privacy Mode Enabled

Overview:

  • Insert an overview of what you’re detailing

Assessment:

  • Provide specific feedback about what went well (and what didn’t!)

How to test: Open a web browser that has MetaMask installed and Privacy Mode on (SettingsSecurity and PrivacyPrivacy Mode) and attempt to transact. Does the Dapp work as expected?

Copyright 2019, Blocknative Corporation

Onboarding Support: Wrong Network

Overview:

  • Insert an overview of what you’re detailing

Assessment:

  • Provide specific feedback about what went well (and what didn’t!)

How to test: Open MetaMask and switch to an unsupported network (ex. Rinkeby if the Dapp is meant for Main net) and attempt to transact. Also, switch networks mid transaction. Does the Dapp help you transact smoothly?

Copyright 2019, Blocknative Corporation

Onboarding Support: Overall Experience

STRONGLY DISAGREE

STRONGLY

AGREE

COMMENTS

x

Double click to edit...

x

Double click to edit...

x

Double click to edit...

ONBOARDING: I could get started without difficulty

LANGUAGE: New users could easily understand the terms and prompted instructions

USABILITY: The Dapp used consistent and familiar patterns that guided me through onboarding

VISUAL CONSISTENCY: The Dapp was visually consistent and provided me visual cues on how to get started

x

Double click to edit...

Copyright 2019, Blocknative Corporation

Note: Double click the box to delete / move the “X”

Onboarding Support: Next Steps & Suggestions

Provide summary commentary and analysis. 🤔

Screenshots are also effective here.

Copyright 2019, Blocknative Corporation

Part 2:
Transaction Support

Copyright 2019, Blocknative Corporation

Transaction Support Audit

Does your Dapp handle users who…

Score

Criteria

the user approves a transaction?

1

1

the user rejects a transaction?

0

1

a transaction is pending?

1

1

the user has insufficient balance?

1

1

duplicate transactions are submitted?

1

1

a transaction is confirmed?

1

1

SUBTOTAL

5

7

INDEX

7.1

How we score:

+1 for handling UX scenario correctly

0 for not handling address UX scenario

-1 for handling UX scenario incorrectly

7.1

Copyright 2019, Blocknative Corporation

Note: the index score is taken as a fraction of Score / Criteria. For example: 5/7 = 0.71. Which translates into an index score of 7.1

Transaction Support: Approve Transactions

Overview:

  • Insert an overview of what you’re detailing

Assessment:

  • Provide specific feedback about what went well (and what didn’t!)

How to test: Conduct a transaction and see if you receive any notification on the Dapp when it is Approved.

Use highlights and callouts to draw attention to specific elements that require further attention

Add Screenshots to illustrate key findings and clarify your message

Copyright 2019, Blocknative Corporation

Transaction Support: Reject Transactions

Overview:

  • Insert an overview of what you’re detailing

Assessment:

  • Provide specific feedback about what went well (and what didn’t!)

How to test: Initiate a transaction and Reject it in MetaMask. Does the Dapp provide any confirmation of the Rejected transaction?

Copyright 2019, Blocknative Corporation

Transaction Support: Pending Transactions

Overview:

  • Insert an overview of what you’re detailing

Assessment:

  • Provide specific feedback about what went well (and what didn’t!)

How to test: Initiate a transaction and Approve it in MetaMask. While the transaction is Pending does the Dapp provide any feedback about it’s state?

Copyright 2019, Blocknative Corporation

Transaction Support: Insufficient Balance

Overview:

  • Insert an overview of what you’re detailing

Assessment:

  • Provide specific feedback about what went well (and what didn’t!)

How to test: Attempt to Approve a transaction for which you have an insufficient balance. Does the Dapp provide any feedback before prompting you to Approve the transaction in MetaMask?

Copyright 2019, Blocknative Corporation

Transaction Support: Confirmed Transaction

Overview:

  • Insert an overview of what you’re detailing

Assessment:

  • Provide specific feedback about what went well (and what didn’t!)

How to test: Initiate a transaction on the Dapp. Do you receive any confirmation when the transaction is Confirmed on the network?

Copyright 2019, Blocknative Corporation

Transaction Support: Duplicate Transaction

Overview:

  • Insert an overview of what you’re detailing

Assessment:

  • Provide specific feedback about what went well (and what didn’t!)

How to test: Initiate a duplicate transaction. Does the Dapp warn you that this might be in error?

Copyright 2019, Blocknative Corporation

Transaction Support: Overall Experience

TRANSACTING: I could transact without difficulty

STRONGLY DISAGREE

STRONGLY

AGREE

COMMENTS

x

Double click to edit...

LANGUAGE: New users could easily understand the terms and prompted instructions

x

Double click to edit...

USABILITY: The Dapp used consistent and familiar patterns that guided me through transacting

x

Double click to edit...

VISUAL CONSISTENCY: The Dapp was visually consistent and provided me visual cues on how to transact

x

Double click to edit...

Copyright 2019, Blocknative Corporation

Note: Double click the box to delete / move the “X”

Transaction Support: Next Steps & Suggestions

Provide summary commentary and analysis. 🤔

Screenshots are also effective here.

Copyright 2019, Blocknative Corporation

Part 3:

Blocknative Can Help

Copyright 2019, Blocknative Corporation

Assist.js Immediately Improves Dapp Onboarding & Transaction UX

Are your users technically ready to engage with your dapp? Allow us to assess their situation.

We know what your users need to do to use your Dapp. We show them how. Step-by-step.

Boost user success and confidence with helpful feedback as they transact with your dapp.

Users are engaging with your dapp. Now it’s time to see what’s working – and what’s not.

Copyright 2019, Blocknative Corporation

Integrate Assist.js in Just a Few Lines of Code

Copyright 2019, Blocknative Corporation

Let us know how your audits go!

We’d love to see see how you use this template.

Please email info@blocknative.com with your finished audit.

😅

Copyright 2019, Blocknative Corporation

👋🏼

Thanks for reading!

Copyright 2019, Blocknative Corporation

Want to Learn More?

Copyright 2019, Blocknative Corporation

Dapp Transaction UX Audit Template - Google Slides