TL;DR
Lodgify rebranded — new colors, typography, logo. The risk wasn’t the brand; it was shipping it across web, mobile, marketing site and emails without breaking the product for everyone at once. I led the product side of the rollout: the semantic token architecture, coordination across the design system (Storybook), Figma branches and frontend teams on desktop and mobile, and the migration plans that let every squad update their UI safely. We hit the release date — arriving before marketing did.
🖼️ Image coming soon — before/after of a key screen: old brand vs new brand.
Context & role
Cross-product initiative: web app, mobile, marketing site and emails. I led the product-side organization of the rollout — token architecture, Storybook coordination, Figma branches — working day-to-day with a frontend engineer and staying in sync with marketing and the external brand agency. The hardest coordination work: connecting the desktop and mobile frontend tracks so both consumed the same tokens.
The problem
The visual identity was outdated and inconsistent across surfaces. A rebrand was approved — but a naive rollout meant either a months-long frozen “big reveal” or visual regressions shipping to production daily.
The job to be done: “When the company rebrands, I want the update to roll out smoothly and without regressions, so users get a polished, consistent product from day one.”
Process
Key design decision — semantic tokens as the migration layer. Every component consumes semantic tokens; each token maps to the current value (flag off) or the new brand value (flag on). The rebrand becomes a data change, not a redesign of every screen.
🖼️ Image coming soon — the token architecture: component → semantic token → old/new value depending on the flag.
The legacy problem. Plenty of components predated the token system entirely. We built migration plans per component family so each team could move their UI to tokens without blocking — turning the rebrand into a forcing function that left the design system healthier than we found it.
Pragmatic decisions under deadline. The new illustration set wasn’t ready in time — instead of delaying or shipping mixed styles, we replaced illustrations with icons as a deliberate interim state, keeping visual consistency until the final assets landed.
Rollout mechanics. Layered releases — tokens → typography → colors → logo — each shipped, validated and promoted independently behind a feature flag, with rollback at every step and phased QA per squad.
🖼️ Image coming soon — the four rollout layers as a timeline.
Solution
A flag-controlled visual layer: flip the flag and the entire product switches identity. Old and new brand coexist in the same codebase during migration, on desktop and mobile.
🖼️ Image coming soon — the new palette and typography specimen.
Impact
Shipped on time for the release date — the product track was ready before marketing’s own. The semantic token architecture remains as permanent design-system infrastructure long after the rebrand, and legacy components got the migration paths they’d needed for years.
Learnings
- Cross-platform alignment is the real project. The tokens were the easy part; getting desktop and mobile frontends to consume the same source of truth was where the effort went.
- A rebrand is a Trojan horse for design-system debt. Legacy components without tokens finally got migration plans because the rebrand made them unavoidable.
- Ship deliberate interim states. Icons instead of unfinished illustrations kept consistency and the deadline — perfect assets can follow.