This case study is a portfolio reconstruction of my professional approach. The architecture, visuals, component examples, and data were created specifically for public presentation and do not reproduce any company’s internal system, production interfaces, or confidential information
Context
Yesim serves 4M+ users across mobile apps, web, B2B solutions, and white-label products. As the ecosystem grew, more scenarios needed to work across several surfaces at once: mobile functionality was moving to the web, new product lines were emerging, and white-label products required controlled brand variation without quality loss.
Problem
Existing UI kits in Figma were fragmented and isolated. Without a shared architecture separating brand rules, token logic, component behavior, and platform-specific implementation, the same UI patterns were interpreted differently across App, Web, B2B, and White-label surfaces. This created an operational bottleneck: the ecosystem was expanding faster than the teams' ability to manually maintain consistency and quality.
A deep system audit revealed three critical risks:
tokens did not separate foundation, semantic, component, and brand meanings. This allowed product teams to make hardcoded visual choices and local code overrides, creating massive technical debt.
delivery relied entirely on the manual translation of design assets from Figma into code, leading to redundant development efforts where identical UI patterns were recreated from scratch across different platforms.
AI-assisted tools made it effortless for teams to generate code and layouts instantly. However, without strict machine-readable guardrails, automation simply scaled the mess—making it incredibly fast to generate non-standard UI components, but exponentially harder and costlier to audit and clean up later.
Key question: How can we build a design system that allows different teams to ship features independently without bottlenecks, while maintaining UI consistency and preventing technical debt?
My Role
I owned the design-system architecture and operating model across different platforms and products surfaces, ensuring the ecosystem could scale sustainably beyond a single team or product scenario.
I shaped the design system as product infrastructure: multi-product architecture, token contracts, responsive layout, design-artifact delivery model, global component workflow, governance logic, and AI-ready operating rules. I defined system rules for how design intent became engineering-ready artifacts before decisions spread across product verticals. At the delivery layer, I defined the target model and worked with engineering partners to operationalize validation, documentation, and versioned system outputs.
Strategy
The core strategic principle was to decouple engineering from Figma by turning design intent into automated, production-ready code artifacts.
Core System Decisions
1. Three-Layered Architecture
Design Language owned brand identity, visual principles, typography, iconography, and color logic.
Design System owned tokens, components, patterns, interactive states, usage rules, and quality checks.
Product Layer owned adaptation for iOS, Android, Web, B2B, White-label, and future extensions.
This separated system-level decisions from product-level decisions. Core logic stayed reusable, while platform-specific needs received a clear adaptation layer without breaking the whole system.
2. Autonomous cross-platform grid
Previously, the web and mobile products followed different grid structures, spacing systems, and vertical/horizontal rhythm. I unified the layout logic by introducing a shared DOM-based structure, Figma Variables, and Modes. Figma Modes allow designers to seamlessly switch between platform specifications and responsive breakpoints while working within the same design system. Grid, spacing, and layout rules became a strict contract powered by automated design tokens, reducing both design and technical debt while significantly minimizing cross-platform visual inconsistencies and implementation bugs.
3. Design tokens as engineering contracts
Tokens were rebuilt from static visual constants into a multi-tier contract model to isolate design intent from platform execution. The pipeline flows systematically from primitives to semantic tokens, responsive modes, and component tokens, ending in profile and platform overrides.
In this reconstruction, the token architecture follows the W3C DTCG specification and shows how tokens can be exported, validated, compiled, and distributed as versioned artifacts. This infrastructure cascades global changes instantly without manual intervention, eliminating visual debt and enabling seamless multi-product scaling.
4. Automated delivery pipeline
I engineered an infrastructure layer that completely removed Figma from the daily engineering handoff, transforming it from a manual "source of truth" into a pure source of design intent.
I worked with engineering to establish an automated delivery model connecting design sources, validation, versioned libraries, documentation, and product implementation. This system automatically compiles and distributes platform-specific artifacts—design tokens, component libraries, and graphic assets—across our entire tech stack. To ensure long-term stability, I implemented strict quality gates that automatically block builds upon any violation of naming, component states, or schema integrity.
5. Cross-team component lifecycle model
I transformed fragmented UI needs into a scalable global component system by establishing a clear path from product agreement to engineering consumption. By vetting each component against platform constraints, state variants, token coverage, and A11Y compliance, I ensured high-quality, implementation-ready outputs.
To scale this across App, B2B, Web, and White-label teams, I orchestrated a sprint-based synchronization model:
aggregated recurring UI patterns into a centralized global backlog.
Facilitated cross-team sessions to document product-specific and platform-specific functional requirements.
developed robust Figma components featuring exhaustive states, variants, and semantic token mapping for composite usage.
enforced quality control via automated Storybook/Chromatic checks, ensuring visual and functional parity.
delivered finalized components to shared Git libraries (Flutter, HTML, React Storybook) as implementation-ready artifacts, including tokens and usage logic.
created a seamless Agreement → System Design → Validation → Versioned Delivery → Product Adoption pipeline. This delivery model guarantees that engineers receive a strictly defined, implementation-ready package, drastically reducing technical debt and design-to-development friction.
6. Governance rules
I built the governance layer around the core principle: "Consume, do not redefine". This established clear decision-making rules for when a team should adopt an existing pattern, extend it, or propose a new global component. To prevent technical debt, we eliminated ad-hoc local exceptions. Instead, platform-specific variances were managed through tokens, variants, and explicit usage rules.
7. AI-ready operating layer
As part of this portfolio reconstruction, I extended the system with an AI-ready governance model. It demonstrates how documented rules, responsibilities, repeatable procedures, and workflows can help both people and AI-assisted tools make consistent system decisions.
rules codified system invariants including the reuse-first mandate, single-source-of-truth protocols, and strict task discipline
personas defined clear areas of accountability for strategic decision-making, governance, architecture, and quality assurance
skills transformed recurring actions into deterministic procedures, standardizing component authoring, testing, and review processes
workflows mapped end-to-end paths connecting strategy alignment and validation to delivery, handoff, and product integration.
This model is designed to reduce dependency on individual expertise, support onboarding, and limit system drift as AI-assisted workflows become more common.