UI/UX Design

Cook DApp

My Role
UI/UX Designer
Timeline
Feb - Present 2021
Cook DApp is a decentralized Asset management platform for investors and fund managers to manage their wealth.

Problem

Although Defi(Decentralized finance) is not a new concept, it's hard to understand how it works and how it will manage investors' and fund managers' wealth. Therefore, making the platform simple and easier to use is the first and most important thing to solve.

Role

My role in this team was to design the DApp platform from scratch, create advertising videos, and design graphics for social media.

Design for Investors

Start design from the smallest screens

Before I jumped into the design' mining pool', I was thinking of how could make information in the pool more intuitive and straightforward, as there were many information users need to check at the same time; also, there were five buttons on the same page. The problem is how to make the whole page easy to understand rather than confusing users.

Mining Pool version 1.0
Mining Pool version 2.0

The first version I did was make two mining pools line up vertically and make the box wide. I did that because there were only two pools launched and I thought that way makes the whole design looks symmetrical, but what if we will launch more mining pool in the future, this page could be very long which means users need to scroll down all the time with good patience.

Plus, users use mobile devices a lot. This style could not fit mobile devices. So I realized that starting a design from the smallest screens is a good approach, ensuring your users' experience is seamless on any device.

Design for Fund Managers

Creating a simple experience and make fund managers feel easy.

I prefer to start my ideas putting on paper. It's vital for brainstorming and coming up with many different solutions. How do fund managers create a fund for investors so easily and quickly? Let's dive in!

The process of "create a fund" was easy, like set fund name, fund symbol, or fee. The tricky part was to "set assets distribution." Before I start to design this part, I came up with three solutions to set assets distribution.

Solution 1
Solution 1:
  • Too complex: It could work if there are 2-4 input fields, but it will make users spend more time on set/change each percentage if there are more than four assets.
  • Unfeasible: From a technical perspective, it's complex to generate different colors to represent each asset.
  • Meaningless: the asset's diagram with many different colors is not clear to read.
Solution 2
Solution 2:
  • Still complex: why would users want to click so many times? click percentage > click “add” > click edit > click delete.
Solution 3
Solution 3:
  • A slider is a good option, but can the slider be set to 0.01%? No, users still need to type percentages manually. 

Finally, we decided to use this version without unnecessary elements. Removing elements and reducing choices is an excellent solution to make the experience simple. That makes me thinking of a famous architecture motto, "Less is More."

Final version

UI Design

Investors-Overview
Fund details
Fund Manager - Feature "Manage"
Badge System

Commercial Video

Before we launch the Mainnet, I made two videos for advertising the Defi platform.

  1. Teaser video (3.8k views on Twitter) Click here to watch
  2. Full video (2.4k views on Twitter) Click here to watch

Graphics for Social Media

Check them on Twitter