.png)
DIVA Protocol is a decentralized and permissionless piece of infrastructure that allows its users to create and settle fully customizable event-driven products (also known as "derivatives").
My Role
After transitioning from web2 to web3 and having contributed to different DAOs I got the opportunity to contribute to DIVA as the only designer working closely with the Co-founders and Engineers to develop the emerging protocol.
Over the course of 1 year, I laid out the design foundation of DIVA and designed the DIVA Application along with 3 other ecosystem applications built on the DIVA Protocol.
Some other tasks I took care of were: documenting feature specs, project management, conducting research & feedback with community members.
The new app design goals
The term "Derivative" may be unfamiliar to some, but it's actually something we encounter in our everyday lives within the financial world. Common examples include insurance, bets, and futures. This project is a decentralized protocol that allows the creation of flexible derivative assets, where their value is tied to real-world assets.
Now, this may sound confusing, and we anticipated that many people would feel the same way due to the technical complexity involved. So, my task was to simplify things and create a design that users could easily understand.
To achieve this, I focused on key aspects of the application, such as pool creation, markets, trade, and liquidity. These areas are where users would interact the most, as they create and settle their assets. By streamlining these processes, we aimed to provide a user-friendly experience.
Research & Explorations
To gain a better understanding of my work, I began by thoroughly studying the protocol's whitepaper and documentation. I delved deep into the material, ensuring I had a clear grasp of what I would be working with. Additionally, the co-founder kindly provided support and clarification whenever I had any questions.
In the next step, I conducted basic competitive research with other protocols like Opyn, Augur, ZKX, and Zeta Markets to point out common pain points and translate them into clear goals.
During our AMA sessions with community members, we gathered valuable feedback and insights. Overall, the community appreciated our project, but there were a few common areas for improvement. The main concerns raised were that the pool creation process was unclear and that the application lacked responsiveness for mobile devices. Many community members expressed a desire for a simplified app that could be easily accessed on mobile devices.
Markets Page
The markets page is the first page users see when they visit the platform. It displays all the pools created and allows users to trade with those assets.
Our main goal was to enhance this page to provide users with more information and better interaction.
To achieve this, we focused on improving the existing table that users were already familiar with. We added important filters, such as search and list Asset Id, Asset Creator, Underlying, Whitelisted Oracle, Hide expired pools, and assets with Buy or Sell prices. These filters make it easier for users to find the specific asset they want to view.
Additionally, we introduced a card view for the market page. This new layout includes a payoff chart and important details about each asset. This card view enhances interactivity and makes it easier for users to understand the information. It also provides a visually appealing experience, especially on mobile devices where the page is responsive.
Create Pool
The Create Pool process is a three-step procedure for generating a derivative pool on the DIVA Protocol. This is where users directly interact with DIVA Smart contracts using the application front-end. However, in the previous design, the layout was not user-friendly. Everything was centered and ungrouped, requiring users to scroll extensively to access and fill in the necessary details.
To address this issue, my focus was on redesigning the page to ensure that users can view and interact with almost all the pool creation details and parameters without the need for excessive scrolling. The redesigned layout allows users to have a constant focus in one place. Additionally, a chart preview feature enables users to visualize the potential payoff profile based on the chosen parameters and associated scenarios.
The next step involves users selecting a whitelisted Data Provider from a list or adding a custom address. They can then review all the details before finalizing the pool creation process, which is indicated by the progress steps displayed at the top of the page.
.png)
Trade & Liquidity Page
After launching the updated version of our application with new screens, we immediately focused on enhancing the Trade & Liquidity page. This page holds significant importance as users engage in activities such as buying, selling, adding, and removing liquidity from the pool. These actions incur protocol fees and contribute to the growth of our platform.
We went through several iterations to refine the design, particularly for the Buy/Sell and Liquidity components. Our aim was to determine the necessary details and fields to display in these sections.
Ultimately, we arrived at a design that featured both the Trade and Liquidity functionalities on a single page using a tab view. The payoff chart provided an overview of all relevant details. Additionally, we incorporated an Order Book where users could view Buy and Sell orders, along with trade history and their own orders. The table displayed the best Buy and Sell prices for each asset, ensuring ease of use for our users. The Buy/Sell widget allowed users to place orders while conveniently accessing information on fees, balances, and remaining allowances in one place.
This new design allowed us to present all the required details for users to interact with assets and pools in an organized manner, simplifying the overall user experience of our application.
My Takeaways
Conducting multiple A/B tests for each iteration proved instrumental in honing our skills and understanding what worked best. The new designs were gradually introduced through various updates. This iterative process allowed us to gather feedback on previous designs, address any issues, and ensure smooth and flawless functionality.
In addition, we launched the application on the testnet in mid-2022, running it for three months. We received a positive response from the community during this period.
Through this experience, I acquired valuable expertise in handling complex projects and presenting designs in a simple yet informative and actionable manner. The guiding principle of "simplicity is key" is applied to every aspect of our work. Furthermore, I had the opportunity to design three other ecosystem applications that added value to the protocol and encouraged creative endeavors utilizing the protocol's capabilities.
