DeFi app | Jacobo Leyendecker

Jacobo Z. Leyendecker

DeFi Solutions for investment managers

Designed for a startup company serving decentralized finance solutions via a web-based application for investment managers.

The Problem

Investment managers are often overwhelmed by cryptocurrency investing options. Design a simple, easy-to-use platform for investment managers to use in order to achieve their client's goals.

Business Goals + Responsibility

By designing no-code strategy creation tools, automated strategy execution, and research tools, the process of algorithmic trading is simplified. Furthermore, in designing portfolio and strategy P&L tools, users are allowed greater understanding into how their strategies are performing. Design a UI that makes these features accessible. As a member of the product design team, my responsibilities included wireframing, style guide creation, and low- / high-fidelity prototype creation.

Scope & Constraints

The scope included pages such as Portfolio, Research (Liquidity Pools and Assets), and Vaults (a place where the user creates and stores investment strategies), also included was the Create Vault flow. The deliverables had to be a high-fidelity prototype. The length of the project was not to exceed 6 weeks.

User Research

We first initiated the project by conducting research on the DeFi ecosystem and its users. This involved reading articles and feeds on the subject and compiling a glossary of important terms to gain a better understanding of the field. Later, the company carried out user research among investment managers in India, UAE, and the U.S. through surveys and interviews. The key insights from this research were then shared with the design team.

Main Takeaways

Competitive Analysis

Based on our analysis, we found five websites in particular that carried the closest representation of what we felt would serve as a great starting point for our design. The five websites included Instadapp, DeFi Saver, Coinrule, Coinbase, and Treehouse. We took the very best of what each website had to offer in terms of layout and accessibility and applied it to our early rough drafts. After further discussions with the stakeholders, we finally had sufficient groundwork to begin the process of wireframing. Below are a few of the key takeaways from our competitive analysis.

Competitive Analysis cont.

Based on the five main web apps utilized for the competitive analysis, we were better able to understand how the competition answered the challenge of turning an investment tool with a very minimal NUI rate into something that felt natural even for a first-time user. Some of the immediate takeaways were the utilization of columns giving the user a sense of placement, as well as the familiar location of scrollable asset cards, and graphs which were always located within the center of the screen. These web apps would continue to serve as inspiration throughout the ladder end of testing rounds.

Above is the very first rough draft of what we felt to be a good starting point. We wanted to carry over a layout that felt very familiar; not just to returning investment managers but to all users.

Analysis Takeaways

From left to right, starting with Instadapp and ending with Coinbase, we managed to make notes of all features that we felt to be important for a DeFi application. Having a basic understanding of familiar layouts is one thing, but being able to understand how these applications operate is just as important. With our competitive analysis coming to an end, we met with our stakeholders once again to make note of what they expected to be included within the app, as well as which parts of the app were within our scope. Our objective at this point was to design the four main home screens for the portfolio, research tabs, and vaults. In addition to that, we also had to account for all the screens or modals that may be included within each one for them to be functional. With the research portion now complete, it was time to wireframe.

User Flow Development

The two wireframes shown above are the two primary flows within our scope. Above is Flow 1: Research, and below is Flow 2: Vault. Within these two home screens exists the option for the user to create a vault. Vaults are pools of funds with an associated strategy that aims to maximize returns on the assets inside the vault. Vaults save investors a lot of researching time that would have been spent looking for optimal on-chain yield farming, earning or investment strategies. We designed the wireframes with the use of modals in mind. We found through our competitor analysis that modals in many instances offer a simplified user experience, by removing the outside clutter and by helping the user focus on one item at a time. It was important to keep that in mind while designing the wireframes due to the navigation options that vary. The Portfolio home screen was not included in this wireframe since it purely displays information. Link to full flow: https://tinyurl.com/33ky57zn

Low Fidelity Frames

Above are just a small fraction of the low-fidelity examples that were designed with the intention of conducting user tests. With the obvious exception of many design cues, these low fidelities served as a great foundation to identify areas of improvement. Below, are a few sketches and mockups of the modals accessible from within the home screens. Link to full low fidelity file: Low Fidelity figma file

Usability Test Script

For this portion of the project, we relied on feedback given to us by the stakeholders. They wanted to handle the testing portion with their own group of prospective users. Normally, it would be up to UX personnel to conduct these tests to better understand user responses as well as to better read changes in body language. In an effort to have some form of hand in testing, we provided the stakeholders with our own usability test script which they agreed to utilize. Below is an example of the tasks listed. Link to full script: Usability Test Script

First Round Findings

After the first round of testing was complete, we were then able to synthesize our findings. The first area of improvement would come in improving and removing certain modals. Some of the modals tested were displayed in a divided format where the left selection determined the options on the right. These modals were part of the vault creation process. In addition, we then decided to scrap the withdraw/deposit modals entirely. What we discovered is that being able to access the deposit/withdraw interface regardless of the screen selected is very important to users. To remedy this problem, we added a collapsable column to the right side of the screen that is always accessible regardless of which screen the user finds themselves on. Not only did this change make the deposit/withdraw feature more accessible, it also made the transaction process fast and simple. With the exception of a few minor tweaks to the vaults home screen, the low-fidelity tests proved to be very successful. Below is a before and after example of the collapsable deposit/withdraw column.

UI Style

Before starting on any part of the application’s design, we held another meeting with the stakeholders to find out what level of flexibility would be provided. We were given full flexibility with the exception of the company colors and that it had to be dark-themed. The logo and overall branding provided to us carried three colors made up of pinks mixed with purples and blues. With these colors in mind, we began developing the UI elements.

High Fidelity Prototype

Combining the very best of what the market has to offer while meeting user demands comes the final high-fidelity prototype. This DeFi application was designed with the intention of meeting the needs of investment managers and first-time users. The UI elements in conjunction with the dark theme squared-off interface, brings with it a sense of professionalism at every click. One of the primary challenges that we faced early in this design stage was in finding the right balance between providing ample information while maintaining a design that felt clean. We feel like we achieved this on every screen, but primarily within the asset cards. This challenge made it even more apparent that the right column had to be collapsable since every screen carried different levels of information. More examples below. Link to high fidelity prototype: High Fidelity Prototype

Concluding Results

Following the development of the high-fidelity prototype, a final round of testing was conducted privately by the stakeholders. The feedback received was nothing short of great satisfaction. Our team succeeded in delivering a one-of-a-kind DeFi application that met all of its business goals. Regardless of the hurdles that came with this project, our team of four from around the world succeeded in working hand-in-hand with our stakeholders in painting the vision that they bestowed on us. The diversity of thought that we shared on a day-to-day basis is what I believe served as the secret ingredient in having been able to produce an amazing product in such a short period of time. Design work aside, learning the ins and outs of an entire industry within a week is something that I commend my teammates greatly for. Without having a background understanding of decentralized financing and a desire to understand what matters most to investment managers, this project would have never reached its full potential. Ultimately, the process of algorithmic trading has now been simplified in ways that will one day be accessible to the world.