This time I have worked on Port Finance a Non-Custodial Liquidity Protocol On Solana. I redesigned the app's website as well as its dashboard. I attempted to use reusable components and interactions throughout the design so that Port Finance could easily use or scale it.
Little Background!!
The entire redesign was completed in five days. I began by learning about Dapps. The whole lending, borrowing, depositing thing was a little overwhelming at first, but as I started exploring more tools like Zapper.fi, Compoun.Finance, and some De-Fi videos, I got the hang of it.😁
I began the redesign after conducting research and learning. Dashboard was my first choice because it was complex and required a thorough understanding of the entire project. Despite the fact that some features in the devnet were not working, I figured it out and redesigned everything.
I also added some functionality that was not previously present in the product because I believed it would improve the overall user experience, and I removed some for the same reason.
I know I know I am talking too much😂. I should stop now and let you explore the case study.
Being a section jumper myself, here is jump links to all the section.
First, I started with the Topbar and Sidebar to get a sense of the spacing, design pattern, and colours.
🙁
Issues
🙄
All the data such as Wallet Address, Environment data are hidden.
😮💨
There is no clear visual cue to show what button represents what.
🤔
Solution
☎️
Expanded Environment button to show which network the user is connected
😎
Moved logout and change wallet outside on the navbar as it is frequently used by user
📢
Added wallet address with profile pic to show which Address the user is connected
🙁
Issues
🙄
Nav-link height is too much
😮💨
The icon does not represent the nav link text
😔
Market and Fixed Rate have the same icon
🤔
Solution
😎
Changed the height and visual design to be more minimal.
🙂
Fixed the icons to represent the text
🛠
I've added a widget to the dashboard that allows you to quickly access all of the parameters from the sidebar.
Market
🙁
Issues
🙄
There is too much white space around the top section data.
😮💨
The sections are dispersed throughout, making it difficult to understand
😔
The table contains a large amount of data, which increases the user's cognitive load.
🙄
There is no search bar to quickly search for different assets
🤔
Solution
📈
A graph has been added to the Market Size Container to show the change in market size.
🔣
Added Percent Signifier to show the numbers are going up or down
🔎
Added search box to the Asset Table
🧰
Redesign the Asset table to make it easier to read and understand.
The price in USD can be viewed in Tooltip by hovering on different prices.
Dashboard
🙁
Issues
🙄
There is too much white space around the top section data.
😮💨
The bar representation of Borrow Power Used and Left is difficult to understand by user.
😔
The table contains a large amount of data, which increases the user's cognitive load.
🤔
Solution
📈
Segregated all the sections with proper spacing and padding
🔣
Changed the borrow power signifier to make it more easily understood at first glance.
🔎
Increase the width of Port reward section to make it more consistent with the design pattern
🧰
Redesign the Asset table to make it easier to read and understand.
The price in USD can be viewed in Tooltip by hovering on different prices.
Supply and Borrow
Old Design
🙁
Issues
🙄
The sections are inconsistent and the spacing is irregular
😮💨
Transaction is done in a modal which is not the best way to do any transaction
Redesign
🤔
Solution
😎
Unnecessary spaces were eliminated. A balanced arrangement was added, as well as UI patterns that repeat across the board, giving it a sense of consistency and familiarity.
👉
Now every asset takes you to the asset page where user can do transactions for Supply and Borrow.
This feature helps the user navigate more easily. Tracking and checking individual Asset is super easy now.
🙂
Before and after txn. is redesigned and now it clearly shows which is what by the header.
Fixed Rate
🙁
Issues
🙄
The slippage input area is hidden, and it is not obvious that it can be changed.
😔
The maturity box displays a select modal, increasing the user time.
🤔
Solution
😎
Made the Slipage input box more prominent
📅
Maturity dates can now be accessed from the drop down
🙂
Moved Fixed APY and ppUSDC text on the left hand side to increase readability
Prototype Video
Dashboard Prototype
💡
Its interactive, so don't hesitate clicking on the different areas 😁. Also press Z anywhere in the prototype to change the width of the prototype.
It is now time for the Website. Because the website is so important in user onboarding, making it credible and informative is the main theme of my design. I attempted to bring the dashboard theme to the website in order to make it consistent throughout the design.
Website Redesign
Old Design
🙁
Issues
Header
🙄
Purple button on navbar is not prominent
😔
The contrast between hero text and background is very low making it hard to read and grasp the text
🙁
The spacing is not even throughout the hero section
Brands
🙄
The brands are scattered everywhere
😮💨
The logos are tightly packed into each other giving no breathing space for user to go through easily
Features
🙄
The feature are not prominent at all
😔
The background color is not according to the theme and the icons used are too small to see easily by users
About Us
🙄
Spacing problem, heading is not visible because of low contrast
🙁
The dashboard in laptop does not represent anything about Port Finance
Roadmap
😮💨
The purple color is not going with the theme.
🙄
The overall design can be improved and the arrow button can be brought up to save user effort
Footer
🙁
Audited by is taking more space than footer
🙄
The Social Icons are very small and not very prominent
Redesign
🤔
Solution
Navbar
😎
Changed the position of Navlinks to Centre
⚙
Increased navbar height to make it more prominent
Hero Section
🔎
Fixed the spacing problem. Increase hero text size to make it more prominent
👌
The Go to Dashboard button is in contrast with the background and is visible at first glance. Also added a button for documentation if the user want to understand the product better
🙂
The brand logos are in a movable strip to give it a minimal theme to make it less overwhelming for user
Feature Section
🤩
Increased the size of the feature text and contrasted it with the background to make it prominent
😶🌫️
Added some visual cue to grab users attention on the features
About Us
😎
Fixed the spacing issue. Made the text and button even and consistent according to the design pattern
😄
Added a fade Port Logo at the background
🤑
Added live counter for Market Size, Total Borrowed, % Lent out to make Port look more credible to user
Roadmap
😎
Added a line with clear tick marks which represents a roadmap
😄
The arrow button are close to the roadmap to increase accessibility
Markets
👌
Change the Logo grid from 3*3 to 5*5 as there was one extra which was making the whole design unever
📌
Added good amount of spacing to make the sections easily readable
Social Links
💡
Added a section for social links for users to join and give feedbacks about the product
Footer
😎
Decluttered the footer section and gave a padding to fit all the content
😄
Audited by moved to footer to make the whole design more neat and minimal
Prototype Video
Website Prototype
💡
Its interactive, so don't hesitate clicking on the different areas 😁. Also press Z anywhere in the prototype to change the width of the prototype.
.png%3Ftable%3Dblock%26id%3D202b8943-e0ed-420f-b5e0-aeede91f224d%26cache%3Dv2?width=1500&optimizer=image)
