Unify product pages to build buyer confidence and speed up feature delivery

A Case Study: Product Listing Unification

Pain point: inconsistent UI on product pages looked unprofessional and reduced trust

Product listings on Inxeption properties were a mess. Five different code bases replicated the same pages, meaning the experience varied depending on how a customer landed there. Sometimes, key product details were missing. Other times, design components clashed.

Customers would be confused, and the incoherence would erode trust in the brand. Even simple updates required designing for multiple versions of the same page, slowing progress and frustrating the team.

Outcome: we unified the UI across four of five repos, removing distractions and accelerating development

Instead of juggling five product listing versions, the team now designed one coherent experience for four of the five active repos, and descoped the less-used fifth version for a future date.
Confusion dropped, and the brand felt more trustworthy.
The page appearance and layout was modernized to provide a better customer experience.
Even better, the consistent foundation made it far easier to support faster innovation and introduce new features.

Before: four different UIs and capabilities for the same product listing page, depending on the code repo

WordPress: our first product page for WordPress stores powered by Inxeption. Limited by the styling you can overlay onto WordPress.

EasyOrder: our second type of product page for a hosted online store, targeted to distributors and resellers

PURL: Product URL, a standalone product page for quick sharing to customers that requires no online store; evolved from EasyOrder

Marketplace: fourth type of product page, evolved from PURL, intended for our own Industrial B2B marketplace

After: modernized design based on the fifth version, "Flash Sale" product pages, applied to three of the four versions above. WordPress was descoped for a future release.

How we got here

We had five different versions of the product listing page, each built with one-off code rather than shared components:

WordPress: for Inxeption-powered WordPress stores
EasyOrder: for sellers distributing through our hosted platform
PURL: a standalone Product URL for quick customer sharing
Marketplace: for listings on our B2B industrial marketplace
Flash Sale: one-off promotions featured on our marketing site

As often happens in fast-moving startups, each evolved organically. To avoid breaking things, teams avoided retrofitting old CSS or aligning component logic across repos. But as tech debt grew, it became clear that inconsistent UI was harming trust—especially if a buyer saw the same product in two places with different layouts or missing information.

Newer features also weren’t standardized—some were hard-coded into only the latest templates, leading to internal confusion about setup and visibility. These features had value across the board, and unifying them would reduce mental load for design, engineering, and QA.

My goal: guide a redesign, ensure quality, and expand

To move forward, we agreed to base the unified UI on the Flash Sale version. In parallel, we’d design the ideal version of the page, prioritize which features to include in the first release, and then scale back the design to match those priorities.

From there, we’d collaborate closely with engineering through implementation and testing, and finally, build new features on top of the unified foundation.

I guided visual refinements to ensure adaptability

We decided to use the most recent design—the Flash Sale version of the product listing page—as the design for the unified UI. The page was already in production, but each page was hand-coded for the optimal appearance; it wasn't dynamically generated.

Therefore, our team reexamined the UI and behavior of every section on the page to make sure it would look just as good almost completely empty as it did fully loaded with every optional feature.

I wasn’t the visual designer, but I still played a role in shaping the page’s aesthetic by collaborating with another designer. Here are some examples:

"You May Also Like": Initially, this section was a small table similar to "Compare with similar items" at Amazon. However, given time constraints, I suggested that the "Related Products" UI was sufficient to reuse for MVP, which also reduced the busy-ness of the page.

I also provided input on outline colors, font size, box shadow, title height and truncation, scrolling, content, and more, to result in the design shown here.

Balacing the layout across scenarios: The initial mockups included all sections and some section combinations, but the layout needed to remain balanced no matter which content appeared.

I flagged layout issues on the test server and gave spacing guidance. For example, when inventory and certifications were present but not a logo or key features, I recommended aligning inventory to the top left of the product image and stacking certifications below with proper padding.

Juggling multiple CTAs: Sellers could offer multiple actions—Buy, Request Quote, Bid, and combinations of those. I gave feedback on the visual hierarchy, supporting the use of color to emphasize “Buy” as the primary action.

I also reviewed the layout choice to place “Bid” next to “Buy,” since both involve set prices, while “Request a Quote” remained on its own row due to its longer label and different transactional intent.

I shaped the strategy for phased implementation and feature rollout

I collaborated with Engineering and Product leadership to decide when and how to design and implement certain features. Here’s a summary of our decision-making:

Avoiding incremental unification: Unifying one repo at a time didn’t make sense—we were building shared components to work across all pages. Tackling repos individually would've meant repeatedly tweaking components as new requirements emerged. Instead, we reworked all hosted pages at once.
Delaying WordPress integration: WordPress pages were different—they weren’t hosted by us; only the content and interactions were powered by Inxeption. They also had lower usage compared to our hosted pages. So, we prioritized unifying four of the five repos and planned to address WordPress later.
Mobile considerations: The responsive design used stacked columns, which caused features to appear out of order on mobile. Given our timeline and business goals, we launched a unified desktop MVP first, with plans to optimize mobile post-release.
Feature rollout strategy: One motivation for unifying the UI was to enable new features like certification badges, manufacturer logos, and product-specific attributes. While leadership was eager to launch these quickly, we aligned on prioritizing UI unification first, knowing it would make future enhancements easier and more consistent.

I advocated for expanded testing and created a detailed MVP testing plan

Because this UI-heavy feature impacted one of the most critical pages in our ecommerce platform and required validation across four versions, I pushed for expanded testing with full cross-functional involvement: designers, frontend and backend devs, PM, and QA. Leadership agreed, and I led a focused effort to document findings, resolve bugs quickly, and ensure a high-quality release.

When I saw there was no thorough test plan to validate implementation against design, I created the detailed checklist below. It guided our rigorous UI testing—take a look to see the depth of coverage.

Copy of Notes - Unified PDP release readiness sync

I identified mobile design gaps and guided their resolution

After unifying the desktop product listing page across EasyOrder, PURL, Marketplace, and Flash Sale versions, I turned to cleaning up the mobile experience. While the developers had made the page responsive, it wasn’t truly optimized for mobile.

The image gallery sat far below the main image instead of just beneath it.
Key calls to action were nearly invisible at the bottom of the page. On desktop, they appeared in the right column, which dropped below the main content on mobile.
A disclaimer meant to appear at the bottom showed up mid-page, due to stacking order issues.
On top of that, there were spacing, padding, alignment, and line-height inconsistencies throughout.

Below is an idealized mobile version I designed, alongside the quick-and-dirty annotated version I actually shared with the developer, capturing how we collaborated in real time. (Don’t let the pumpkins alarm you.)

I led the design of new features to extend the now-unified UI

To complete our phased rollout, I led the design of six feature enhancements in under two months—momentum made possible by the unified UI. Below are examples of new features we brought to market faster as a direct result of that unification.

Key features: we converted the "Promotional Features" section of the Marketplace version into a standard section available in the unified product listing page.

Badges: we implemented fully customizable certification badges, stickers (image overlays to call out "New" or "Sale," etc.), and assurances (icons + text to assure "Secure checkout," "Fast, free shipping," etc.).

Headers: we implemented customizable headers using the same extensible badge framework, leveraging existing functionality to move quickly and enhance seller branding.

Product-specific attributes: We sped up product listing creation by introducing product types (e.g., solar panels, AI hardware) and allowing sellers to define required attributes for that type. This boosted consistency and reduced the mental load on sellers.

Reflection

This project reminded me that design leadership isn’t just about pixels—it’s about shaping experiences through collaboration, clarity, and connecting dots across roles and systems. Even though I wasn’t the visual designer, I helped refine the aesthetics, clarify visual hierarchy, and guide trade-offs that led to a cleaner, more scalable UI.

One of my most valuable contributions was complementing our QA lead with a design-focused eye for detail. With so many visual variants, it would’ve been easy for inconsistencies to slip through. By creating a detailed checklist and rallying a cross-functional review, we caught issues early and launched with confidence, emphasizing that great design carries through to quality and accountability.

Mobile optimization reinforced a classic lesson: responsive doesn’t always mean usable. Since this was a redesign on existing code, it made sense to prioritize desktop. Still, reviewing the mobile experience later highlighted how quickly UI logic can break down across breakpoints. On future projects, especially from scratch, I’d advocate for a mobile-first approach.

Looking back, the work we did went beyond a visual refresh. We transformed a fragmented, inconsistent product listing experience into a unified system that promoted trust and accelerated development. It was a good example of how thoughtful, behind-the-scenes UX work can have a lasting impact.

Page updated

Google Sites

Report abuse