Magento 2 and User Experience (UX) Audits: A Step-by-Step Guide for Store Owners

Note: with Magento 2.3+ and MSI (Multi Source Inventory), isSaleable() may behave differently depending on configuration. See the dedicated stock section below for concrete checks.

5) Mobile

Why it matters: mobile is most traffic for many stores. A broken mobile experience kills revenue.

• Checklist
• Design is responsive and content reflows — never hide important CTAs behind hamburger menus only.
• Touch targets >= 44px, large CTAs.
• Images optimized (use srcset) and lazy-loaded appropriately.
• Forms: use input types (tel, email) to trigger appropriate mobile keyboards.
• Test on real devices: browser emulation is useful but not sufficient.

Quick mobile performance commands

# Use Lighthouse CLI for a quick mobile audit
npx lighthouse https://yourstore.example --preset=mobile --output html --output-path=report-mobile.html

How to audit product stock status and availability display (with Magefine link)

Displaying accurate stock availability is both a UX and trust signal. Customers hate adding a product to cart only to find it’s unavailable at checkout. This section shows how to verify what your store shows vs. the actual inventory data and how to fix mismatches. If you want a quick solution to force display of stock statuses consistently, Magefine provides a Force Product Stock Status module (more info: https://magefine.com/force-product-stock-status).

Step 1 — Verify what the front-end shows

• Open several product pages (simple, configurable, bundle) and note the stock label. Test when stock is zero and when stock is >0.
• Use incognito and a clean cache to avoid seeing stale pages.

Step 2 — Check the product inventory in Admin

• Catalog > Products > Edit product > Quantity and Stock Status. If using MSI, check Sources and Stocks.
• Check that “Manage Stock” and “Backorders” settings are what you expect (Stores > Configuration > Catalog > Inventory).

Step 3 — Programmatic checks

Use these code samples to fetch stock status in a reproducible way (developer console or small module). Two common APIs: StockRegistryInterface (for classic stock) and MSI APIs (for multi-source).

// Using StockRegistryInterface (classic stock)
use Magento\CatalogInventory\Api\StockRegistryInterface;

/** @var StockRegistryInterface $stockRegistry */
$stockRegistry = \Magento\Framework\App\ObjectManager::getInstance()->get(StockRegistryInterface::class);
$stockItem = $stockRegistry->getStockItem($productId);
$isInStock = $stockItem->getIsInStock();
$qty = $stockItem->getQty();

// Output
var_dump($isInStock, $qty);

// Using MSI (Magento Inventory) example to get salable qty
use Magento\Framework\App\ObjectManager;
use Magento\InventorySalesApi\Api\GetProductSalableQtyInterface;

/** @var GetProductSalableQtyInterface $getSalableQty */
$getSalableQty = ObjectManager::getInstance()->get(GetProductSalableQtyInterface::class);
$qty = $getSalableQty->execute('default', 'SKU123');
var_dump($qty);

Note: the first parameter is the Stock (like 'default') — ensure you pass the correct stock code for your Sales Channel.

Step 4 — Compare DB values directly (quick verification)

Be cautious when running direct queries on production. Prefer read-only access or use a snapshot.

-- Classic inventory tables (before MSI or if not using MSI)
SELECT product_id, qty, is_in_stock FROM cataloginventory_stock_item WHERE product_id = 123;

-- MSI tables (Magento 2.3+)
SELECT * FROM inventory_stock_1 WHERE sku = 'SKU123';
-- inventory_stock_X where X is the stock id (mapping in inventory_stock table)

Step 5 — Where display mismatches come from

• Theme templates hiding status or showing cached data.
• Full-page caching (FPC) with incorrect cache key for stock status — stock is dynamic and needs proper hole-punching or ESI.
• MSI misconfiguration where salable quantity and stock item differ.
• Third-party extensions that manipulate stock visibility (e.g., force out-of-stock to hide items).

If you want a quick, safe way to standardize what customers see, check the Magefine Force Product Stock Status module: https://magefine.com/force-product-stock-status. It helps present consistent availability messages without fragile template hacks.

Free tools and techniques for Magento 2 UX audits (no marketing budget)

You can run a very effective UX audit with free tools. Here’s a compact toolkit and how to use each tool for Magento 2.

1) PageSpeed Insights / Lighthouse

What it gives you: Core Web Vitals, opportunities and diagnostics for performance. Run it on key pages: home, category, product, and checkout.

How to run:

# Quick one-off with Lighthouse CLI
npx lighthouse https://yourstore.example --preset=mobile --output html --output-path=report.html

# Or use PageSpeed Insights web UI
https://pagespeed.web.dev/

Magento tips from Lighthouse results:

• Eliminate render-blocking CSS/JS: move non-critical scripts to bottom or load async/defer.
• Use optimized images (webp) and responsive srcset.
• Leverage server-side gzip/brotli and enable HTTP/2 or HTTP/3 if possible.

2) Hotjar (free tier) or similar session recording/heatmaps

What it gives you: recordings, heatmaps, and feedback polls to see where users click, scroll and drop off.

How to install (paste into head):

<!-- Hotjar tracking snippet (replace YOUR_HJ_ID) -->
<script>
    (function(h,o,t,j,a,r){
        h.hj = h.hj || function(){(h.hj.q = h.hj.q || []).push(arguments)};
        h._hjSettings = {hjid: YOUR_HJ_ID, hjsv: 6};
        a = o.getElementsByTagName('head')[0];
        r = o.createElement('script');r.async=1;
        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
        a.appendChild(r);
    })(window, document, 'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

Tips:

• Record checkout funnels and filter for drop-off events.
• Use heatmaps on PDPs to verify where people look for stock info.

3) Google Analytics (GA4) — event tracking

What it gives you: funnel conversion rates, behavior flows, and time-on-page. Track key events: product view, add-to-cart, begin checkout, purchase, and checkout abandon.

Example add-to-cart event using gtag:

<script>
function sendAddToCart(sku, value, currency) {
  gtag('event', 'add_to_cart', {
    items: [{id: sku, quantity: 1}],
    value: value,
    currency: currency
  });
}
</script>

Tip: If you use Google Tag Manager, create custom events for step completions so you can build funnels in GA without touching templates often.

4) User testing — cheap/free techniques

What it gives you: direct qualitative feedback. Ask colleagues, friends, or actual customers to complete a 3-task script (search, find product, checkout). Record sessions (Zoom or Hotjar) and note where they hesitate.

5) UX checklist automation with scripts

Automate some checks with simple scripts: Lighthouse, sitemap crawling, and a script to verify product pages return 200 and display stock snippet.

# Simple curl check for a list of products
while read url; do
  status=$(curl -s -o /dev/null -w "%{http_code}" "$url")
  echo "$url -> $status"
done < products.txt

Magento 2 specific UX errors developers often make

Developers are focused on functionality and often miss UX implications. Here are common mistakes and how to fix them.

1) Caching misconfigured — dynamic data gets cached

Symptoms: stock status, cart count, or personalized pricing showing stale or global data in full-page cache (FPC).

Fix:

• Identify dynamic blocks (cart summary, stock status) and use proper cache hole-punching or ESI with Varnish.
• For Magento Enterprise / Commerce with FPC, ensure private content is used for sensitive blocks.
• Test with a logged-in and logged-out user to verify differences.

2) Overriding templates without keeping accessibility or semantics

Symptoms: custom theme removes form labels, or changes button semantics causing screen readers and keyboard users to break.

Fix: keep semantic tags, aria attributes, and tab order. Always test with keyboard-only navigation and a screen reader basic pass.

3) Complex forms & poor validation UX

Symptoms: forms with server-side only validation; errors shown as generic messages at the top rather than inline next to fields.

Fix: add client-side validation, clear inline messages, and preserve user input after validation failures. Use HTML5 input types for mobile convenience.

4) Slowing the critical rendering path with unnecessary JS

Symptoms: slow first contentful paint, long TTI (Time to interactive).

Fix: defer non-critical JS, split bundles, and enable HTTP/2 to avoid many small requests. Use Magento’s built-in merge/minify carefully; sometimes modern bundling with webpack gives better control.

5) Assuming default Magento UX is enough

Symptoms: leaving default category/product layouts and language that don’t match the audience leads to confusion. Every catalog is different — adjust labels, filters, and landing pages to customer expectations.

Prioritized 30-day action plan to fix UX problems

The 30-day plan assumes you found a handful of problems during your initial audit. This is a practical, prioritized list grouped by impact and complexity. Each task includes metrics to measure success.

Week 0 — Quick wins (Day 1–3)

• Fix obvious template errors (missing CTA, hidden stock labels). Metric: check increase in add-to-cart rate for fixed PDPs. Baseline > target +3–5%.
• Enable guest checkout if disabled. Metric: reduce checkout abandonment % — track begin_checkout to purchase funnel.
• Basic GA event tagging for add-to-cart and checkout steps. Metric: ability to measure funnel drop-offs (no immediate conversion); goal: have data.

Week 1 — Performance & search (Day 4–10)

• Run Lighthouse on home, category, product, checkout; fix top 3 recommendations (images, render-blocking JS, slow server). Metric: improve LCP / FID / CLS. Target: LCP < 2.5s, CLS < 0.1.
• Implement or improve search suggestions/autocomplete. Metric: increase conversions from search results; reduction in zero-results queries.
• Revisit caching: ensure private dynamic blocks are uncacheable; flush varnish after changes. Metric: no stale stock displays observed in 24–48h sampling.

Week 2 — Product pages & stock display (Day 11–17)

• Standardize stock display across themes. If needed, install/verify Magefine Force Product Stock Status: https://magefine.com/force-product-stock-status. Metric: reduce customer service tickets related to stock mismatch; track product availability complaints.
• Add structured product data (schema.org) to PDPs. Metric: improved rich results (monitor Search Console).
• Start Hotjar recordings for a sample of PDPs and the checkout. Metric: watch 20–30 sessions to identify 3 recurring friction patterns.

Week 3 — Checkout and forms (Day 18–24)

• Simplify checkout form fields and add address autocomplete. Metric: decrease form abandonment and time-to-complete checkout (GA average time per session should show shorter checkout sessions).
• Improve payment error messaging and retry flow. Metric: fewer failed payments turning into support tickets; improved conversion at payment step.
• Run mobile-specific fixes (larger touch targets, responsive widgets). Metric: uplift in mobile conversion rate.

Week 4 — Iterate and measure (Day 25–30)

• Run A/B tests for the highest-impact changes (button copy, add-to-cart placement). Metric: improvement in conversion rate (statistical significance target 95%).
• Collect feedback via a small on-site survey (Hotjar feedback widget). Metric: qualitative improvement and fewer reported UX issues.
• Set a recurring monthly audit checklist and automation. Metric: monthly reports show stable or improving core metrics.

Key metrics to track during and after the audit

These are the KPI’s to watch. I’ll keep it practical and tied to Magento-specific actions.

• Conversion rate (overall and by device) — primary business metric.
• Checkout abandonment rate — track by step (shipping, payment).
• Add-to-cart rate on PDPs — if this improves, your PDP UX is better.
• Session duration and pages per session — to detect browsing satisfaction or confusion.
• Time to purchase (days) — for repeat buyers and complex B2B flows.
• Page load metrics — LCP, CLS, FID from Lighthouse/Chrome UX report.
• Support tickets about stock/availability — a direct business signal if stock display is wrong.

Example fixes & code you can try today (step-by-step)

Below are short, copy-pasteable examples that address common issues. Always test in staging before production.

1) Prevent stock label from being cached by full page cache (simple hole-punch block)

Create a small block that renders stock status and mark it as private content in Magento. Idea: use customer-data to fetch dynamic content.

// Layout: app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>
    <referenceContainer name="product.info.main">
      <block class="Vendor\Module\Block\ProductStock" name="product.stock.dynamic" template="Vendor_Module::stock.phtml" after="product.info.price"/>
    </referenceContainer>
  </body>
</page>

// Block should use customer-data JS to render dynamic content client-side so it's not cached.

2) Quick MSI salable qty check script

// File: app/code/Vendor/Module/Console/Command/CheckSalableQty.php
namespace Vendor\Module\Console\Command;

use Magento\Framework\App\Area;
use Magento\Framework\App\ObjectManager;
use Magento\InventorySalesApi\Api\GetProductSalableQtyInterface;
use Symfony\Component\Console\Command\Command;
use Symfony\Component\Console\Input\InputArgument;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Output\OutputInterface;

class CheckSalableQty extends Command
{
    protected function configure()
    {
        $this->setName('vendor:check-salable')
            ->addArgument('sku', InputArgument::REQUIRED, 'Product SKU')
            ->setDescription('Check salable qty for SKU');
        parent::configure();
    }

    protected function execute(InputInterface $input, OutputInterface $output)
    {
        $sku = $input->getArgument('sku');
        $getSalableQty = ObjectManager::getInstance()->get(GetProductSalableQtyInterface::class);
        $qty = $getSalableQty->execute('default', $sku);
        $output->writeln("Salable qty for $sku: $qty");
        return 0;
    }
}

3) Add simple Lighthouse CLI job to CI for performance regression

# Add to your CI script
npx -y lighthouse-ci@0.6.0 https://staging.example --chrome-flags='--no-sandbox'
# or simple lighthouse run
npx lighthouse https://staging.example --output json --output-path=./lighthouse.json

Putting it together — how to run your first audit in one afternoon

Here’s a compact practical checklist you can follow in ~4 hours that gives immediate signals and a prioritized to-do list.

1. Pick pages: home, 3 category pages, 6 product pages (mix of simple/configurable), checkout start, checkout finish.
2. Run Lighthouse on each and note Core Web Vitals metrics (30–60 minutes).
3. Enable Hotjar recording for the 6 PDPs and checkout, collect ~20 sessions (overnight is fine).
4. Check stock status manually vs. Admin for 10 SKUs (15 minutes). If mismatches, prioritize stock fixes.
5. Run GA funnel check (if available) or at least add events so you can measure the next 30 days.
6. Run the cache and MSI checks (developer 30–60 minutes): reindex, check salable qty for contentious SKUs.

After this session you’ll have a prioritised list: performance, stock display, checkout UX, search. Start with quick wins and then schedule the heavier dev tasks in the 30-day plan above.

Final notes & recommended reading

Keep UX audits regular. Magento stores change all the time — new extensions, product imports, promotions — and each can introduce friction. Set a recurring monthly mini-audit: Lighthouse metrics, one Hotjar heatmap, sample stock checks, and GA funnel review.

Want the stock display problem solved faster? Look at the module: Force Product Stock Status by Magefine to standardize availability messaging across types: https://magefine.com/force-product-stock-status

If you’d like, I can:

• Help you run the first audit checklist and interpret the results.
• Generate a prioritized ticket list for your dev team based on the audit findings.

Keep it simple, measure everything, and iterate. Small UX improvements compound fast in Magento stores — especially when they target checkout, search, and product availability.

Happy auditing — ping me if you want a short checklist file or a sample script tailored to your store.