BackLykdat Design System
From Fragmented UI to Unified Product Suite: An Audit, Design, and Rollout Initiative
Role: Lead Designer
Tools: Figma, Notion, Invision DSM
Problem
Lykdat’s product suite was shipping fast but inconsistently:
- Multiple button styles, corner radii, and colors
- Typography applied ad hoc
- No single source of truth for devs
- New designers forced to reverse-engineer patterns
Result: fragmented UI, rework for engineers, slower development, and a clunky experience for users.
Process
1. Audit & Research
- Built a UI inventory across all live products
- Conducted dev/PM interviews → surfaced friction (“Which button do we use?” “Designs change without notice”)
2. Foundations
- Defined color palette, typography scales, spacing, grids
3. Components
- Buttons, forms, tables, cards, navigation, and states
- Responsive, reusable Figma components aligned with dev naming
4. Documentation & Adoption
- Notion guidelines with usage & edge cases
- Weekly demos with product team
- Slack feedback loops + design reviews
Design & Structure
I structured the system into three key levels:
Atoms
The basic building blocks of the interface. They can’t be broken down further without losing meaning.
Molecules
Combinations of atoms working together as a unit.
Organisms
Complex UI components composed of groups of molecules and atoms.
The Outcome & Improvement
- Unified design system adopted across all products
- Faster design-to-dev handoff and fewer bugs
- Stakeholders noticed cleaner, more professional interfaces
Impact
- Prototyping 2x faster: Designers reused components instead of rebuilding from scratch
- Consolidated UI patterns: Reduced duplicates (e.g., 6 different button styles → 1 standard)
- Onboarding significantly faster: New designers ramped up quickly with a single source of truth
- Fewer UI-related bugs: Engineers built directly from aligned Figma components and guidelines
- Cleaner, more cohesive UI: Stakeholders highlighted more professional, consistent interfaces
