Structural Reduction, Language
Vodafone
I.
This started in a form system built from nested inputs, labels, and helper layers.
As it grew, repeated patterns, stacked instances, and detached overrides pushed memory use too far — in some files, up to 96%.
The library could not be published.
II.
Landscape
The library was made of layered form components: fields, labels, helper text, and states built through nested instances.
Over time, variants piled up — required markers, error rows, placeholders, icons — each with its own internal structure.
Memory followed that complexity: deep nesting, duplicated layers, and overridden fragments inside every field.
III.
Decisions
— Reduce the library to shared field primitives.
— Merge behaviourally identical components into one model.
— Expose label, input, helper, and state as fixed slots, not branching variants.
— Fix internal order so composition stays stable.
— Remove repeated layers that add depth and memory cost.
— Define a writing pattern for consistent actions and descriptions.
IV.
Model
A unified field model needs two things:
A stable internal structure, and a predictable writing pattern. One keeps composition clear across states and properties. The other keeps language clear across markets.
Same principle in both: consistency makes the component legible.
A simplified representation of how the component is built internally —
what belongs together, what is optional, and how behaviours map onto structure.
B.
Writing pattern
Label uses a noun or noun phrase.
Necessity is explicit: Required / Optional.
Subtext clarifies early: “For {noun}, use {format}” or “We’ll {verb} your {noun}.”
Input label stays literal: {noun}, {noun} + {unit}, or {example}.
Helper unblocks action: “To {do X}, {verb} the {noun}.”
Validation stays direct: “Enter {noun} in {format}” or “{Noun} can’t be {state}.”
Paragraph sets expectation: “If {X} happens, you’ll see {Y}.”
Link opens support or a side flow: “{Verb} the {noun}” or “{Verb} now.”
V.
Refinements
Layer names were aligned to one semantic model. Duplicated patterns were removed. Behaviour moved into a single state layer.
Text layers — label, helper, subtext, validation — were standardised in one order across components.
Input types that only differed in surface behaviour were merged into one structure.
The result was a lighter component model: fewer parallel variants, lower memory load, and a predictable hierarchy across the system.
VI.
Standards
A unified field model needs two things: a stable internal structure, and a predictable writing pattern.
Both follow the same principle: consistency makes the component legible.
A.
Structure
— All forms follow the same order:
— State layers sit above Surface and never mix with content.
— Behaviour flags don’t create new structures.
B.
Writing pattern
— Label names the field.
— Subtext clarifies meaning or format.
— InputLabel carries the shortest possible prompt.
— Helper provides task-level guidance.
— Validation communicates correctness.
— Paragraph sets context.
— Link opens secondary flows.
C.
Boundaries
— Subtext does not restate the Label.
— Helper does not restate Subtext.
— Validation does not contain guidance.
— Paragraph does not replace Helper.
— Link is always action-first; never descriptive copy.
D.
Exclusions
— No alternative sequences per brand or market.
— No mixed roles (e.g., helper used as validation).
— No embedded explanations inside labels.
— No extra text surfaces added locally.
VII.
Reach
Reducing the Forms library from 96% to 9% memory changed every file.
The unified field structure stopped fragmentation.
The writing model did the same for content: labels, helper text, and validation followed one pattern.
The result was simple: lighter files, quieter components, and a library that behaved the same everywhere.
VIII.
The legacy library was deprecated without manual migration.
Component names, property keys, and slots matched the new model, so Figma resolved instances automatically.
Legacy components reattached through naming parity alone.
No relinking. No file updates. No manual intervention.
IX.
Notes
The work unified structure, naming, and writing into one model.
Legacy components folded into the new system without migration.
One library, no parallel paths.