Senior Content Designer and Copywriter
Web3 Communities in Facebook Groups: Hackathon Idea

Web3 in FB Communities Hackathon

Product, UX, UX Writing, WEB3
Web3 Communities in Facebook Groups: Hackathon Idea

Web3 Communities in Facebook Groups: Hackathon Idea

In January 2022, our team of engineers, product designers, and one content designer (me!) prototyped what a web3 community would look like in Facebook Groups for the Communities Hackathon in January 2022.

Our objective was to help the team visualize what FB Groups could look like in the Web3 world.

You can watch the full demo at the very end of this page.

WHAT WE BUILT

We mocked an experience where FB Groups mimic DAO-like behaviors:

  • An FB group can issue their own community token.

  • Users and members can purchase these tokens via FB Pay and have them deposited into their Metamask wallet. (Metamask is a popular crypto wallet.)

  • Members need enough tokens to gain "exclusive" access to perks.

  • Members are rewarded tokens for contributing to the community (like making a post in the group).

  • Members participate in a governance process (e.g. voting) to set the direction for the group.

Eng team also deployed our own ERC-20 token Octoken (OCTO) onto an internal test network that was set up by the FB Pay infra team.

INITIAL DESIGNS

INITIAL DESIGNS

WHAT IS A DAO?

“DAO” stands for decentralized autonomous organizations, and are colloquially known as “internet communities with a bank account.” DAOs are co-ops that have their rules and decisions encoded on the blockchain — the community is governed by code, not by other people. This increases trust in communities because codifying governance on the blockchain can mitigate corruption/fraud by reducing the need to trust in centralized entities.

INITIAL DESIGNS

INITIAL DESIGNS

PRINCIPLES WE FOLLOWED

For our hackathon idea, we wanted to build a proof-of-concept on top of the existing FB Groups product.

We would create a new group type that incorporates web3 principles: governance, community treasury, community tokens, identity.

Mock of "Octo" Tokens in a Metamask wallet

Mock of "Octo" Tokens in a Metamask wallet

WHAT I DID

  • Wrote content for the payment flow on FB-side (since Metamask’s content is not owned by us).

  • Crafted dialogs in the group to promote community participation (in order to get community tokens).

  • Named the token “Octo” after an actual FB group our team regularly partners with for product tests: Octonation!

  • Took care of all other general content needs throughout the experience (given that we only had 2-3 days, on top of regular work priorities!)

User view of a theoretical DAO community (not joined)

User view of a theoretical DAO community (not joined)

Initial Designs

Initial Designs

FINAL FLOW AND STEPS

  • Connect their crypto wallet and then join the community with enough tokens. (Buy just enough to get in.)

  • Verify that the user doesn’t have access to certain actions/privileges based on their current token count.

  • Participate in the community by doing actions (ex. make a post) and receive more tokens.

  • By doing so, the user gets enough tokens to then sway decisions in the group (like voting to change the group’s background color for all members).

  • Vote on poll —> see change.

Error message with actionable steps to connect your wallet.

Error message with actionable steps to connect your wallet.

Screen Shot 2022-05-05 at 4.52.56 PM.png
Payment flow messaging saying you need 200 tokens to join

Payment flow messaging saying you need 200 tokens to join

Screen Shot 2022-05-05 at 4.53.21 PM.png
Screen Shot 2022-05-05 at 4.53.35 PM.png
Screen Shot 2022-05-05 at 4.53.48 PM.png
Screen Shot 2022-05-05 at 4.54.00 PM.png
Continue regularly with existing group UX (ie. membership questions)

Continue regularly with existing group UX (ie. membership questions)

State if you've successfully joined the DAO community

State if you've successfully joined the DAO community

Screen Shot 2022-05-05 at 4.54.39 PM.png
Promotional dialog to encourage community participation. Includes a quick option to create a post via the dialog.

Promotional dialog to encourage community participation. Includes a quick option to create a post via the dialog.

Screen Shot 2022-05-05 at 4.55.36 PM.png
When you have enough tokens, you get a vote in shaping the entire community (ex. group color).

When you have enough tokens, you get a vote in shaping the entire community (ex. group color).

Member has helped shape the community (which is part of Web3/DAO principles).

Member has helped shape the community (which is part of Web3/DAO principles).

Earn more community tokens for participating in the group.

Earn more community tokens for participating in the group.

Web3 in FB Communities Hackathon UX

The end-to-end flow that imagines how a user would join a DAO community on Facebook using tokens/crypto.