Skip to content
FAAKHIR.MOTION®
All work

(UI/UX case study · 03)

Listly

A landing page rebuilt around a car dealer's buying decision — from an accurate promise to a refund guarantee.
UX auditInformation architectureInteraction designWeb
Listly redesign: homepage hero at desktop width
(Scroll-through · listly-pro.vercel.app)
Client
Listly
Role
UX audit · Information architecture · UI & interaction design · Front-end build
Year
2026 · about 2 weeks
Type
Self-initiated concept redesign
Tools
Figma, Claude Code, Next.js, Vercel
Links
Old siteNew site

Front-end built with Claude Code under my creative direction: I set the structure, the flow and the visual references, and the AI wrote most of the code.

(Overview)

Listly's old landing page rotated marketplace names through its headline — including ones the product didn't support yet — led with a secondary feature, and left the key question, "will this work with my dealership website?", near the bottom. I rebuilt the page around the buyer's decision path, and embedded the product film I'd made for Listly so the website and the film tell one story.
(The product)
A Chrome extension that fills Facebook Marketplace vehicle listings straight from a dealership's website. Paid SaaS with a 3-day free trial.
(Who it's for)
Busy, sceptical car-dealership salespeople and managers. They care how much time it saves and whether it works with the site they already have.
(The page's job)
Trial starts.

The problem

What the audit of the original site found.

  1. 01

    The headline contradicted the product

    The H1 rotated through marketplace names — Craigslist, Cars.com, CarGurus — including CarGurus, which the same page marked "Soon". The most important sentence promised what the product couldn't do yet.

    Original Listly hero with a rotating headline reading 'Your inventory on Craigslist Marketplace'
    (Before)

  2. 02

    It never said what Listly is

    Nothing above the fold said "Chrome extension" — the key fact for judging how much effort setup takes.

  3. 03

    It led with a secondary feature

    Feature 01 was photo branding removal. The core promise, a filled listing in 3 seconds, came second.

    Original first feature: dealer branding removal, shown before the speed feature
    (Before)

  4. 04

    The #1 B2B question was buried

    "Will it work with my dealership website?" was answered in one paragraph inside the comparison section near the bottom.

    Original comparison table near the bottom of the page
    (Before)

  5. 05

    Pricing without context, and no FAQ

    A price card with no heading, no onboarding steps, no billing details and no guarantee — for a paid tool that asks to touch dealers' listings.

    Original price card for $89.99 a month with no heading or explanation
    (Before)

Principles

  1. 01

    One clear promise above the fold

    A fixed, accurate headline and a "Chrome extension for car dealerships" eyebrow.

  2. 02

    Show, don't tell

    A working simulation of the product's core moment, right in the hero.

  3. 03

    Answer objections in the order people have them

    Will it work for me? How? Can I trust it? What does it cost? What if it doesn't work out?

  4. 04

    One primary action, always within reach

    "Start 3-day free trial" in the hero, nav, pricing and final section — with lower-effort paths beside it.

Key decisions

  1. Message accuracy

    (Before)

    Rotating "CarGurus / Craigslist Marketplace"

    (After)

    Fixed "Facebook Marketplace", matching the title, meta description and what's actually live

    (Why it's better)

    Never promise what's "Soon" in the headline. A stable H1 is readable, trustworthy and searchable.

    Before: the rotating headline naming Craigslist Marketplace
    (Before)
    After: a fixed headline, 'Your inventory on Facebook Marketplace, in under 3 seconds', with reassurance under the buttons
    (After)

  2. Reassurance at the CTA

    (Before)

    None

    (After)

    "$89.99/mo early-adopter price · Cancel anytime · Works on most dealer sites" under the button, plus "Watch the promo"

    (Why it's better)

    Removes price, commitment and compatibility doubts at the moment of decision — and gives the not-ready a lower-effort step.

  3. Compatibility

    (Before)

    One paragraph near the bottom

    (After)

    A strip of dealer platforms right after the hero, Live / Soon badges for each marketplace, and a fallback promise

    (Why it's better)

    Answers "will it work with what I have?" before the visitor has to ask.

    Before: compatibility mentioned inside the comparison table
    (Before)
    After: 'Works with the dealer sites you already run on' with Live and Soon badges
    (After)

  4. Feature priority

    (Before)

    Photos first

    (After)

    Speed first, with a bar comparing Listly (~3 s), other tools (30–60 s) and posting by hand (~15 min)

    (Why it's better)

    Lead with the core value, and make the claim concrete and comparative.

    Before: branding removal as the first feature
    (Before)
    After: 'Click a car, get a filled form in literally 3 seconds' with a time comparison
    (After)

  5. Personal ROI

    (Before)

    A static "~25 hrs saved at ~100 listings"

    (After)

    A slider: cars you list per month → hours by hand vs with Listly → time back

    (Why it's better)

    Each dealer sees their own number; personalised value persuades better than a generic stat.

    After: 'Fifteen minutes by hand. Three seconds with Listly.' with a cars-per-month slider
    (After)

  6. Pricing

    (Before)

    A price card with no heading

    (After)

    "One plan. Every feature." + 3 onboarding steps, billing through Stripe, cancel from the panel and a 14-day performance refund

    (Why it's better)

    Transparency plus risk reversal lowers the fear of committing; the 3 steps show how small the effort is.

    Before: a bare price card
    (Before)
    After: 'One plan. Every feature. Early-adopter price.' with onboarding steps and a refund promise
    (After)

  7. Objections

    (Before)

    No FAQ

    (After)

    Nine dealer questions, including "Does Listly publish listings without me?" and "Is Listly affiliated with Facebook?"

    (Why it's better)

    Handles worries about control, compliance and compatibility on the page instead of losing the visitor.

    After: 'Questions dealers ask us' FAQ
    (After)

  8. Navigation & type

    (Before)

    Demo · Features · Pricing · Privacy · Contact; four to five typefaces; H1 at 48 px

    (After)

    Product · Demo · Pricing · Compare · FAQ · Contact + "Add to Chrome"; two typefaces; H1 at ~94 px

    (Why it's better)

    The nav mirrors the buyer's questions and holds the main action; one consistent voice, and the headline is clearly where the page starts.

(On a phone)

The same first screen at 390 px wide, before and after.

Listly's original homepage on a phone
(Before)
Listly redesign on a phone
(After)

Structure

The new order follows the buyer's thinking: what is it → does it work for me → show me → what's in it for me → prove it → how does it compare → what does it cost → what if I have doubts → let's go.

(Old page order)

  1. 01Hero: rotating headline, one CTA
  2. 02What Listly does: 01 Photos
  3. 0302 Speed
  4. 04"Your numbers, live" stats
  5. 0503 Reach · 04 AI copy · 05 Relocation
  6. 06"See it live below" video
  7. 07Price card
  8. 08Compare table + stats
  9. 09Footer

(New page order)

  1. 01Live inventory ticker
  2. 02Hero: eyebrow, fixed headline, two CTAs, reassurance, interactive demo
  3. 03Compatibility strip
  4. 04Every listing, done for you: speed first
  5. 05Meet Listly — my product film
  6. 06Four things you'll never do again
  7. 07The math: ROI slider
  8. 08Your numbers, live: dashboard
  9. 09Compare table
  10. 10Pricing: steps, billing, refund
  11. 11FAQ (9 questions)
  12. 12Final CTA + "Talk to the team"
The old page in full (archived)The new site, live

Outcome

This is a concept redesign, so there are no live results. Below is what each change is designed to do, and how I'd test whether it works.

(What it's designed to do)

  • Designed so every level of readiness has a path: trial for the ready, the promo film for the curious, the ROI slider and dashboard for evaluators, the compare table for shoppers, the FAQ and refund for doubters, and "Talk to the team" for anyone who wants a person.
  • Designed to target the two biggest causes of a lost trial — fear of cost and fear of it not working — with microcopy under the button and a refund guarantee.
  • Foundations added: a share image, structured data, a <main> landmark and a skip link.

(How I'd measure it)

  • A/B test of the old vs new hero, measuring trial starts per visitor.
  • Engagement with the demo, the ROI slider, promo plays and FAQ opens.
  • 5-second test on both versions: "What is Listly and who is it for?"

(Trade-offs)

  • About 3× longer to scroll (≈6,300 px → ≈18,400 px at 1440 px). Long-form suits a considered B2B purchase, and nav anchors and repeated CTAs offset it — but scroll depth should be tested.
  • Naming competitors needs facts that stay accurate: the compare table is dated and needs regular review.
  • Many live demos mean more JavaScript, so it needs testing on older dealership PCs.

(Reflection)

I'd test whether the page can be shorter without losing trust — for example, folding the dashboard into the ROI section — and check performance on the kind of older PC a dealership floor actually runs. The A/B test on the hero is the first experiment I'd run.

(Also by me)

I also made the 0:55 product promo for Listly.

Watch the video

Have a product website that needs to work harder?

Start a project

(Next project)

Legal Connect UK

A launch film for a real-time legal marketplace.