From designer dependency to independent publishing
I designed a modular content system that enables non-designers to build consistent, responsive pages independently, reducing design dependency while keeping Clal’s UX and visual language intact.
56%
lower median Speed Index
Context
Project context
Clal’s content and marketing teams needed a more flexible way to build dynamic pages inside the CMS, without creating a new custom layout for every page.
Role
UX/UI Designer
Platform
Responsive Web
Focus
Self-serve publishing, CMS flexibility, Responsive UX
The business problem
Clal’s content team relied on designers for many day-to-day page updates. Even simple changes often required new assets, resizing, reviews and repeated handoffs between content and design.
This created a slow publishing process and consumed design time that could have been spent on higher-impact work.
A simple content update could turn into a multi-step design task.
Discovery
What we heard from content editors
Designer dependency
Too many routine updates required design support.
Responsive friction
Desktop and mobile assets created repeated adjustments.
Limited expression
The existing sections didn’t support enough content and messaging needs.
Need for controlled flexibility
Editors needed more options, but within predefined design rules.
The legacy setup
Clal’s legacy pages relied heavily on pre-designed image strips and fixed visual assets. Many sections were created as images rather than native page elements, limiting flexibility for the content team and making even small changes dependent on designer support.
Image-based sections
Large parts of the page were exported as static assets.
Fixed dimensions
Changes often required new sizes and separate adaptations.
Code workarounds
Some UI elements required an extra development layer.
Exploration
Researching the content editor experience
I focused on the content editor side of modular CMS platforms to understand which controls are exposed to non-designers, what stays fixed, and how editors build pages within predefined structures.
These references helped shape the controls, presets and limitations built into Clal’s system.
Contentful
Structured component editing
Predefined fields and settings inside a fixed component structure.
Storyblok
Section-level content contro
Editors update content within predefined page components.
Shopify
Modular page composition
Predefined sections with controlled layout and content settings.
Across all three systems, editors work within predefined structures rather than designing freely.
System design
Building the system
I translated Clal’s design language into a modular system of predefined page sections. Content editors could combine sections to create different page structures, while the design rules inside each component remained controlled.
1. Modular page sections
Pages are built by combining predefined sections in different orders, allowing editors to create different page structures without designing new layouts from scratch.
2. Controlled typography
Editors can choose from predefined heading styles and approved font weights, while sizing and hierarchy remain fixed by the system.
3. Controlled color options
Selected components include approved color options for backgrounds and visual elements, all taken from Clal’s existing visual language.
4. Predefined CTA options
Primary and secondary button styles are built into the components, with predefined one- and two-CTA configurations.
Flexible in composition, controlled by design.
Fixed structure
Layout, hierarchy, spacing and responsive behavior were defined in advance.
Controlled options
Editors could choose only from approved styles and variations within each section.
Flexible composition
Sections could be combined and reordered to support different page needs.
Different combinations, one consistent system.
Impact
Reducing design dependency
Today, many pages can be built and published by the content team without designer involvement. When design support is still needed, it is often limited to providing images in predefined dimensions removing much of the back-and-forth around layout, sizing and repeated adaptations.
60%
less design time spent on routine page production
Estimated reduction based on the typical design involvement required before and after the new system.
Measured performance improvements
Pages built with the new system showed faster visual loading and lower blocking time across the sampled pages compared with the legacy setup.
56% lower median Speed Index
Faster visual loading across the sampled pages.
47% lower LCP
Main content appeared sooner.
81% lower TBT
Less time spent blocking the browser.
● New system ○ Legacy
Lower values indicate faster loading
The result was a scalable content foundation that enabled faster publishing, reduced design dependency and supported more consistent page experiences across Clal’s website.
Liat Zini
More Works
ForkCheck
Insurance Cards
