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
Customer Journey Map for a Co-Working Space
In this project, I made a Customer Journey Map (CJM) for a co-working space. The goal of this project is to understand how customers feel an

Project
Blip - Esport app design (Light & Dark UI)
Bonjour, comrades! Today I present the case of Blip - an esports hub app for gamers where you can check esports news, learn about upcoming t

Project
Reimagining Asana's Color System
I created a color system based on Asana's current project management tool. Accessibility and the emotions the colors evoke were the primary

Project
Latios - Free Portfolio Template for UX/UI Designers
Overview I built Latios because I kept seeing the same problem: designers with solid experience getting stuck trying to launch their portfol

Project
Workspace Booking Flow - UI/UX Design

Project
Responsive Main Screen
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.










