Timeline
2 months
Team
Product operation, 4 engineers
My role
Live-page audit, component system design, mobile-desktop auto-mapping logic, asset playbook and team handover
Babel tower revamp.
Fewer components, better defaults: rebuilding the page builder behind Joybuy's campaigns.
Context and challenge
As the internal page builder Joybuy's marketing team uses to assemble campaign pages across UK/EU markets, Babel’s component picker used to hold ~60 components, and the pages it produced looked inconsistent from market to market. The system made the wrong thing easy:
Too many components doing the same job.
Marketing spent time choosing between near-duplicates, and pages drifted apart.
Copy baked into images.
All components were uploaded as finished artwork with the text already inside. Screen readers couldn't read it, search engines couldn't index it, and translation meant re-designing and exporting artwork rather than editing text.
Design decisions were left to whoever built the page.
Padding, corner radius, colour and font size were exposed on every component, so each page was effectively redesigned by the person configuring it.
Before
I led and contributed across:
As-is vs to-be audit.
with an SEO and Core Web Vitals audit across 4 markets.
Component convergence.
Role-based mapping of the legacy picker.
Component redesign.
Merged legacy components rebuilt around one role each with layout variants.
Global rules.
Live text, spacing, and colours that lock design decisions at the system level.
Mobile ↔ Desktop auto mapping
Logic that derives desktop from one mobile configuration.
Playbook and handover.
Asset playbook for marketing ops and creative designers.
Babel revamp timeline
Why SEO & CWV audit
A campaign page serves as a perfect platform for optimising SKUs via SEO, provided it is designed for crawlability. Hence I ran a comparative analysis between the current state and the proposed improvements, followed by an SEO and Core Web Vitals audit across all markets.
Every page was built on the same template, which makes almost every defect I found systemic. This reframed the project: fixing a component once would fix it on every future campaign page.
Process and approach
Tightening step by step, with a story marketing could follow.
Marketing had always been able to configure everything, and the revamp tightens almost all of it, which makes building a story that brings marketing on board the hardest part. By framing the revamp as 3 phases, the freedom was tightened gradually over 4 months.
Converging by role instead of look.
I gave every legacy component one of four actions: merge, nest into another component, rename, or retire. Merges followed three steps: recognise components that play the same role, split that group by interaction mode rather than visual style, then turn the remaining visual differences into properties.
Configure once, derive desktop.
Marketing configures pages on mobile, and desktop is derived automatically. I defined when each layout can map to desktop and what happens when it can.
In a page builder, the defaults do most of the design work.
Most pages go live with whatever a component ships with. Changing a default, such as switching the Hero banner to immersive style or turning the SEO switch default from off to on, changes every future page without training anyone.
Global rules and fully stacked state
Solution and outcomes
A much smaller, role-based component set
Card collection is the clearest example. 9 legacy components became 3: Image card grid for browsing, Image card carousel for exploring, and Promotional card carousel for conversion.
Enhancing the system's usability while increasing its resilience against errors.
I simplified setup by reducing repetitive module combinations and introducing clearer hierarchy and usage rules. I also made the templates more fault-tolerant, so the system could handle edge cases and inconsistent usage without breaking the experience.
A playbook, so the system doesn't live in my head
For a long time, I was the only designer in the team that holds all of the Babel knowledge, which is why I packaged the revamped components into an asset playbook with by a knowledge-share session for the broader team.
Babel assets playbook – image card component set
Impact & metrics
Component system
56% reduction in components for page builder
23% less time to build a campaign page, or revision rounds with marketing
Operational efficiency
~3 fewer revision rounds between marketing team and creative designers.
45% reduction in product-team involvement per campaign page setup (marketing teams self-serving).
Component & quality
56% reduction in components for page builder
90% increase in current campaign pages passing accessibility checks
Timeline
2 months
Team
Product operation, 4 engineers
My role
Live-page audit, component system design, mobile-desktop auto-mapping logic, asset playbook and team handover
Babel tower revamp.
Fewer components, better defaults: rebuilding the page builder behind Joybuy's campaigns.
Key insights
Context and challenge
As the internal page builder Joybuy's marketing team uses to assemble campaign pages across UK/EU markets, Babel’s component picker used to hold ~60 components, and the pages it produced looked inconsistent from market to market. The system made the wrong thing easy:
Too many components doing the same job.
Marketing spent time choosing between near-duplicates, and pages drifted apart.
Copy baked into images.
All components were uploaded as finished artwork with the text already inside. Screen readers couldn't read it, search engines couldn't index it, and translation meant re-designing and exporting artwork rather than editing text.
Design decisions were left to whoever built the page.
Padding, corner radius, colour and font size were exposed on every component, so each page was effectively redesigned by the person configuring it.
Babel revamp timeline
SEO & CWV audit
Global rules and fully stacked state
Snippet of Babel assets playbook – image card grid component set
Before
I led and contributed across:
Mobile ↔ Desktop auto mapping
Logic that derives desktop from one mobile configuration.
Playbook and handover.
Asset playbook for marketing ops and creative designers.
Global rules.
Live text, spacing, and colours that lock design decisions at the system level.
As-is vs to-be audit.
with an SEO and Core Web Vitals audit across 4 markets.
Component convergence.
Role-based mapping of the legacy picker.
Component redesign.
Merged legacy components rebuilt around one role each with layout variants.
Why SEO & CWV audit
A campaign page serves as a perfect platform for optimising SKUs via SEO, provided it is designed for crawlability. Hence I ran a comparative analysis between the current state and the proposed improvements, followed by an SEO and Core Web Vitals audit across all markets.
Every page was built on the same template, which makes almost every defect I found systemic. This reframed the project: fixing a component once would fix it on every future campaign page.
Process and approach
Tightening step by step, with a narrative marketing could follow.
Marketing had always been able to configure everything, and the revamp tightens almost all of it, which makes building a story that brings marketing on board the hardest part. By framing the revamp as 3 phases, the freedom was tightened gradually over 4 months.
Converging by role instead of look.
I gave every legacy component one of four actions: merge, nest into another component, rename, or retire. Merges followed three steps: recognise components that play the same role, split that group by interaction mode rather than visual style, then turn the remaining visual differences into properties.
Configure once, derive desktop.
Marketing configures pages on mobile, and desktop is derived automatically. I defined when each layout can map to desktop and what happens when it can.
In a page builder, the defaults do most of the design work.
Most pages go live with whatever a component ships with. Changing a default, such as switching the Hero banner to immersive style or turning the SEO switch default from off to on, changes every future page without training anyone.
Solution and outcomes
A much smaller, role-based component set
Card collection is the clearest example. 9 legacy components became 3: Image card grid for browsing, Image card carousel for exploring, and Promotional card carousel for conversion.
Enhancing the system's usability while increasing its resilience against errors.
I simplified setup by reducing repetitive module combinations and introducing clearer hierarchy and usage rules. I also made the templates more fault-tolerant, so the system could handle edge cases and inconsistent usage without breaking the experience.
A playbook, so the system doesn't live in my head
For a long time, I was the only designer in the team that holds all of the Babel knowledge, which is why I packaged the revamped components into an asset playbook with a knowledge-share session for the broader team.
Impact & metrics
Operational efficiency
~3 fewer revision rounds between marketing team and creative designers.
45% reduction in product-team involvement per campaign page setup (marketing teams self-serving).
Component & quality
56% reduction in components for page builder
90% increase in current campaign pages passing accessibility checks
© Olivia Forster, 2026