MUXA Design Studio
© MUXA Design Studio

Typeform for Web3

On-chain surveys for when you need more security

PHORMS


As of summer 2022, there is no tool that allows token-gated surveys.

Business Problem

Why is a Web3 survey tool needed?


• A more secure alternative for people who want to collect data and choose their audience more intentionally


• To enforce respondent verification on crypto and verify the responses are truly from the correct respondent


• All is public and available on the blockchain, if the phorms disappear, the info is still there


• No personal information needed. In Web3, email is too personal to share

No token-gated surveys

Specifically, a decentralized, censorship resistant survey.

Alternatives are not enough

  • Using Google Forms is insecure because anyone can discover the survey link and share it, “ungating” the form.


Authentication

  • With current solutions, there is no way to authenticate the respondent token-based.

Contact

email@domain.com

000-000-000


— Instagram

— Twitter

— Facebook

Design Process

We customized our process based on the client outcome needs. We only had 2 weeks to complete this concept, and the first week was spent helping the CEO define his solution as a product and identifying what need the product was really solving.

Understand

Discovery session with the stakeholders to understand goals + vision

Prioritize

  • Prioritize v1 features to design for MVP based on user needs and market traction


Competitor Research

  • Researched similar apps – what do they do well/not, what are users complaining about

Design

Created wireframes and visual design concepts for testing and build

Design Scenarios

As we worked directly with the CEO, we helped define the design scenarios (aka use cases) to understand the expected features.

Form creator

Login with a wallet

• What happens if they don’t have an ETH account?

  • • Metamask as default, but provide options for Coinbase + other wallets.
  • • What if a user is a form creator and a respondent? Will they use the same login but access to different views?

Create a form

• Includes setting properties

• Provide option to choose between single question vs. all at once. For only a few questions, single question on a screen is fine, as long there is a progress bar so they know how far along they are and what’s left. For many questions, all at once performs better.

Publish form

• Form creators should be able to create a form and save as draft. once they are ready, they can submit it for verification. once it passes, it would go live.

• Goes through validation.

Share form

• How would users want to share? Via ETH domains?

Manage forms

• Pause, resume, change deadline.

• Access saved forms.

Access form responses


• See stats, raw responses, ability to download responses, link to etherscan collection

• Analysis of the data (for questions that are not open ended) so they can get more value from it vs. only raw responses

Respondent

Login with a wallet


• What happens if they don’t have an ETH account?

  • • Metamask as default, but provide options for Coinbase + other wallets.
  • • What if a user is a form creator and a respondent? Will they use the same login but access to different views?

Access a form

• If not via email how will they know they have a form waiting for their response?

• Need notifications so post-login they see all of the forms awaiting their responses.

Respond questions

• Can edit their answers before they submit.

Submit answers

• Inline validation for ex. if they skip a question or provide an invalid answer, or will it only be validated after they select Submit?

Open questions


• Since they will see completed forms or answers as NFTS, where do these show up? • Can they see all the forms they have responded to?

space

User Flows

So we provided two designs: a dark and a light theme. The light theme has a light blue as the background and a drop shadow to further differentiate it from a light themed EMR. The app would show the version based on the default settings of the user’s computer.

Login with crypto wallet

Edit a non-published form

Wireframes

Wireframing was used to confirm requirements and validate with stakeholders and the tech team before going deeper in the visual design.

Visual Design

Web3 has it’s distinct visual style that differentiates it from Web2 apps: the colors are fresher, less depth with layers, 3D icons, and containers are cleaner, more minimal, gradients are used intentionally.


Many Web3 apps utilize a dark theme as the base visual for their design, especially fintech apps, however there are some that stick with the traditional light theme. We saw benefits in both and wanted to explore them.

Dark theme

Light theme