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
Smartwatch Design for Messenger App
Practice your interaction design skills and design experience optimized for smartwatches.

Project
Bridge: UI/UX Rebrand of a Blockchain SCM Product
A UI/UX overhaul project of Bridge, a blockchain-based enterprise supply chain management web app originally called BSCM. This short case st

Project
Pulse Music App - Light/Dark Mode
This project presents a mobile music streaming interface designed in both light and dark modes. The visual direction combines Japandi minima

Project
Monetization Strategy
This project evaluates two monetization models (freemium and paid) for a new mobile point-and-click adventure game. It compares their streng

Project
Designing A Better Co-Working Experience Through CJM
Project ContextThis project focuses on improving the experience of individuals using co-working spaces. The objective is to identify key pai

Project
Design a Settings Page for Mobile
Showcase your information architecture and content strategy skills by crafting a settings page for mobile.
Visual Design Courses
Course
UX Design Foundations
Learn UX design fundamentals and principles that create better products. Build foundational knowledge in design concepts, visual fundamentals, and workflows.
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.









