15

Designing a tool for Web3 Governance — A UX case study

 2 years ago
source link: https://uxplanet.org/designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Introduction

I was passing by a market the other day and I overheard some sellers talking about “Kryto” (Cryptocurrency). This proved the already trite notion that digital currencies are slowly taking over the world. While pondering over why this is so, the answer came to me in the form of Decentralization.

Decentralization is one of the inherent qualities of digital currencies. In other words, there is no central organization that serves as a regulator under these networks of trading. Consequently, It’s a feature more preferred in modern times because of the higher level of anonymity and security it guarantees when juxtaposed with more traditional methods of trade.

In 2016, a group of developers were inspired by the decentralization of cryptocurrencies and came up with the concept of a Decentralized Autonomous Organization., or DAO.

While the conventional setup of companies is tailored to cater to a homogeneous group of people within a particular organization, through its hierarchical structure and bureaucratic coordination, DAOs provide an operating system for an array of individuals and institutions that may not necessarily know nor trust each other. Under this structure, all agreements and interactions are in the form of open-source code which isself-enforced by a consensus of all network actors. Once deployed, this entity is independent of its creator.

This study was inspired by my work with the dev team at Uprtcl, where I designed a note taking tool called “Intercreativity” around a revolutionary technology they built. In the process, I created a tool to help govern DAOs and/or Non-DAOs and I would be taking you through my design thinking system in subsequent paragraphs.

See more about “Intercreativity”here.

Challenges Posed by DAOs

Although this system ensures a greater level of transparency and efficiency in institutions, it is not without its complexities. Some questions which may be considered include the following: How would the communities be managed? How would changes be proposed for the community to deliberate on? Would seemingly simpler, more pedestrian, and popular methods appeal better to the wider populace?

In answering these questions, it is quintessential to ensure that the tool attracts technical and non-technical users alike and this can be done if users are given the ability to:

  • Brainstorm and collate thoughts on the platform;
  • Propose changes to official documents and;
  • Examine and vote on proposals.

Auditing the Current Experience

Learning more about the DAO Community.

The goal was to discover:

  • the intricacies of decision-making in a typical DAO community and;
  • the existing non-digital options which can be incorporated into digital solutions.
One of the videos I stumbled on while doing my research. It explains the idea of a DAO relatively well, plus I like the illustrations 😅

Gathering Info.

During the course of this project, I conducted several interviews with seasoned developers who were contributors to one or more DAOs.

1*GHQ-ZvRmLshruOvUP5Hpug.png?q=20
designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31
A summary of my interview speaking with 12 Participants

Observation: there is no single tool for managing the construct of a DAO. Different tools are deployable in accordance with the aspects and needs of an organization.

1*xvOJhrTii0-UiiwRmd6D1Q.png?q=20
designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31
more information on the tools they used, their functions and purpose.

Persona.

The focus was on the group of people who were already members of DAOs. I consolidated the user profiles into a single persona because the product is a single entity, with different roles and methods.

1*cLxSRWGK7dSgwi-hzRoAqw.png?q=20
designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31

Proposed Workflow

The first set of wireframes were developed to help guide the system:

1*K6xuzIYTm52ATgPxU6cRAA.png?q=20
designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31
WEB GOVERNANCE V0

Iterating & Testing.

The “proposal” feature in this project aims to offer a more extensive scheme of functionalities, as opposed to using different tools for different kinds of proposals.

Due to limited resources, I had to start by creating a simpler version of my idea. I wanted to design a system whereby;

  • Users would open the app and see all the pages in the DAO;
  • Click on “Proposals” to view suggestions made by other users;
  • Vote for or against said proposals and then;
  • Click on “Changes” to show all changes made on the DAO as a result of their actions.

This presented a rough sketch for the design information architecture, process flows; user-flows, and task flows for the system.

1*kZ4bZQPckKtV6Ybuq_kZRg.png?q=20
designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31
1*5eSCA1DtGrwdZqrO1rOQAA.png?q=20
designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31
Screenshot of the Dashboard in this iteration

Insights

Place the Spotlight on Official Contents.

The Menu region in this iteration suggests that “Community”, “Proposals” and “Members” are all on the same level in hierarchy.

1*nE9wR-r3oSn1l0FFhJyG-w.png?q=20
designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31
Quick Shot

Community displays the official documents/regulations of the “DAO”.

Proposals displays all pending proposals as well as recently closed proposals.

Members displays all the members associated with the “DAO”

During a test session we learnt that the hierarchy is actually from Official Contents to Proposals and then to Members.

With this new discovery, I had to rework the old layout in order to create a new one, which itemized Official Contents above all other units.

Reduce Cluster.

“Design is only good if it is usable”. On the strength of this dogma, I had to carry out usability tests. I created prototypes and allowed people surf through and assess the flow of the app. A few people reported that there was always too much going on.

The Birth of Proposal Staging.

Proposals in this iteration are done as a single entry.

I created and tested different scenarios and learnt that a Proposal could be as large as creating a docker or as small as changing a single letter in the by-laws. Displaying all changes made on every piece of every document would create even more cluster, and issues managing them.

Then it came to me, a new solution to the proposal experience, “Proposal Staging

These realizations led me back to the drawing board with the aim of resolving the pre-listed issues and this inspired an iteration on the Information Architecture

1*BOez6ObFL86aEenR3Boq0Q.png?q=20
designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31
This workflow focuses on the important aspects of the app.

Current Decisions

Interestingly, the second round of testing yielded more positive results. I was able to develop the product through multiple iterations and feedback gotten from peers.

In the next set of subheadings, i will be running you through the current important decisions we have made, why we made them and how they work.

Create top and side Navigation Bars (Nav)

Show important components on the side nav; including: Official contents, Drafts and show important actions on the top nav including: updates, Proposals, Search.

1*SSVVtROTZn0qovgJwYnNKw.png?q=20
designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31
New layout: fixes the hierarchical and Cluster issues stated above.

Incorporating Drafts.

A draft is created by forking an official page or by clicking “Propose New page”. This creates a personal text space for making changes to be proposed to the entire community.

1*lQA-rLnW4BECuVlN-jY7Sw.png?q=20
designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31
Users can Fork or see version history of an official page.

Introducing Proposal Staging.

The idea of proposal stage is to create a place to store multiple drafts to be made as a single proposal. In a scenario where a user intends to make a change in the general construct of the DAO, rather than having to make individual proposals, they are now presented with the option of adding different documents to the proposal stage.

1*RlVY62qnK4dyyQP-kNcFzA.png?q=20
designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31
Proposal staging

With this feature, users can cross-check their collective proposals thoroughly before making it public.

Everything “Changes”.

At the beginning of this project, I imagined the changes feature as an entire body on its own. Upon discovering the difficulty and potential problems that this method may result in, I decided to try a different approach.

0*llGoHhqRin-JC9NZ?q=20
designing-a-tool-for-web3-governance-a-ux-case-study-dbee0c3e3a31
From the first Wireframes

In this iteration, I considered seeing Changes as an action. In essence, users would be able to view changes made from the previous versions at every point in time. As expected, I still hit a brick wall.

Statement of Problem.
Imagine a scenario where two users make a draft of the same official page. User A makes a proposal to edit a document, while User B is in the process of making changes to the same document. The following questions immediately come to mind:
1. How can User B compare the changes made by User A in respect to his draft as well as the official page?

2. How can User B be notified of the proposed changes by User A?

Solution.
1. When Viewing a proposal, users should be able to switch versions of that document they want to compare the proposal with. i.e Draft version(If existing) and Official version.

2. The solution to this problem would be discussed in the next subheading, Updates.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK