Redesigning eCommerce listings for flexibility and efficiency

As part of a platform rebuild, I was brought in as the lead designer to rethink the eCommerce listing pages. The goal was twofold: improve the customer experience and help the internal team adopt a scalable, component-driven design approach.

By introducing atomic design principles and collaborating closely with developers, we created a system of reusable components that streamlined the build process, reduced QA complexity, and eliminated edge cases. The redesign wasn’t just about better listings—it was an opportunity to move the design system forward, setting a stronger foundation for future projects.

Rebuilding eCommerce Listings with a User-Centric Lens

The platform’s existing listing pages were functional but outdated, and the user experience wasn’t optimised for product discovery or conversions. The rebuild provided a unique opportunity to address customer frustrations while rethinking the internal processes behind the design and development of these pages.

With data-heavy listing pages spanning multiple categories and filters, flexibility was critical. The redesign had to ensure components worked seamlessly across all scenarios without introducing unnecessary complexity. This approach not only enhanced usability for customers but also accelerated development time by reducing the need for custom fixes.

Adopting Component Thinking to Bridge Teams

The first step was understanding the current state of the listings and their associated workflows. Through user feedback and analytics, I identified usability issues such as difficulty scanning product information and inefficiencies in navigation. Observing team workflows also revealed collaboration gaps between designers and developers, leading to inconsistent outcomes and delays.

To address these challenges, I introduced atomic design principles. By designing reusable components—like buttons, cards, and filters—we ensured that each element worked seamlessly across every category and filter combination. This modular approach reduced development time and QA effort by minimising edge cases, ultimately speeding up delivery.

The modular components not only improved the rebuild process but also contributed directly to advancing the company’s larger design system initiative. This redesign served as a testing ground for component thinking, helping to refine the design system in parallel.

“The shift to component-driven design didn’t just improve the listings - it helped teams think more modularly, setting the stage for a unified design system.”

Data-Driven Design Meets Development Precision

A/B testing was integral to the redesign process, validating every decision and ensuring that changes were rooted in user behaviour. This data-driven approach allowed us to fine-tune critical elements such as visual hierarchy and interaction patterns, ensuring key product information was easy to scan and navigation was intuitive.

Clean, consistent layouts created a cohesive look and feel, while enhanced filters and sorting options made product discovery effortless for users. Developers benefited from reusable components that aligned with atomic design principles, simplifying implementation and establishing a shared design language across teams.

The Impact

The redesigned listings delivered significant improvements for both users and internal teams. Customers experienced a more seamless and engaging shopping experience, while developers and designers benefited from increased collaboration and efficiency.

The impact included:

• Improved Conversion Rates: A smoother user experience directly contributed to higher sales and increased customer satisfaction.
• Streamlined Workflows: Teams embraced the component-driven approach, improving collaboration and reducing redundant work.
• Scalability: The atomic design principles laid a foundation for future platform enhancements, bringing the company closer to a unified design system.

“This redesign wasn’t just about listings - it became a catalyst for change, pushing both the platform and the design system forward.”

Reflections on Collaboration and Scalability

This project reinforced the importance of aligning design and development early in the process. Creating components that worked across all categories and filters not only reduced complexity but also set a new standard for how teams approached scalability.

Using the listing redesign as a testing ground for component thinking allowed us to make meaningful progress toward a unified design system. Solving these immediate challenges created long-term value, demonstrating that even small, focused efforts can drive significant change when part of a bigger vision.

“Collaboration, adaptability, and a shared focus on scalability turned this redesign into a pivotal moment for both the team and the platform.”