The e-commerce platform "ShopEase"
For the e-commerce platform catalog page, I designed a user experience that prioritized ease of navigation and efficient product discovery.
- Product Cards: Each product card prominently displayed the product image, name, price, and a brief description. Users could easily click on the card to view more details or add the item to their cart.
- Filter and Sorting Options: Positioned on the left-hand side of the page, the filter options allowed users to refine their search based on categories, brands, price range, sizes, colors, and other relevant attributes. Sorting options were conveniently located above the product grid, enabling users to arrange products by relevance, price, popularity, or newest arrivals.
- View Toggling: Users could toggle between different view options to customize their browsing experience. They could choose between grid view, list view, or carousel view, depending on their preference and the type of products they were interested in.
- Pagination or Infinite Scroll: To accommodate a large number of products without overwhelming the user, I implemented either pagination or infinite scroll, allowing users to navigate through multiple pages of products seamlessly.
- Breadcrumb Navigation: A breadcrumb trail at the top of the page provided users with a clear indication of their current location within the catalog hierarchy, making it easy for them to backtrack if needed.
- Quick View Modal: For quick access to product details without leaving the catalog page, I incorporated a quick view modal that displayed essential information such as product images, description, price, and options for adding to cart or wishlist.
- Responsive Design: Ensuring a seamless experience across devices, the catalog page was designed responsively, adapting to different screen sizes and orientations without sacrificing functionality or usability.
Reviews
2 reviews
I like how user friendly and easy it is to navigate, but I believe there are some areas to improve
- Color Filter Visualization: While there is a sort-by-color option, visual color swatches in the filter may be more intuitive than the current text-based dropdown.
I understand lorem ipsum is used to save time, but since we have to evaluate the design based on the copy, leaving lorem ipsum in place makes it hard to determine whether the copy is clear. Users need precise and accurate information to make informed purchasing decisions. As you know, placeholder text offers no value to the user and can lead to confusion.
I'm glad to see someone's submission for this design brief! I like the design style—simple and neat.
What I'd improve:
- The panel with "Sort by," and filters for brand, size, and color uses a font size that is too small. Additionally, the presence of a unified "Sort By" button alongside specific sorting options like brand, size, and color seems confusing and could be rethought.
- Consider adding pagination at the top of the list as well.
- I'd revisit the font sizes throughout. Some elements, including the item price, seem very small and would benefit from being larger.
- Check and, if necessary, increase the contrast of the font colors. For instance, the information below the item "Men's Regular Fit Shirt" is so pale that it strains the eyes.
Keep it up!💪🏼
9 Claps
Average 4.5 by 2 people
You might also like

Project
Sojo NFT Marketplace
Sojo is an innovative digital marketplace where creators and collectors can buy, sell, and trade unique NFTs (non-fungible tokens) across va

Project
Heuristic Evaluation of Revolut Mobile App

Project
From Idea to Full-Stack Web App
Why I Built a Finance App for “Regular People” Like Me: As a product designer and naturally curious person, I’m always exploring new ways t

Project
Docto
This is an app for medical services, and these are the two variants of light and dark mode. Below, I am describing some of the decisions. I

Project
Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
This project is an unofficial, self-initiated redesign created for the Uxcel & UXPilot Challenge.

Project
Fundraising Website
The fundraising website is a dynamic platform designed to support individuals, communities, and organizations in their efforts to raise fund
Visual Design Courses
Course
UX Design Foundations
Learn the essentials of UX design to build a strong foundation in core principles. Gain practical skills to support product development and create better user experiences.
Course
Introduction to Figma
Learn essential Figma tools like layers, styling, typography, and images. Master the basics to create clean, user-friendly designs
Course
Design Terminology
Learn UX terminology and key UX/UI terms that boost collaboration between designers, developers, and stakeholders for smoother, clearer communication.