Home/Projects/THE CHA
Case Study · Cycling · chain care · Kickstarter-backed

THE CHA

Six products on one list, rebuilt as a storefront for one system.

CHA makes a solid-graphite bike chain lube: one applicator, three formulas and replaceable capsules, funded by 3,065 Kickstarter backers. On the old site all six products shared one list — one photo and one paragraph each, no product pages — and the system the brand describes was sold as three separate tools. We audited it on 9 Sep 2026, then rebuilt it as a custom Shopline theme in the existing brand: a page for every product, a shop by formula, the range and prices on the homepage, and Shopline’s own cart and checkout. It is built and published behind the storefront password, ahead of launch.

Track
Glow-Up+ Platform → Shopline
Stage
In build on Shopline
Before
Custom-coded site · Stripe checkout
After
Shopline · custom theme
Scope
Storefront redesign within the existing brandCustom Shopline themeSix product pages and the CHA SystemCRO / UX audit
Status
Built on Shopline · Pre-launch
Audited
9 Sep 2026 (before) · 9 Oct 2026 (after) · desktop 1440 / mobile 390 · Lighthouse 12.8
Where this project stands today. Built, not launched. The custom theme has been the published theme on thecha.myshopline.com since 25 September, behind the storefront password; thecha.cc still serves the old site. Built on the theme: the homepage, How it works, Why CHA, a shop by formula (plus an alternative shop page the client is choosing between), a product page for each of the six products, and the cart. Still to come from the client: photography for Trail, Storm and the refills (their cards show labelled placeholders), rider photos, and the final names, formats and prices — the €34 and €16 on the store are provisional and say so. About the Before. thecha.cc has changed since our 9 Sep 2026 audit, so the Before is the site as we found it: our own copy of the homepage from 10 September and the Internet Archive’s copy of the shop from 11 June. For the same reason there are no Before speed figures.
Homepage · first screen
thecha.cc as we found it — the logo, “The Smart Cycle Lube” and the film; no price or product on the first screen New Shopline storefront — the same film, one “Shop CHA” button, and free shipping over €30 in the bar above
Before After
Before — thecha.cc as we found it — the logo, “The Smart Cycle Lube” and the film; no price or product on the first screenAfter — New Shopline storefront — the same film, one “Shop CHA” button, and free shipping over €30 in the bar above
Measured, Not Estimated

The Numbers That Moved

0→6

A page for each applicator and refill, with the formula and the pack chosen on the page. Before, all six were cards on one list.

0→6

The old homepage sold the idea well and never showed the range or a price. The new one shows all six, with prices.

86→93

Lighthouse accessibility on the mobile homepage — the old page scored from our saved copy, the new one the median of three. The shop scores 90 → 93.

0→4

How long a capsule lasts, dirty chains, PTFE and PFAS, and what is in the box — on the product page. Before, they were in the FAQ or nowhere.

CRO / UX Audit

The Audit at a Glance

Nine dimensions, scored 0–10. Before is thecha.cc as we audited it on 9 Sep 2026; After is the Shopline storefront as it stands on 9 Oct 2026 behind the storefront password — including what is still on the punch list.

DimensionBeforeAfterWhat we measured
First impression & focusWhat loads, what’s covered, what to click
5
8
Before: the film, the logo and “The Smart Cycle Lube” — a strong first screen — but no price or product anywhere on the page, placeholder captions in production (“📸 …”, “🎬 …”), and a “Limited offer” pop-up in the markup. After: the same film, one “Shop CHA” button, free shipping over €30 in the bar, and the range with prices further down. The nav links over the bright film are hard to read.
Navigation & IACan a customer always keep browsing?
4
7
Before: the shop, FAQ and legal pages had a one-line footer; the FAQ was not in any footer; header links pointed at the page you were on. After: the same header and footer on every page (Shop · How it works · Why CHA · The CHA System · Distribution), a breadcrumb on product pages, a shop by formula. The FAQ, guide, press kit and policy pages are not on the store yet.
Merchandising & discoveryFinding the right product
3
8
Before: six products on one list, one photo each; the homepage never showed the range; Storm and Trail sold as separate €27 applicators although the pitch is one applicator, three formulas. After: all six on the homepage and in a shop filtered by Core, Trail, Storm and Refills, with formula and pack chosen on the product page. Five of six products wait on photography.
Product page conversionThe buy box and what supports it
1
7
Before: there were no product pages — a card in a list was the product page. After: breadcrumb, formula and pack choice, price, quantity, add to cart, “Free shipping over €30” beside the button, and the four questions riders ask, answered on the page. Prices are provisional and only CHA Core has a photo so far.
Trust & social proofReasons to believe, close to the buy button
3
5
Before: 3,065 backers and no ratings or reviews anywhere; one testimonial; the Kickstarter figures framed for distributors. After: riders in the field, the engineering and the science on the homepage, and a rider wall with a counter that stays hidden until there is a real number. No ratings yet — and none invented.
Mobile experience390px, thumbs, layout stability
5
7
Before: tap targets too small on the homepage (Lighthouse) and a cart that hid costs until checkout. After: a drawer menu, zoom allowed, no sideways scroll — but the homepage weighs 14.3 MB on a phone, almost all of it video.
Brand consistencyType, colour, components across pages
6
9
Before: strong art direction, but the origin stated three ways across pages and the shop pages built thinner than the homepage. After: one system on every page — the tri-colour wordmark, one type family, formula colours, one header and footer.
Speed & technical healthRequests, third parties, Core Web Vitals
4
6
Before: not re-measurable (the site has changed); our audit found six self-hosted videos, two of them 4–5 MB, and no cookie consent while GA4 and Meta were declared. After: mobile Performance 84 home / 77 shop / 77 product page (medians of three), Best Practices 100, 3 third-party hosts plus our review widget. The homepage still loads four of the old videos: 12.7 MB of its 14.3 MB.
AccessibilityLighthouse a11y + manual checks
6
7
Before: Lighthouse 86 home / 90 shop on our saved copies — contrast, heading order, tap targets, focusable hidden elements. After: 93 on every page; what remains is low-contrast text (14–17 elements per page), including the nav over the film. Pinch-zoom works.
OverallMean of 9 dimensions
4.1
7.1
3.0 points of measured improvement across the whole customer journey.
01 · Homepage

From Selling the Idea to Showing the Range

The old homepage sold the concept well — the film, the three steps, the science — and then never showed what to buy: no price, no range, Storm and Trail only as an image caption. The new homepage keeps the film and the explainer and puts the three formulas and all six products, with prices, on the page.

Before

  • No price and no range on the homepage; refills not mentioned at all (9 Sep audit).
  • Placeholder captions in production copy — “📸 …”, “🎬 …”, “📷 …” — and a “Limited offer” pop-up in the markup.
  • Six self-hosted videos, two of the files named for their 4 and 5 MB.

After

  • The film first, one button — “Shop CHA” — with free shipping over €30 in the bar above.
  • All six products with prices; the store marks the €34 and €16 as provisional until the client confirms them.
  • The three steps, why graphite (the chain rolls as you scroll), the three formulas, riders in the field, the science.
  • Still to fix: four of the old videos make the page 14.3 MB on a phone, and the nav over the film needs more contrast.
Full-page captures · scroll inside each frame · click to zoom
Beforethecha.cc · our copy of 10 Sep 2026
thecha.cc · our copy of 10 Sep 2026
Before — thecha.cc · our copy of 10 Sep 2026
Scroll · click to zoom

Our own copy of the homepage, saved on 10 Sep, rendered with the site’s images.

Afterthecha.myshopline.com
thecha.myshopline.com
After — thecha.myshopline.com
Scroll · click to zoom

Published theme behind the storefront password. Our feedback widget is hidden for the capture.

02 · Shop

One List of Six, Now a Shop by Formula

The old shop was one list: three applicators, three refills, one photo and one paragraph each. The brand’s own pitch is “one applicator, three formulas”, but Storm and Trail were sold as separate €27 applicators, under a price labelled MSRP and a banner promising a discount that appeared nowhere until payment.

Before

  • Six products on one list, one photo and one paragraph each, no product pages.
  • Prices labelled “€27 MSRP · incl. capsule” — and €31 in the press kit.
  • “First purchase? Get 18% off — applied automatically at checkout.” Shown in no price and not in the cart.
  • Storm and Trail sold as €27 applicators: three tools for a rider who wants all three conditions.

After

  • “The range.” All six, filtered by Core, Trail, Storm and Refills, with a count.
  • One price per product and no MSRP label; refills as their own collection.
  • Labelled placeholders where photography has not arrived yet — Trail, Storm and the refills.
  • An alternative shop page with tinted cut-out cards and add to cart on the card, for the client to choose between.
Full-page captures · scroll inside each frame · click to zoom
Beforethecha.cc/shop.html · archived 11 Jun 2026
thecha.cc/shop.html · archived 11 Jun 2026
Before — thecha.cc/shop.html · archived 11 Jun 2026
Scroll · click to zoom

The Internet Archive’s copy, the closest saved before our audit; the live price feed blocked so the saved prices show.

Afterthecha.myshopline.com/collections/the-range
thecha.myshopline.com/collections/the-range
After — thecha.myshopline.com/collections/the-range
Scroll · click to zoom

Published theme behind the storefront password. Our feedback widget is hidden for the capture.

More pages from this section
Afterthecha.myshopline.com/pages/shop-new
thecha.myshopline.com/pages/shop-new
After — thecha.myshopline.com/pages/shop-new
Scroll · click to zoom

The alternative shop page.

03 · Product Page

A Page for Every Product

The old site had no product pages. Paid campaigns and the press kit had no product to link to, and the facts a rider needs — what is in the box, how long a capsule lasts, whether it works on a dirty chain — lived in the FAQ or nowhere.

Before

  • No product pages. One image per product, no gallery.
  • Chain fit, capsule life and box contents only in the FAQ, or not on the site.
  • Nothing showing that Storm and Trail are formulas for the same applicator.

After

  • Six product pages, each with a breadcrumb back to the shop.
  • Formula (Core, Trail, Storm) and pack (applicator or refill) chosen on the page; quantity and add to cart.
  • “Free shipping over €30” beside the button.
  • Answers on the page: how long a capsule lasts, dirty chains, PTFE and PFAS, what is in the box.
Full-page captures · scroll inside each frame · click to zoom
Beforethecha.cc/shop.html · archived 11 Jun 2026
thecha.cc/shop.html · archived 11 Jun 2026
Before — thecha.cc/shop.html · archived 11 Jun 2026
Scroll · click to zoom

There was no product page: this list was it.

Afterthecha.myshopline.com/products/cha-core
thecha.myshopline.com/products/cha-core
After — thecha.myshopline.com/products/cha-core
Scroll · click to zoom

Published theme behind the storefront password. Our feedback widget is hidden for the capture.

More pages from this section
Afterthecha.myshopline.com/products/cha-core-refill
thecha.myshopline.com/products/cha-core-refill
After — thecha.myshopline.com/products/cha-core-refill
Scroll · click to zoom

A refill, chosen from the same page.

04 · Cart & Checkout

From a Hand-Built Checkout to Shopline’s

The old cart and checkout were built by hand: a drawer, then a modal with a country list and “Confirm order & pay”, then Stripe. The new store uses Shopline’s cart and checkout. One thing the old cart did that the new one does not do yet: count down to free shipping.

Before

  • A free-shipping meter in the drawer — “Add €3 more for free shipping” (11 Jun copy).
  • “Taxes and shipping calculated at checkout.”
  • A custom checkout modal: shipping priced by country band (a good pattern), the marketing-consent box already ticked, no review step, and a confirmation without an order number (9 Sep audit).

After

  • Shopline’s cart drawer and checkout, opened straight from add to cart.
  • Taxes and shipping are still shown only at checkout.
  • Not yet: the free-shipping meter — it matters for refill orders (€16 against a €30 threshold).
Full-page captures · scroll inside each frame · click to zoom
Beforethecha.cc/shop.html · archived 11 Jun 2026 · cart
thecha.cc/shop.html · archived 11 Jun 2026 · cart
Before — thecha.cc/shop.html · archived 11 Jun 2026 · cart
Scroll · click to zoom

One CHA Core in the cart.

Afterthecha.myshopline.com · cart
thecha.myshopline.com · cart
After — thecha.myshopline.com · cart
Scroll · click to zoom

One CHA Core in the cart.

More pages from this section
Beforethecha.cc/shop.html · archived 11 Jun 2026 · checkout
thecha.cc/shop.html · archived 11 Jun 2026 · checkout
Before — thecha.cc/shop.html · archived 11 Jun 2026 · checkout
Scroll · click to zoom

The old checkout step, before the hand-off to Stripe.

05 · How It Works

The Explainer Gets Its Own Pages

The brand’s best material — the three steps, the comparison with liquid lube, the science with real citations — was already on the old homepage. The new store keeps it and gives it room: How it works and Why CHA as their own pages, linked from every page.

Before

  • The three steps, the comparison and the science as homepage sections.
  • A first-application guide and an 18-question FAQ on separate pages, not linked from the shop.

After

  • How it works and Why CHA as pages in the main nav.
  • Not yet on the store: the FAQ, the first-application guide and the press kit.
Full-page captures · scroll inside each frame · click to zoom
Afterthecha.myshopline.com/pages/how-it-works
thecha.myshopline.com/pages/how-it-works
After — thecha.myshopline.com/pages/how-it-works
Scroll · click to zoom

Published theme behind the storefront password. Our feedback widget is hidden for the capture.

Afterthecha.myshopline.com/pages/why-cha
thecha.myshopline.com/pages/why-cha
After — thecha.myshopline.com/pages/why-cha
Scroll · click to zoom

Published theme behind the storefront password. Our feedback widget is hidden for the capture.

Technical Health

Every Figure, Side by Side

Before is thecha.cc as we audited it on 9 Sep 2026, from saved copies; it cannot be re-measured for speed, so those cells say so. After is thecha.myshopline.com on 9 Oct 2026, behind the storefront password: Lighthouse 12.8 mobile preset unless stated, median of three passes, desktop 1440px and mobile 390px.

MetricBefore · thecha.cc, 9 SepAfter · Shopline build
Product pages06
Products shown on the homepage06
Prices on the homepageAfter: €34 applicator, €16 refill — provisional.NoneEvery product
Shop filtersNoneFormula + refills
Price label“€27 MSRP”Price only
Free-shipping progress in the cartBefore: the 11 Jun copy of the shop.YesNot yet
Taxes and shipping in the cartAt checkoutAt checkout
CheckoutCustom modal + StripeShopline checkout
Ratings and reviewsNone invented. A rider wall and counter wait on real photos and a real number.NoneNone
FAQ, guide, press kit, policiesOn the siteNot yet
Lighthouse Accessibility · mobile homeBefore: our saved copy, scored the same way.8693
Lighthouse Accessibility · mobile shop9093
Lighthouse Performance · mobile homeRange 83–86.Not re-measurable84
LCP · mobile homeRange 3.4–3.6 s.—3.5 s
Homepage weight · mobile12.7 MB of it is four videos carried over from the old site.—14.3 MB
Shop · product page weight · mobile—1.1 MB · 1.3 MB
Third-party hosts · homepageStripe, Google Fonts, Cloudflare — plus our review widget (2 hosts), which comes off at launch.—3
Lighthouse

Performance · Accessibility · Best Practices · SEO

Lighthouse 12.8 on the Shopline build, 9 Oct 2026, behind the storefront password, median of three passes, mobile preset unless stated. The old site is not charted: it has changed since our audit and cannot be re-measured. Mobile LCP is 3.5 s on the homepage, 5.1 s on the shop and 5.0 s on the product page; the shop ranged 64–78 across passes.

Homepage mobile

Performance
After84
Accessibility
After93
Best Practices
After100
SEO
After100

Shop mobile

Performance
After77
Accessibility
After93
Best Practices
After100
SEO
After100

Product page mobile

Performance
After77
Accessibility
After93
Best Practices
After100
SEO
After100

Homepage · desktop desktop

Performance
After96
Accessibility
After93
Best Practices
After100
SEO
After100
After
Findings Register

17 Findings, Each With Evidence and a Fix

Everything we found on the current site, what we changed, and where each item stands today. Filter by severity or area.

SeverityFindingWhat we didAreaStatus
high No product pages — six products sold from one list
Every product was a card on /shop.html: one image, one paragraph, add to cart. Campaigns and the press kit had no product to link to.
A product page for each of the six, with formula and pack chosen on the page. Shop Fixed · live theme
high One applicator, three formulas — sold as three €27 tools
Storm and Trail were listed as €27 applicators, so a rider who wanted all three conditions was offered three tools.
Formula and pack chosen on the product page; refills sold on their own. Shop Fixed · live theme
high Policies, FAQ, guide and press kit are not on the store yet
thecha.cc has shipping & returns, privacy and terms, an 18-question FAQ, a first-application guide and a press kit. None is on the Shopline store or in its footer.
Move them over and link them from the footer. Launch Launch blocker
high Old addresses need redirects
/shop.html, /faq.html, /first-application.html, /press.html and /legal.html are the old site’s addresses; on Shopline they would return “page not found”.
301 each one to its new page when thecha.cc points at Shopline. Launch Launch blocker
Medium No price or range on the homepage
The homepage sold the concept and never showed the six products or a price; Storm and Trail appeared only as an image caption.
All six products with prices on the homepage. Home Fixed · live theme
Medium “€27 MSRP” on the shop, €31 in the press kit
MSRP is a retailer’s term; on a direct shop it reads as a hint of a discount.
One price per product, no MSRP label. Final prices are the client’s call: €34 and €16 are provisional and marked so. Pricing Fixed · prices provisional
Medium 18% off promised, shown only at payment
“First purchase? Get 18% off — applied automatically at checkout” — in no price and not in the cart.
No offer the price and cart do not show. If a first-order offer returns, show it in both. Pricing Fixed · live theme
Medium Free-shipping meter not carried over
The old drawer counted down to free shipping (“Add €3 more”); the new one does not.
Add it to the cart drawer — it matters for refill orders (€16 against €30). Cart Open · build fix
Medium Taxes and shipping only at checkout
Both carts say costs are calculated at checkout, though the rates by zone are published.
Show an estimate in the cart. Cart Open · build fix
Medium The old videos still weigh down the homepage
Old site: six self-hosted MP4s, two named for their 4 and 5 MB. New homepage: four of them, 12.7 MB of a 14.3 MB page on a phone.
Load videos on demand, with posters and phone-sized versions. Speed Open · build fix
Medium Low-contrast text, including the nav over the film
Lighthouse colour-contrast fails on 14–17 elements per page; accessibility 93.
Darken or back the text. Accessibility Open · build fix
Medium 3,065 backers, no reviews or ratings on the site
One testimonial; the Kickstarter figures framed for distributors.
Rider wall and counter built; they wait on rider photos and a real number. No ratings invented. Trust Waiting on client
Medium Confirmation without an order number
“Order received” with no order number, items, total or address (9 Sep audit). The marketing-consent box arrived ticked.
Shopline’s checkout; a test order before launch confirms the order page, the email and the consent default. Checkout Before launch
low Placeholder captions in production
“📸 …”, “🎬 …”, “📷 …” captions in the homepage copy.
None on the store; where a photo is missing, the placeholder says so. Brand Fixed · live theme
low Shop, FAQ and legal pages had a one-line footer
The page where money changed hands had the thinnest footer on the site.
One footer on every page. Navigation Fixed · live theme
low The homepage H1 is the logo
The only H1 is the CHA wordmark; the line about the product is a paragraph.
Make the product line the H1. Home Open · build fix
low Five of six products have no photo yet
Trail, Storm and the three refills show labelled placeholders.
Client photography or cut-outs. Shop Waiting on client
Stated Plainly

What's Still in Progress

You should hear it from us rather than find it later. The punch list to launch, with owners.

1

Policies, FAQ, guide and press kit on the store

Shipping & returns, privacy and terms, the FAQ, the first-application guide and the press kit — moved over and linked from the footer.

Launch blocker
2

Redirects and the domain

Point thecha.cc at Shopline and 301 every old address (/shop.html, /faq.html, /first-application.html, /press.html, /legal.html).

Launch blocker
3

A test order, end to end

Shipping zones, tax, the confirmation page and email, and the marketing-consent default.

Launch blocker
4

Photography, rider photos and a real counter

Cut-outs or photos for Trail, Storm and the refills; photos for the rider wall; the number for its counter.

Waiting on client
5

Final names, formats and prices

The €34 and €16 are provisional. Also: which of the two shop pages goes live.

Client decision
6

Homepage video weight, contrast and the cart meter

Videos on demand (12.7 MB today), darker nav over the film, a free-shipping meter in the cart.

For the build
7

Subscriptions

Subscribe & save waits on approval of a recurring-payment channel for the store.

Waiting on platform
8

Remove our review widget

Our feedback widget loads on the store for the review rounds; it comes off before customers arrive.

At launch
Your Store Next

Want Your Storefront on This Page?

We audit before we quote: a full CRO / UX read of your current store, page by page, with every figure measured — then the plan to fix it.