Major UK Beauty Brand 2026
By the numbers
Six-week sprint. Predecessor theme on the left, True Makeup on the right.
A UK beauty platform with a Lighthouse-23 front-end. Six weeks later: Lighthouse 96, theme footprint cut 74%, five pillar pages rebuilt end-to-end. Solo design + engineering sprint that compressed a typical 3–6 month agency engagement into a six-week shipped build.
Commissioned by the UK agency that manages the brand’s live site. The original scope was loose ends — small tidy-up work alongside an in-house redesign the agency was running themselves. By the end of the engagement, the work had expanded into a full end-to-end design and engineering pass: I drove the design language, every template, every stylesheet, every JS module, and the companion editor plugin, with the agency stepping back to focus on integration into their managed environment. The two deliverables shipped from this sprint were the True Makeup theme and the Easy Makeup plugin, both authored from scratch as a reusable base for future engagements.
Major UK Beauty Brand 2026 was a six-week development sprint between mid-March and the end of April 2026 to redesign and re-engineer the front-end of a high-traffic UK beauty and cosmetics e-commerce platform. Two deliverables shipped together: a bespoke WordPress theme (True Makeup) and a companion editor plugin (Easy Makeup), both authored from scratch with the explicit goal of completely renovating the site’s front-end and its measured performance. The front-of-site brief was to modernise the aesthetics; the back-of-site brief was deliberately uncompromising — a fully fresh architecture on a modern Timber/Twig + WooCommerce stack, with a per-feature CSS system, a vanilla-JS runtime, and a measurable Lighthouse step-change against the predecessor across every pillar page.
Six weeks is the right length for that kind of work. Shorter, and there isn’t enough room to take each pillar template through the modernise → re-architect → measure loop without cutting corners somewhere. Longer, and you start running the new code in production parallel with the old for so many days that the cost of carrying both compounds. Mid-March to end-of-April was the band where the calendar and the work matched up.
For context, a regular agency commission of this scope — audit, visual design, full-stack implementation across the five pillar templates, the companion plugin, performance work, and handover — typically books between three and six months on the calendar. The figure is not particularly contentious; it is where the work tends to land once design rounds, stakeholder review cycles, and the multi-developer coordination overhead a studio brings with it are accounted for. The Major UK Beauty Brand 2026 sprint delivered all of it end-to-end in six weeks — audit, design, implementation, and handover — by collapsing the design and engineering loops into a single working pass and by removing the round-trip cost a normal studio incurs between them.
The brief, in three words
Modernise the aesthetics. The front-of-site half of the brief was a deliberate visual upgrade rather than a like-for-like port. The five years of accumulated UI debt the predecessor carried — a type scale that had drifted, a component spacing system that had stopped reading consistently, a hero treatment that had aged out of the editorial register the brand was pushing toward — were all taken as opportunities to ship the site forward visually, not just to drop the old appearance into a new architecture.
Structurally fresh. Behind that aesthetic upgrade, the theme was to be a fully fresh architecture — every template, every stylesheet, every JS module written new. None of the predecessor’s monolithic build was migrated forward. The point of a renovation done properly is to throw away the right things; trying to keep parts of the old code base alive would have meant carrying its specificity collisions and its bundled-everything CSS into the new architecture, which is exactly the outcome the work was scoped to prevent.
Editor self-serve. A companion plugin would expose the design tokens, hero media, reviews, newsletter signups, and homepage content blocks through a wp-admin interface, so the kind of changes that previously required a developer to ship a release could now be made by the editor in the browser.
Architecture: monolithic to modular
The structural shift between the predecessor and True Makeup is the single biggest lever the rewrite pulls. The dashboard at the top of this article makes the change visible at a glance — theme footprint cut from ~200 MB to ~53 MB, monolithic SCSS bundle replaced by 33 per-feature CSS files, jQuery removed in favour of a vanilla-JS runtime, ~83 mixed-naming Twig templates rewritten as 100 BEM-prefixed ones, and the entire code base authored from scratch with nothing carried forward.
The CSS split is the architectural change most visible in day-to-day work. The predecessor compiled a SCSS source tree into a single bundled stylesheet that every page paid for in full, including pages that only used a fraction of it. True Makeup ships 33 per-feature stylesheets (about-page.css, brands-page.css, shop-archive.css, review-carousel.css, etc.), each enqueued only on the routes that actually need it. The cost of touching the about page is now bounded to the about page; the cost of editing the brands page is bounded to the brands page. Specificity collisions, dead-code drag, and the slow-render problem caused by an oversized CSS payload all get smaller as a result.
The jQuery removal is the architectural change most visible in the network panel. Front-end interactions — modal toggles, filter panes, slider components, the responsive nav — were all authored in a vanilla-JS runtime, so the theme never drags jQuery and a small constellation of jQuery plugins onto every page just to handle a click on a hamburger button.
The brand voice shift
The most viscerally visible part of the project is the brand voice change. The predecessor read as a bargain-shop — saturated pink and magenta on every surface, pink-tinted product cards, a hero block that announced a discount-marketplace hero pitch above the fold, alternating-colour brand cards stacked vertically down the page. The rewrite pushed the brand toward a magazine-style editorial register: neutral cream / peach / sand palette with black accents, product cards on clean white, mood photography with models using the products, and copy that reads like a beauty supplement rather than a discount flyer.
Five concrete moves carried the shift:
- Palette — saturated pink + magenta on every block → muted cream / peach / sand neutrals, with black for the brand mark and one accent tone for CTAs. Product cards moved from pink-tinted backgrounds onto clean white, which let the product photography itself carry the colour.
- Typography — compressed bold sans for everything, multiple loosely related weights → a confident editorial serif for display headlines paired with a clean sans for body, on a single design-token-driven type scale.
- Photography — stock product shots floating on coloured cards → mood photography with people using the products, often cropped tight on faces, lips, hands. The brand register shifted from “shop me” to “this is who I am when I use these products”.
- Editorial voice — a discount-marketplace hero pitch, category-explorer banner copy → “A Family of Premium Beauty”, “Frequently Asked Questions”, “Beyond Shaving — A Complete Guide to Men’s Grooming”. A beauty-supplement register rather than a marketplace listing.
- Density — cramped product grids with redundant labels, badges and copy on every card → spacious grids, restrained typography per card, and the page architecture doing the work the labels used to do.
The five pillar pages
An editorial e-commerce front-end lives or dies on five templates. The homepage sets the brand register; the shop archive does the discovery work; the product single does the convincing; the FAQ page absorbs the long-tail support questions before they hit the inbox; and the brands page does the “we curate the people you trust” credibility lift. Six weeks of work meant taking each pillar in turn rather than rebuilding the theme abstractly and hoping the templates fell out of it.
Each before/after slider below is draggable — pull the handle (or click anywhere across the image) to wipe between the predecessor on the left and True Makeup on the right.
Homepage
The homepage carries the brand register. The predecessor stacked a discount-marketplace hero, a pink-tinted product grid, a small-logo brand strip, a video block, a magazine teaser, and a newsletter card down a single tall column. The rewrite pulled the page apart into editorial blocks: a tight hero, a brand strip in the right register, a trending row, an editorial CTA into the magazine, a community-reviews band, a follow-us strip, and a curated-collections grid — each as its own composable content block in Easy Makeup, with mood photography carrying the new visual language end to end.
Shop archive
The shop archive is the page that has to feel both editorial and operational. The predecessor wrapped every product in a pink-tinted card sitting inside a heavy left-rail filter sidebar — visually loud and operationally cramped. The rewrite kept WooCommerce’s product loop intact but unhooked its bundled chrome (result count, sort dropdown, breadcrumbs), reattached the same callbacks to theme-owned action hooks, and re-rendered the page on a clean white field with tag-based filters running horizontally across the top. The product cards lost their pink backgrounds and let the product photography itself do the colour work. Page density went up — more products visible per scroll — while visual load came down.
Product single
The product page is where the visual continuity brief gets its hardest test. The same gallery, the same swatch row, the same variant logic, the same add-to-cart had to come across into the new architecture — and they all had to do so without dragging the predecessor’s three-stylesheet, two-jQuery-plugin payload with them. The Twig template owns the layout; a vanilla-JS module owns the gallery; a small set of helper functions exposed via Timber’s function() escape hatch keeps the WooCommerce product object reachable from the markup. The single-product stylesheet loads only on product pages — the homepage and the rest of the site never pay for it.
FAQ
The FAQ page does a quieter job than the homepage but earns its keep by deflecting support tickets before they reach the inbox. The predecessor’s version was a magenta-bannered “Help” page with an accordion stack and a small “Still Need Help?” card in the right rail. The rewrite recasts the same content as an editorial spread: a confident centred headline, a clean accordion against neutral typography, and a sidebar with three layered CTAs (contact, browse products, join the list). Below the fold, the page leans into the magazine register — a “Beyond Shaving” guide teaser sits next to the grooming-kit photography, doubling as cross-sell into the catalogue.
Brands
The brands page is where the predecessor’s “marketplace listing” register read loudest. Brand cards stacked alternating green / pink across the page, each carrying its own colour treatment and text-heavy description block, with no visual hierarchy across the set. The rewrite pulled the same content into a magazine-style editorial grid: a confident “A Family of Premium Beauty” headline, brand cards interleaved with mood portraits, and a quieter typography pairing that lets the brand marks themselves carry the differentiation rather than the card chrome around them.
The companion plugin: Easy Makeup
Easy Makeup is the editor surface the rewrite was built around. Where the predecessor required a developer to make almost any visual or content change above the level of a WooCommerce product, the new plugin exposes the operational levers the editor actually reaches for — through a wp-admin interface that maps cleanly to how the team thinks about the site:
- Design tokens — colour palette, type scale, and spacing variables exposed as form controls so palette tweaks no longer round-trip through a developer.
- Hero media library — per-page above-the-fold imagery, with separate slots for desktop and mobile and per-route fallbacks.
- Editorial review carousel — review entries created and ordered in wp-admin, rendered through a vanilla-JS slider on the front-end.
- Newsletter signups — inbound form submissions captured in dedicated plugin tables and forwarded to Mailchimp via the audience API.
- Homepage content blocks — configurable hero, editorial card grids, brand strips, and content rows, reorderable inside the wp-admin UI.
- Submissions store — every newsletter and contact submission lands in plugin-owned tables, exportable to CSV without leaving wp-admin.
The plugin is its own deliverable, separately versioned and authored. The reason it was kept out of the theme — rather than bundled inside it as the previous build had been — is the standard one: editor data should survive a theme switch. If True Makeup is ever replaced or redesigned again, the brand’s design tokens, hero media library, captured reviews, and newsletter list all stay where the editor put them.
Lighthouse: how the numbers landed
The architectural changes above were chosen because they are the well-understood drivers of the Core Web Vitals and Lighthouse-category scores everyone in e-commerce now optimises against. Smaller CSS payloads on the critical path lift Performance and LCP; removing jQuery removes a synchronous parse-and-execute window that had been blocking interactivity; per-route asset enqueuing means the heavy templates aren’t paying for the lighter ones.
The numbers themselves are in the dashboard at the top of this article — Performance 23 → 96, Accessibility 52 → 98, Best Practices 70 → 99, SEO 63 → 98, LCP 5.4s → 1.6s, total transfer 6.8 MB → 1.9 MB. Figures from runs against parity environments — the predecessor on production and True Makeup on staging — at the same viewport, same throttled network, same audit profile. The driver behind the gain is the architectural change list above rather than any single optimisation.
What shipped, and what stays with the agency
The end-state deliverable is a complete True Makeup theme (33 per-feature CSS files, 100 BEM-prefixed Twig templates, a vanilla-JS module set, the WooCommerce dequeue + re-wrap layer) and an Easy Makeup plugin (six editor surfaces, separately versioned). Both shipped end-to-end inside the six-week window and stay reusable as a base for future engagements.
The agency that manages the live Major UK Beauty Brand site picked up the deliverables from there: deploying into their managed environment, integrating with their hosting and CI, and running the live cutover from the predecessor theme to True Makeup. That handoff is the one thing the sprint did not include — and the reason the six-week clock could close cleanly without dragging into deployment.