WEB3.0
Struct Finance is a startup with ambitious goals and beyond competition investment DeFi products
We collaborated on the open site app – novel interest-rate products tailored to different risk profiles
Struct
04
scope
01 wireframing
defi app UX Design
02 creative
Branding polishes / Concept / UI Design
03 landing
UI design / 3D / Motion
04 development
HTML / CSS / 3D / three.js / creative development
Client
about
Struct Finance is the first permissionless protocol designed to unlock the next generation of instruments by building the tools, infrastructure, and foundation necessary to enable structured products on DeFi
project
Currently, the company is building Structured products that can be tailored to target specific risk profiles. This new primitive is created by tranching/splitting an underlying yield-bearing position into two
On one side, users looking for a stable yield can invest in the Fixed tranche, which guaranteed a fixed yield at the end of the investment period. On the other side, risk-loving users can invest in the Variable tranche expecting to harvest higher yields
Process
main goal
Our main goal was to create an intuitive and minimalistic main app design, as well as a creative and remembering Landing Page design
Challenge
The Client asked us to use the existing Brandbook as the basis for our design concept, though he was ready to bring our company’s style and vision to it
We incorporated the primary elements like the logo, color palette and design approaches into the UI, but we tried to add uniqueness and edgy web3 look to the existing branding
DeFI App
UX Stage
The app itself has a pretty high information load and entry threshold, so the main challenge for us was to make the UX as intuitive as possible without sacrificing functionality
We refused from using any visually distracting elements on the most information-loaded pages like Tranches or Factory. The primary color is used only for CTAs and "success screens"
Factory
explore
Factory page refers to a form where a user can set and customize the parameters of the tranche they create
We used a "step-by-step" approach: a user cannot proceed with the next step before completing the required one
Dashboard
The dashboard page allows the user to see overall statistics on his investments and profits, as well as manage tranches with various investment period statuses
Mechanics
Struct interest rate tranches provide investors with the choice of predictable returns and leveraged exposure to the performance of an underlying liquidity pool. Deposits are collected from the two sets of investors (those who prefer fixed or variable returns) for a certain period of time
Once the "subscription" period ends, Struct deploys the capital into a liquidity pool to accrue yield for a predefined time. Once the time is up, they remove the capital along with all rewards, return the fixed-tranche investors their principal and the residual amount goes to the variable-tranche investors
Tranches
Tranches are managed from the window on the right. Its content depends on the Tranche status. There are tranches a user has/has not invested in, or of different investment statuses: open, locked, matured
Open tranches are available for deposit, even if the user has already invested in it before. Locked tranches are closed for any investments, they only display the information. Matured tranches are available for funds and benefits withdrawal
Landing
the main feature
In contrast to the main application, we used a completely different visual approach when creating the Landing Page. Its main objectives are catching the user’s attention, increasing brand recognition, and prompting the user to get to the main application
process
To achieve this, we used a huge 3D scene that runs like a red thread throughout the whole UI, as well as the powerful and remembering branding and visual concept
We chose crystals as the main element and Landing theme. It resonates with finances idea, symbolizes transparency, and the motion of the crystals throughout the UI resembles the flow of funds in and out of tranches
process
Landing Page overviews the app primary functionality, its benefits and user flows. The descriptions are backed by visible CTAs and unique visual experience
For both the main app and Landing Page we provided a mobile adaptive (375px), a big screen resolution (1600px) and basic 1440 px screens
