Note: This is a website redesign (UI-focused) case study that was part of a Bounty Challenge conducted by SuperteamDAO in early 2022.

About Port Finance

Port Finance is a Defi protocol that aims to provide an entire suite of Defi products including borrowing & lending, swap aggregator, and Portfolio tracking.

Problem

Port Finance’s website lacked the right visuals needed to connect with its audience. The design didn’t seem appealing, and it needed some UI improvements to make things more approachable.

The Redesign

Screen: Landing Page

Goal: To effectively share information about our product or service with the right audience. We aim to grab users' attention by providing key details such as product features, development plans, team members, and investors.

Untitled

❌ The CTA in the header blends into the background due to similar colors, leading to contrast issues.

❌ The left and right margins on the landing page are noticeably different.

❌ Important tabs like light paper and docs in the header are missing, which are vital for web3 space projects.

❌ The entire headline is colored and overly bold, distracting from the main content.

❌ The CTA button is disproportionately large compared to its inner text.

✅ Adjusted the CTA color to ensure a clear contrast with the background and changed the copy as well.

✅ Unified the colors and margins to show uniformity.

✅ Added these tabs so users can get more info about the company easily.

✅ Reduced the weight of the heading a bit and kept it simple.

✅ Revamped the CTA button design, adding a subtle glow for emphasis.