The project started with low-fidelity mobile wireframes to align on structure and flows before investing in visual design. The mobile-first constraint forced every interaction (depositing, borrowing, withdrawing) to work in a small screen before scaling up to desktop.

Lending protocols are technically dense. Users need to understand APY rates, collateral ratios, health factors, and liquidation risk, all at once. The design breaks this complexity into layers: the markets list gives a quick overview, the account panel shows portfolio state, and the transaction modals surface only what is needed at the moment of action. Health factor is visualized as a color-coded bar so users can assess risk at a glance without understanding the math behind it.

Once the high-fidelity designs were approved, the interface was implemented in Next.js. The teal and dark green visual system was translated directly into code, keeping the same spacing, typography, and component behavior from the Figma prototypes.