Product Detail Page Redesign

Improving the shopping experience to boost performance, align with our design system,
and create a user-friendly space for customers to shop and discover new products.

Company
LeafLink

Role
Product Design & research

Timeframe
2024 - 2025

LeafLink embarked on a broader modernization of its e-commerce experience, aiming to retire legacy pages and unify around a more modular, performant design system. Among these goals, the Product Detail Page (PDP) was a key bottleneck. It not only had to deliver faster performance and consistency, but also support future features that would let customers shop more intuitively and explore more products.

  • LeafLink is a digital platform designed to streamline wholesale cannabis commerce. It connects licensed cannabis brands (sellers) and retailers (buyers) to facilitate order management, payments, logistics, and brand exposure in the cannabis industry.

  • Cannabis retailers, aka dispensaries, purchase cannabis products to sell to consumers. LeafLink supports them by providing a centralized platform to discover new brands, place orders, track deliveries, and manage payments, simplifying the purchasing process and improving operational efficiency.

  • Cannabis brands focus on making a variety of cannabis products, including flower, vapes, edibles, and accessories. LeafLink helps these brands by offering a marketplace for wholesale sales. This increases their visibility and helps them manage orders, track payments, and gather important insights. These insights are vital for improving sales and marketing strategies, contributing to their success in the competitive cannabis market.

Problem & Stakes

The existing PDP had never been rebuilt using the new design system, making it visually inconsistent and hard to maintain.

  • Performance was poor: page loads often took 10–16 seconds, frustrating users.

  • Over time, users lost faith in the page and resorted to alternative routes to access product information.

  • For LeafLink, that meant lower engagement on a page that should drive discovery and sales.

Because of all that, the opportunity was high: a refreshed PDP could recapture trust, re-enable discovery, and drive increased orders (especially across multiple locations).

Goals & Strategy

We distilled the project goals into two primary levers:

  1. Ease of reordering & multi-location support: retailers frequently order the same items across different locations; the new PDP needed to surface that clearly.

  2. Enable product discovery: don’t let the PDP be a dead end. Let users see related products, similar items, and recommendations.

Behind those, supporting goals included:

  • Adherence to the design system (consistency, maintainability)

  • Faster performance

  • A layout that could evolve with new features

Legacy Issues & Constraints

Before redesigning, we cataloged the major pain points:

  • UI didn’t follow the visual standards; components were custom and inconsistent.

  • The top banner looked clickable but wasn’t, confusing users.

  • Product name, pricing, layout, and details were misaligned and not following the design system.

  • Buttons had confusing visual weight (one was oversized), and labels/placeholders were inconsistent.

  • Brand / licensing UI was outdated.

We also discovered a technical constraint: the backend couldn’t yet support a fully ambitious vision with dynamically structured data in all sections. That meant we needed to be pragmatic in what features could ship immediately.

Legacy Product Detail Page (2015 - 2024)

Design Process & Iterations

Modal-first Experiment

To avoid a full rebuild of the PDP initially, we prototyped a lighter-weight modal alternative.

  • We removed the “haven’t purchased before” banner because it wasn’t driving action

  • De-emphasized brand logo to keep focus on the product

  • Placed interactive elements (favorites, thumbnail outlines, selected image cues)

  • Introduced a “More Products Like This” section

  • Moved description panels based on heatmap data showing certain sections were underutilized

  • Added pricing breakdowns for better unit cost clarity

  • Closed ancillary drawers (e.g. samples) by default

  • Disabled “Add to Cart” until a quantity was chosen (especially for multi-location use)

  • Condensed licensing details and shortened descriptions with “show more”

However, as we tested it, we found that the modal could only carry so much complexity without becoming cramped. We pivoted.

Legacy Product Detail Page (2015-2024) vs. Original Product Detail Modal (2020-2023)

Original Product Detail Modal (2020-2023) vs. Initial Additions (2023-2024)

Testing Variations

Vision Work / North Star Design

I sketched out a forward-looking PDP concept with:

  • Large, high-fidelity imagery

  • A side-rail layout for ordering and actions

  • Structured sections for strain / product details, variations (flavors, package sizes)

  • Shipping estimates, ratings, reviews, and related products integrated into the flow

This was our ideal future state, but backend limitations made it unfeasible in the short term.

Interim Solution

We adjusted to a more viable path: deliver feature parity with the modal plus meaningful enhancements:

  • Keep the new modules for discovery: one combining ads + organic recommendations, and another for more products from the same brand.

  • Fully responsive design (desktop + mobile): before, PDP was desktop-only.

  • Incremental improvements to layout, hierarchy, and shopping controls.

  • Still lean, but visually cleaner, more consistent, and future-ready.

Results & Impact

  • The new PDP was fully responsive, opening up mobile orders for the first time

  • Discovery interactions increased 20%, users engaged with the recommendation modules

  • Legacy PDP was fully retired, eliminating confusion and broken behavior

  • Across devices, users now experienced faster (max 2-second load time), and more reliable product pages

While we didn’t hit our full vision immediately, we delivered substantial improvements with lower risk, positioning the PDP for future enhancements once backend support was available.

Next

Reordering Optimization