Kurly Logistics
Design System
A flexible design system used across Kurly’s logistics products
Project Overview
Role
Product Designer
Team
2 Designer, 3 Developers
Project Date
Feb 2024 – Jul 2025 (6 months)
Background & Problems
Kurly’s logistics tools were inconsistent and developer-driven, with no unified design.
When creating a new logistics admin system, we built a scalable design system to support both this product and future ones.
Challenges included:
❌ Inconsistent UI across tools
❌ Duplicate components
❌ Avg. 1.5 days/screen handoff
❌ Planners blocked without designers
Not only the designs looked different, but the interactions worked differently across products—creating unnecessary friction for users.
Goals
🧱 Build a scalable design system
📐 Empower non-designers to assemble consistent screens
⏰ Reduce time-to-dev and bugs
Impact
–75% handoff time
From 1.5 days → 0.4 days per screen
Self-sufficiency
Planners created 80% of admin pages independently
Adopted across platforms
Due to strong results, KLDS was expanded from web admin to mobile logistics apps
Dev sync = fewer bugs
Fewer reworks thanks to early dev feedback loops
Solution Strategy
🧱 Foundation
- Prioritized essential components for the new admin tool
- Started with frequently used elements (e.g., box button, forms)
- Defined design tokens for color, spacing, elevation
🔄 Dev Collaboration
- Weekly syncs instead of one-way handoffs
- Shared naming logic between Figma and code
- Built with token architecture in mind
System Expansion → Mobile
Due to strong adoption in admin tools, we extended KLDS to mobile — optimizing components and flows for smaller screens.
Why this mattered:
- Mobile was critical for warehouse workers and delivery drivers
- Maintaining visual + UX consistency helped reduce training time
- Reused tokens + patterns from web foundation
Design Tokens were defined for spacing, color, typography, and elevations — making it easier for devs to maintain consistency.
System Setup
We built a component library with 26 UI elements, supported by Design Tokens (spacing, color, typography, elevations) to ensure consistency and reduce dev effort.
Documentation
Each component came with:
- Usage rules
- Do/Don’t examples
- Code link
- Visual specs
This allowed designers and devs to speak the same language, even across different product areas.
I developed this guide to provide flexibility across user areas, defining padding and adaptable zones to ensure consistent yet dynamic layouts.
Projects using KLDS
Kurly Admin System
Applied 18+ components from KLDS (e.g., tables, filters, status tags).
Kurlyro (Warehouse Staff App)
Applied KLDS to onboarding, shift tracking, and QR scanning for fast screen delivery.
PM-driven Screen Building
PMs built pages independently using KLDS docs and templates, reducing back-and-forth.
Consistency at Scale
Maintained visual and UX consistency across web and mobile, saving time during scaling.
Team enablement
Onboarding & Support
Onboarding workshops for PMs/planners Weekly office hours for ongoing support Documentation + FAQ for self-service
Reflection
What I learned
- Building a system is not just about visuals — adoption is everything
- The best system is the one people actually use
- Early developer sync is worth every minute
If I were to do it again
- Set clearer naming conventions from day one
- Add tooltips directly into Figma files
- Create short Loom videos for self-serve onboarding
