LIGHT MODE-UI DESIGN

June,2022

Disclaimer: Due to non-disclosure agreements with NAOS Finance, I am limited in the amount of work I can show.

Project background

NAOS Finance is a decentralized lending protocol for real businesses accessing DeFi liquidity. Expanding the use cases for crypto lending, and providing a more efficient source of funding for businesses worldwide.

Project Overview

Light UI is good for daytime and natural light viewing. It is appropriate in websites with a focus on text content. It is also good when the website needs to deal with a lot of visual elements. It is good when you use flat design with appropriate color hierarchy.
The original webpage uses dark mode, but complex operations will make it harder for users to read.

Before starting user research, we used to make our interface that owners want to see from the perspective of the company.I think that it is necessary for novices to easily understand the process, that is the state of a good app. But we must also take into account the existing customers who are now used to the previous process, so we decided to recruit two groups of people-new customers & existing customers, and conduct user interviews.

Project Detail

Project Duration: 4 months

My Role: UI Designer

Responsibility:End to end UI design

Design process

First of all, to understand the "ease of use" of the current process, a quick and undifferentiated usability test was carried out, and the obstacles and ideas they would encounter were recorded. It concluded that the booking process brought the most to the general public obstacle steps.

User survey

According to the difficulty of the problem encountered by the user, it is divided into: good、
Very good、Fair....etc., convenient for users to quickly describe.

*102 responses, 90% confidence level and 5% margin of Error

1. Switch mode

In order to consider the habits of old users, the original dark version is still retained, but a function that can be switched is added.

2. Guide button

Buttons allow users to take actions and make choices with a click. Buttons convey actions that users can take. I used a gradient of corporate identity colors to make the buttons easy to find and identify, while clearly indicating what they allow the user to do.

3. Pop up

Pop-ups (also known as overlays, modals, or interstitials) are part of the actual web page. In the updated version, some simple functions are set as pop-up windows, saving users the time of searching back and forth in many web windows.

Legibility

The bright design greatly improves the comfort when reading, and the overall color tone does not exceed five to avoid visual confusion.

And use color blocks to distinguish different product properties (for example, purple color blocks represent personal assets).

Button

Putting the extension of the corporate identity color on the main button can effectively guide customers in a focused manner and avoid mistakes caused by visual fatigue during operation.

Material

Users may use different devices to browse our platform, so responsive web pages are relatively important. In order to improve the user experience between different devices, special attention should be paid to the spacing between column and block arrangements, so that users can comfortably browsing and using is the most important.

Visualization

The cumbersome corporate customer names and corresponding currencies at the front are replaced by logo, the visual effect will be more concise, and three-color lights (yellow, green, red) are used to remind users of the current position status.