<?xml version="1.0" encoding="utf-8"?>
Open full project

For the e-commerce platform catalog page, I designed a user experience that prioritized ease of navigation and efficient product discovery.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
Share your insights — leave a project review and help others grow their skills

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
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>