<aside> ✨ Port Finance UI/UX Redesign by Vaishnavi Dwivedi & Sameer Kashyap

</aside>

Figma File

Port Finance

Marketing Website

• The Hero of the marketing website does not use the best UI and design system, proper font size needs to be used, such as for title which should occupy most of the space and the caption should use smaller font size.
• The Hero also does not provide any context to a first time web3 user of what the product is, so we added hyper links on key terms like “Non Custodial” and “Liquidity Protocol” which would take the user back the to the Port finance docs.
• The features tab presented the ambiguous UI with non functioning scrollbars which did not convey any meaningful message or provide any inherent value, we have redesigned the features tab to properly convey the available features with icons and captions.
• Most sections also lacked a heading which created great confusion on what the floating widgets were and where a section ended. We added a heading and caption to each section conveying the to the user exactly what it means.
• Some of the icons in backers and markets were not properly spaced and aligned, the logos are placed in a congested manner with bigger size and less padding. We arranged them be equally spaced and arranged the last one to be center aligned instead of aligned at start, this resulted in a better looking UI,
• The roadmap section was completely unusable with very poor design and scrolling experience, the buttons lag while going through the timeline which resulted in clicking on it twice. We redesigned the entire timeline to be a scrollable experience that would work on dragging the timeline rather than navigation using buttons, this gives better context to the users on the roadmap of the project.
• We rearranged some sections to make it more relevant, as features would be the first thing that a user would want to learn more about the project than knowing backers of the project.
• We also moved the “About Us” section to a different page as that is the best UX practice to provide information about the entire organization and the team, this didn’t make sense right in the beginning of the page with very little information that gave the user very little idea.
• Lastly, extended the gradient to the entire page instead of just the hero section as it provided better UI than the previous one which was presented as two different sections.We also added a a better conveying CTA “Try Now” and “Launch App” and made it big enough to prompt the user to try it out.

Marketing Website Embed

Port Finance

App

Problems

Markets Page

• Too much information about multiple assets which the user might not be interested in, the chart is quite small along with the overlay UI which makes it hard to grasp the actual percentage of market share of a particular asset that the user wants to know about.
• The dashboard tab in the navigation bar does not take precedence over the markets when a user has deposited collateral or borrowed amounts.
• The Current Market size occupies a necessary extra amount of space which is not required to display a number.

Dashboard → USD Coin

• The generic dialog in the dashboard when clicked on presents too many redundant options like claim reward port tokens which should rather be a global option where the user has visibility on the total rewards earned.
• The Dialog has a poor alignment, padding, and spacing.
• Redundant display of Claimed Port, since it is user-centric, should not be grouped along with every other asset class, even within the dashboard.
• The user must be presented with much-streamlined options in a better representation.

Supply → Deposit

• Too much-cluttered information and extra detail might make the user feel overwhelmed and confused about the input actions.
• The risk meter is sometimes vague and inaccurate, does not handle all possible edge cases.
• In certain cases, one of the tabs has to be disabled, for example, the withdraw tab should be completely disabled when the user has no deposits to withdraw, as well as when the active loan is close to the risk threshold.

Dashboard

• The borrowing power indicator is quite ambiguous, it gives a very little picture to the user of what it actually means because of the double-sided indicator, as well as the right side, being redundant information
• The Empty states of rewards do not convey relatable, informal messages that are easily understood by the user.
• It also gives no context of what PORT tokens are or how they can be used.

Supply → Empty

• Empty states with no message provide very little value to the user.

Borrow → Repay

• Repay UI cluttered and ambiguous, the user has to return to the home screen and redo the steps.
• Repay tab should be disabled or shown with a relevant message if the user has no loans to repay.

Markets → Asset

• The ratios of each information box are unequal and some information is necessarily large.
• The scrolling nature of the dialog leads to a poor user experience.
• All the dialogs have an ambiguous ‘OK’ button as well as a close Icon button which is an incorrect action and misleading to the user.

Connect Wallet

• Scrolling dialog leads to poor experience, options should be presented to be easily navigated.

• Select environment tab can be better conveyed to the user by avoiding a scroll bar dialog and using icons

Borrow (when wallet not connected)

• Options that require wallet authentication should not be displayed, this leads to confusing actions

Solutions

Markets Page

• Combine Market cap + Borrowed and Lent give a better overview of the entire market, as well as make more space for the pie chart to represent the market composition of each asset better
• Reduce the dashboard navigation bar size and style, improve the UI with glassmorphism which provides a more modern look to highlight the app button and actions better.
• Provide a better entry point to view utilization and other statistics about each asset
• Currently, we haven’t populated the pie chart in the screenshot but we think that the best way to represent the assets is by hovering over them.
• In the assets table, we have removed the dollar value for more space, although we can add it if it is important for the user.
• We’ve only added the icon of the asset and not the full name to make it lean. If the user wishes to know the asset name, they can hover over the icon.
• We used better icons for notifications/messages and relocated the “connect wallet” button to a more convenient location as the “Call to Action” button is always distinguished from the rest.

Dashboard

• PS. We’ve used the same asset table in each of the pages since we just wanted to show how we want to redesign the table, with no significant changes to the contents.
• We have added the claim port reward icon globally on the navigation bar (it might not be visible on markets since that page is open for all) to make it simple to look at port rewards without having to go to the dashboard.
• We made the linear progress to indicate borrowing power a bit easier to understand. Previously the numbers were squeezed inside the bar. We made it legible and of possible value for the user. We removed the borrowed value from the progress bar as it was a duplicate of the value mentioned at the top of the page.

• We restructured the modal that appears after clicking on the assets in the table so that it is easier for a first-time user to understand and make the right action.
• We removed the port reward row since we thought it was redundant since the dashboard main page already has a way to do that.

Supply → Deposit

• This particular dialog box needed a complete redesign as it had a lot of redundant information that may or may not be of use to the user and occupied too much real estate of the box.
• We added a better way to add the amount to be deposited by looking at other dApps that are widely used.
• We thought to only provide the final difference in the dialog box since that is the metric most people would look at before depositing.
• The risk scroller wasn’t helpful at all since it wasn’t providing important information. Although, it could be put back in if the product creators think it’s a valuable feature.
• We reduced the width of the dialog box to make it easier for the user to read and perform actions.

• Show a proper disabled state when the action is not possible rather than showing the UI and then not accepting inputs, this gives the user a better understanding of the situation.
• Similarly for the borrow and repay page,

Wallet Dialog

• We wanted to create a better UI for the wallet selection. We thought that just the name of the wallet and an icon would be enough for the user to make their selection.
• The Wallet should expand to fill options rather than providing a scrollable layout in a fixed height, the options should only scroll on reaching end of the screen

Supply

• To make the UI look leaner we can add the total supply metric inside the circular progress bar.

Selecting Environments

• Simple no-scroll for people to look through different networks.

Warning Message

• We should provide the Call to Action which is “Connecting the Wallet” in the warning message itself instead of blinking the connect wallet button on the nav bar. It’ll be much easier for the user and the conversion rate of folks connecting their wallets would increase.