Catalog Page for E-Commerce Service | Old Souls 1

For this e-commerce catalog page, my goal was to create a seamless and visually engaging browsing experience that helps users find and purchase artwork effortlessly. Every UX decision prioritizes clarity, efficiency, and ease of use.

1. Clear Navigation & Searchability

I ensured users could quickly locate their needs through search, filters, and sorting options. The search bar at the top allows for quick queries, while filters in the left sidebar provide structured navigation. Categories like "Artist/Designer," "Style," and "Theme" are expandable, preventing cognitive overload while still offering deep customization.

Selected filters appear as tags at the top, making them easy to remove without disrupting the flow. There are additional filters along the way, but I kept the display minimal.

2. Product Card Design for Easy Scanning

Each product card is structured for at-a-glance decision-making:

High-quality images keep the artwork as the focal point.

Title & Artist Name for quick recognition.

Clear pricing, with discounts highlighted in a subtle yet noticeable way.

Call-to-action buttons ("Add to Cart" and "More Detail") allow users to act immediately or explore further.

Wishlist Icon in the top right for easy favoriting.

3. Visual Hierarchy & Readability

I emphasized ample white space to maintain an elegant, gallery-like feel. Typography is clean and legible, ensuring effortless scanning. Discount labels use soft color contrast to guide attention without overwhelming the design.

4. Sorting & User Control

The “Sort By” dropdown menu (top-right) allows users to control how they browse, whether by relevance, price, or popularity.

Final Thoughts

My goal here was to make browsing feel effortless, like strolling through a beautifully curated art gallery, but online.

I wanted the layout to be clean, the interactions to be intuitive, and the shopping experience to feel smooth and enjoyable. Whether someone is casually exploring or on a mission to buy, everything is designed to help them find what they love without frustration.

At the end of the day, good design should stay out of the way and just let people enjoy the experience, and that’s exactly what I aimed for here.

Tools used

Figma

From project brief

Topics

Share

Reviews

4 reviews


Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum eni

Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa fusce...

Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa fusce...

Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue te

26
Claps
Average 4.3 by 6 people
5 claps
4 claps
3 claps
2 claps
1 claps
Create your very own Design a Product Catalog Page project and get mentor feedback.
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>