Turn on dark mode with cmd/ctrl + shift + L for the best viewing experience.
About Naming.Bonfida.org
This is a domain service that allows you to get your own domain (such as Pratyush.sol) that can be linked to your wallet address and used for all transactions. It's a brilliant idea because no one likes to remember their 32-digit wallet address all the time, and this tool can come in handy.
Why did I choose this?
Following the massive airdrop from ENS (Ethereum Naming Service), there is a rush to register your own domain in the web3 space as everyone wants to be a part of this entire culture and community. For the same reason, I tried to get my name on this website, however the user experience was lacking, and there are other aspects that I believe should be improved.
So, here's my view on the entire website's UI/UX. Let's get this project started.🚀🚀
First thing...
First thing that caught my eye was the improper design of the navbar. Let me breakdown it in parts.
Issues
1- The notification banner above the navbar has no close button.
2- The logo, navigation links, and call to action are not evenly spaced.
3- There are too many options, which might make a person feel overwhelmed.
4- The CTA on the navbar doesn't stand out as much as it should.
New Design
Here is what I fixed.
1- In the original design, the notification banner was too bright, so I toned it down to a minimum dark hue and concentrated on the text to make it easier to see, as well as adding a close button.
2- Properly distributed the navbar and made the Connect Wallet button as white to stand out.
3- I added My Domains and My Inbox to the Connect Wallet menu. You can see those parameters when you link your wallet.
Now, time for Landing Page
The importance of the landing page cannot be overstated. It instructs the consumer on how to utilize the product. It has the ability to sell your product and persuade users to purchase your item or service.
Breaking the landing page into sections.
Hero Section
Old Design
Issues
1- There is no proper instruction to what the user can do on the website. It just displays what is available.
2- The register domain redirects the user to a different page where they may search, making it a two-step procedure.
3- There is an overlap between the text and the image.
4- The hero section's alignment is off, and it appears like the entire design is leaking out of the website.
New Design
Solution
1- Added a domain counter that updates every second to increase trustworthiness.
2- In the headline, add the word 'get' to make it a legitimate directive.
3- Instead of Register Domain, I've incorporated a search area where the user can type their name right into the search box.
4- Corrected the alignment issue and put sufficient space between the image and the text so that it does not resemble the old style.
5- Added a 3 step process for user to quickly understand about the product
3-Step Process Design
Above all, I attempted to keep it as simple as possible so that the consumer can quickly read over the headline and obtain all the information they need about the product in one glance. A Watch tutorial CTA has also been included for people who wish to learn more before proceeding.
Hero Section Done✅, Now I will quickly skim through the whole page.
Featured Today Section
Old Design
Issues
1- There is just one feature domain. There is a lot of free space that might be used to promote additional highlighted domains.
2- Clicking Place a Bid sends you to another page where you have to click Place a Bid once more.
Redesign
Solution
1- Add a scrollable section to display more highlighted domains, increasing the possibility that a user will bid on any of them. This also ensures that the area is utilised and that the open space does not become a void.
2- Consolidated all of the information onto a single card, from which the user may place a bid.
Feature Section and Top Galactic Domains Section:
Old Design
Issues
1- The feature is dispersed throughout the site. Varied cards have different text sizes. For the Twitter card, there is no obvious CTA.
2- The leaderboard title and full list view are stacked wrongly. View Full List CTA with a dark backdrop is less inviting.
Redesign
Solution
1- Consolidated all features into a 2x2 grid type design with a clear colour scheme. Highlighted the Twitter feature so that the user knows where to click when reading the feature list.
2- Horizontally stacked Top Galactic Domains and View Full List, and updated the design style of leaderboard cards to match the website's theming. Reduced opacity to bring the gradient colour from the background to the focus.
That's it for the Landing Page. Lets move to the functionality of the website.
Let discuss domain cards
Old Design
Issues
Placing a bid is a multi step process in the Old design and it takes ages to get what you want
Redesign
Solution
1- I have tried to include all the information in one card
2- There are multiple variant that clearly says what to do
These cards address the majority of the website's use cases while also reducing steps to a mile.
