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
Pawtify - Responsive Landing Page Brief
Description This is a landing page for a fictional pet salon called Pawtify, a modern, friendly pet salon brand designed to make grooming en

Project
Accessible Signup Form for SaaS Platform
Form

Project
SIPALA - Attendance, Leave, and Activity Management System

Project
Build a Product Roadmap
Design an experience that can help Thai farmer to monitor weather and grow farm business.

Project
Monday.com Color System
This project presents a redesigned, fully structured Color System for Monday.com with the goal of establishing a modern, minimal, and functi

Project
User Persona
Decision-Making Process Behind the User Persona CreationThe user persona was developed through a structured decision-making process to under
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.








