POC: Enhance Filter UI

[lauchaves]

🛠️ Issue

Closes #14

📖 Description

• The product filters are functional but lack an optimal design for a seamless user experience. We aim to improve the UX to make it more intuitive and user-friendly when filtering products on the marketplace page.

✅ Changes made

For this proof of concept (POC), I focused on improving the product filters to make the user experience more friendly and easy to use. I wanted to make the interface smoother and more intuitive, taking inspiration from popular sites like Amazon to make it as user-friendly as possible.

What I worked on:

• Navbar instead of Header: I switched out the header for a more practical navbar. This change makes it easier to navigate and access the important parts of the site.

• Updated Search Bar: I made the search bar bigger and centered it on the page. I also moved the home button to the left side (which will probably become the logo later), so it feels more balanced.

• Sub-Nav & Menu: I added a sub-nav with a hamburger menu and a "Today's Deals" tag. This section can be updated later with more categories like "Trendy" or "New Arrivals" to keep things fresh and exciting.

• Personalized Sidebar: To make the sidebar feel more personal, I added a greeting that says "Hello, user_name!" along with a person icon. It’s a small detail, but it makes the site feel more connected to the user.

• Design Tweaks: I also added dividers between sections, adjusted the spacing to make everything breathe better, and changed some of the text to make it clearer.

• Sidebar Menu Behavior: I added a feature that closes the sidebar menu when you click outside of it. This makes it much easier to get back to browsing once you've applied a filter less friction for the user.

• Slider Update: I added a second ball to the slider because the single one wasn’t very intuitive. Now, users can easily understand the range of options they can choose from.

I kept everything mobile-first, so the design looks great on both mobile and desktop.

📜 Alternative Approach for the Filters:

For a different approach, we could make the sidebar with filters static on desktop—just like how it's done on most e-commerce sites. It would stay fixed on the left side, making it easy for users to see and adjust the filters without opening a menu. This gives a more seamless experience when browsing on larger screens.

For mobile, we’d keep the hamburger menu, which works great on smaller screens. This would give us consistency across devices while keeping the design clean and simple.

However, this would need a bigger refactor of the layout, as it would require a significant change in how the filters and sidebar are shown on different screen sizes, since this is a POC, I didn’t want to delay the project any further, but def can be done in feat issue 🚀

Demo

Screen.Recording.2024-11-25.at.12.32.07.AM.mov

[lauchaves]

@danielcdz this is ready for review

[danielcdz]

Hey Lau! awesome job! Do you have the latest changes? cause in the latest version products cards now have images and I don't see them in the video you attached

[lauchaves]

@danielcdz the POC branch is not up to date, maybe that's why :c but I do have another branch with the changes based on the main repo lmk if you want me to update this one from poc to main instead

[lauchaves]

Theres some scs on main branch

[danielcdz]

@lauchaves hahaha I completely forgot that detail xD, is ok you can leave it as it is right now 🫡

[danielcdz]

lets keep these changes on the poc branch

[lauchaves]

@danielcdz alright haha no prob!

[danielcdz]

LGTM