Prepare one release.
Resolve the visible gaps, apply the required identity and support delivery.
The brief was a release. The actual problem was ownership.
I joined to prepare one branded variant for delivery. The white-label mobile banking platform served multiple bank brands from one codebase. Putting the design source beside the shipped interface exposed something larger: states, tokens and responsibilities had diverged across the system. The inconsistent UI was a symptom of a missing design-code contract.
Three layers disagreed.
The design source, shipped behavior and theme rules described different systems.
Restore one contract.
Ship the release while rebuilding a source of truth that the next variant could reuse.
A cosmetic patch would have shipped the same ambiguity into the next release.
When the files disagreed, production became evidence.
The design source was useful, but resolving conflicts required production evidence. I traced the implemented system through application routes, shared components, theme files, hardcoded values and platform constraints.
I read the system from the outside in.
- 01Observe
Start with shipped states and actual behavior.
- 02Trace
Follow each state back to components, themes and source values.
- 03Compare
Put implementation evidence beside design intent.
- 04Decide
Assign every difference to a clear ownership layer.
Not every mismatch meant the same thing.
I created one classification model so design, engineering and quality assurance could make the same call from the same evidence.
| Signal | Decision |
|---|---|
| Valid variation | Keep it local to the active theme. |
| Implementation drift | Replace it intentionally in the shared layer. |
| Reusable pattern | Promote it only after validation. |
| Risk or conflict | Stop and decide with engineering. |
The key decision was where change was allowed.
A brand theme may carry identity. It may not silently rewrite component anatomy, behavior, accessibility or implementation contracts. Making that boundary explicit stopped local changes from becoming hidden forks.
The hardest decision was knowing what not to redesign.
One time-sensitive state looked like a UX defect. Implementation evidence showed that it protected a non-negotiable product constraint. I kept the safeguard and redesigned the guidance, validation and recovery around it. The experience became clearer without pretending the constraint had disappeared.
Keeping the safeguard was the product decision.
Ready for review
Shared component
One structure.
Different identity.
Different identity.
Visual tokens respond to the active theme. Content order, states and interaction rules remain fixed.
Change the brand, not the contract. The demonstration changes only identity tokens.
Brand A active.
- Theme may change
- Color, type, radius, visual emphasis and identity assets.
- Contract stays fixed
- Anatomy, states, behavior, accessibility, content order and component interface.
Illustrative values only. The boundary and decision logic reflect the delivered work.
I rebuilt the source of truth as a contract, not a screen library.
The system had to survive implementation. I organized decisions from stable foundations through semantic roles and component states, then mapped them into the code vocabulary used by engineering.
- 01
Foundation
Primitive color, type, spacing and shape values.
- 02
Semantics
Roles based on meaning rather than a specific identity.
- 03
Components
Anatomy, states, interaction rules and accessibility expectations.
- 04
Themes and mapping
Identity values connected to the names consumed in code.
Design vocabulary
action / primary / default
Implementation vocabulary
--action-primary
The first release shipped. The next one no longer started from zero.
The result was a shared operating model that connected decisions, reusable rules and implementation evidence.
Delivered end to end
Release work and system work became one delivery.
I owned the design-side audit, decision model, source structure, component contracts, theme boundary and handoff. The implementation details were reviewed with engineering before delivery.
- Release supported through productionThe immediate scope was not sacrificed for the rebuild.
- Design source rebuilt around reusable rulesTokens and states replaced screen-by-screen interpretation.
- Variation ownership made explicitLocal identity stopped leaking into shared behavior.
- Design and code gained one mappingHandoff and quality assurance used the same vocabulary.