Earlier this week, we published the TIKI DAO white paper (you can read it here). It took several months trying to figure out how it should work. The next phase is figuring out how people use it and how they will interact with it.
We are lucky to have a very cool UX and product designer in the team Vignesh Sankathkumar. Unfortunately, he doesn’t know what is in my head and how I want it to work. So, I am designing the interface for the DAO. Vignesh will take my child-like drawings and convert them into something that will be easy to use and intuitive.
I started with the voting section and specifically the first phase of the voting process, which is the selection of proposals that will go forward for a formal vote.
I'd like to explain my thinking and the process I have gone through to the current version.
Draft 1
The information that we have is defined in the TIKI whitepaper. I had to think of the best way to present it in the app. My initial thinking was to look at the first page a user would see when they open the selection and voting section. We would also display the number of live proposals for that period.
Draft 2
When you choose the selection option, you will see the current list of open proposals.
I did a lot of research on how various apps presented text-only lists of dynamic content. Most sites use images, making representing the elements in a list easier. The challenge is creating a list using cards that will provide enough information to encourage users to click on the section they are interested in.
The +/- represents the upvote or downvote selection process. You see this concept on many sites as a “thumbs up” or “thumbs down.”
Draft 3
I saw on the AWS site that they use cards to present the latest updates as a horizontally scrollable list. This is a good way to show up-to-date content.
I looked at segregating the proposals based on category and listing them within each category. The proposals would be ranked within each category based on the number of upvotes or down-votes they received.
AWS does this very well when they display the items under the interest categories on the AWS Development app.
Draft 4
My next evolution was to list the most popular proposals and list them in addition to the categories and latest horizontal list.
We discussed this and figured it was too much to try to display. The categories were too much and probably unnecessary. Anyone who is interested in a specific category will scroll down the most popular or latest lists.
Draft 5
This draft is heavily influenced by Reddit and how they display their lists on the mobile app. They display a lot of content that is text only and use cards with a heading and brief explanation of the topic in a scrolling list.
This draft retains the “latest” horizontal list.
Below is a series of cards that will display the cards of each proposal. The cards contain the TIKI Improvement Proposal (TIP) ID, the title and a brief description of each proposal. I have added the upvote and downvote arrows with a total for each so the user can see the number of votes the proposal has received.
I have also added the chat or discussion link with a count of the number of comments so the user can see the most active discussions.
Final Thoughts
In conclusion, designing the interface for a DAO can be a complex process. It involves considering user experience, presenting information in a clear and intuitive way, and incorporating features that encourage participation in the voting process. By researching various apps and websites, and experimenting with different designs, we have arrived at a draft that we believe will be effective in presenting the TIKI DAO proposals and encouraging engagement with the voting process. As we continue to work on the development of the app, we will be constantly iterating and testing to ensure that it is user-friendly and effective in facilitating crowdsourced governance.