Case Study
JMT Beauty - Web Design Case Study
CRO-first
UX & Performance
Component system
Traffic and catalogue were steady, but the site leaked on PDP and during checkout—especially on mobile. We rebuilt the product and checkout experiences around buyer intent, added a performance budget, and shipped a reusable component system so promotions can go live fast without slowing pages.
Project highlights
Streamlined checkout
Clear progress, focused headers, and trust cues reduce hesitation, especially on mobile.
Performance budget
Image pipeline, script hygiene, and safe lazy‑loading to improve perceived speed and stability.
Component system
Reusable blocks for promos and bundles so campaigns ship fast without design drift.
Measurement‑ready
GA4/GTM baseline events to read PDP → cart → checkout paths (consent‑aware, no PII).
Client & Industry
JMT Beauty – eCommerce
Platform
Shopify, GA4/GTM, performance budget
Services
- UX & UI Redesign
- Checkout UX
- Component Library
- Responsive Performance
- Accessibility
Timeline & Team
- Timeline: 6 weeks from kickoff to launch
- Team: UX, UI, Front‑end, Performance, QA
Challenges
- Cluttered PDP hierarchy and weak above‑the‑fold clarity
- Mobile LCP around 4.8s causing early bounces
- Drop‑off between shipping and payment steps
- Inconsistent trust and returns messaging
What we changed
- New PDP hero with clear price, options, and primary CTA; sticky add‑to‑cart on mobile
- Checkout UX: progress clarity, trust microcopy, distraction‑free header
- Image pipeline optimization, preconnects, safe lazy‑loading to cut LCP
- Component library for promos and bundles without rework across pages
- Analytics baseline (GA4 events) to read PDP → cart → checkout drop‑offs
Outcomes
- Reduced drop‑off between shipping and payment steps (post‑launch analysis)
- Faster mobile load and interaction, guided by a performance budget
- Clearer PDP hierarchy increased add‑to‑cart intent
- Checkout clarity and trust improvements supported completion
Component system
We shipped a lightweight library (cards, hero sections, product highlights, proof banners) so campaigns and bundles can be assembled quickly without design drift or performance regressions.
- Consistent spacing and typography scale
- Re‑usable PDP blocks (benefits, FAQs, cross‑sell)
- Accessible states and focus styles
Performance & accessibility
A performance budget guided decisions: image formats and delivery, script hygiene, and interaction latency. Accessibility checks covered contrast, keyboard flow, and semantics.
- Core Web Vitals monitored (LCP, INP, CLS)
- Lazy‑load with safe priorities; preconnects for third‑parties
- ARIA labels and focus outlines on key flows
Gallery
Like what you see?
Tell us your goals and we will map a similar playbook for your site.
We’ll review your site and share quick wins. Bilingual support (EN/ES). Toronto‑based.
- (437) 286.27.25
- hello@sellonlinemkt.com
Contact