OVERVIEW

IndexZoo is one of Definer Lab’s clients, a pioneering company leading Web3.0 revolution. Its featured product, ZooEx, is a decentralized margin trading platform that enables leverage trading for any tokens. My role here is to design a transparent and user-friendly interface for users to manage their assets and earn interest from interactions in this DeFi ecosystem.

ROLE

UI/UX Design Lead - Design System, Data Visualization, Prototyping

TEAM

1 PM, 2 UX Designers, 1 Data Analyst, 2 developers

TIMELINE & STATUS

October 2023 - January 2024

Shipped

CONTEXT

Index Zoo is simplifying crypto risk management

IndexZoo is designed to protect cryptocurrency investors from market volatility and downturns. Its dashboard provides real-time trading insights, market analytics, and risk-management tools, catering to experienced traders .

Problem

However, the current UI is highly technical and complex, making it intimidating for average users who want to manage risk without deep trading expertise

How might we design a intuitive crypto asset management platform that making complex finances more clearly, accessible and trustable? 

Define the success

Designing for clarity, trust, and personalization

Key solution 01

Deposits vs. loans Visualization: Making Capital More Transparent

User research revealed that investors feel more confident on platforms with higher total deposits, seeing it as a sign of strong engagement and liquidity. To address this, I prioritized visualizing total deposits and total loans using a dual graph system, allowing users to easily track platform activity over time. To further enhance clarity, I implemented color coding, making deposits and loans visually distinct. This contrast helps users quickly compare trends, monitor capital flow, and make informed investment decisions with greater transparency.

Key solution 02

Empowering users to earn with confidence

Many users hesitate to engage in staking and lending due to unclear returns and market activity. To build trust and encourage participation, I designed the Earn Page to:


Show real-time earnings potential – A dual graph system visualizes returns over time.


Increase transparency – Key metrics, such as deposit and loan volumes, help users gauge market activity.


Simplify decision-making – A clear breakdown of staking APR, loan rates, and total returns ensures users can make informed choices.

A modular approach for data visualization

My approach here is to divide complex information into smaller modules, combing both interactive graphs and key metrics by the side, as well as color coding so that they can focus on specific earning options without overwhelming.


Tabbed navigation lets them switch between metrics over time, giving them more control and confidence in decision-making

Key solution 03

An Intuitive Configuration Window

Just before users commit to an investment, I designed a pop-up configuration window that lets them compare potential rewards across different maturity dates using a graph. This allows users to make informed decisions without disrupting their flow—eliminating the need to scroll back and forth between pages.

Key solution 04

Swap Crypto

Other Interactive Pop out windows I designed with clean layout that allow users to finish swapping without leaving the Zoo Market Page.

Design GUIdeline

Defining clear spacing & Padding guideline for response design

To enhance readability, I established a consistent spacing system for the configuration window across devices. By defining margins and padding, I ensured a structured layout for the whole team to use. Text sizes and touch targets were optimized for legibility on smaller screens, maintaining a balanced visual hierarchy. This standardization keeps the UI clean and accessible, ensuring a seamless experience.

Design System

As this is a 0-1 project, I set up the design system for the whole team to use in the future.

IMPACT

+25%

Successful transactions

-11%️

Support Queries

By implementing accessibility features that clarify crypto jargon and redesigning APR displays for better transparency, users experienced fewer errors and misunderstandings. Most users reported feeling more confident in making informed decisions, leading to a smoother and more intuitive market experience.