MilkStork Design Systems
Scaling a consistent product experience across ecommerce and internal platforms
Design System Foundations
Core tokens and foundations used across Milk Stork products.
Milk Stork’s platform supports working parents shipping breast milk safely while traveling for work. As the product grew, the interface and internal tools began to diverge across teams and features.
I led the effort to establish a scalable design system that unified product experiences across the ecommerce storefront, account dashboard, and internal operations tools.
The Challenge
The product had grown quickly across multiple surfaces:
E-commerce purchasing flow
Account dashboard
Internal operations tools
Admin management systems
UI patterns had been created ad-hoc over time. This resulted in:
Inconsistent UI components
Duplicated patterns across teams
Slow design and engineering collaboration
Difficulty maintaining visual consistency
A shared system was needed to support both product growth and team efficiency.
My Role
Lead Product Designer
Responsibilities included:
• defining design system architecture
• building reusable UI components
• creating tokenized color and typography systems
• documenting patterns for cross-team usage
• collaborating with engineering on implementation
Approach
✔️ Component Architecture
I audited existing product screens to identify repeating UI patterns and opportunities for standardization.
Core components included:
• Color scale
• Spacing system
• Typography hierarchy
• Elevation and shadow patterns
Each component was designed to support multiple product contexts.
✔️ Design Tokens & Variables
Using Figma variables, I structured the system around reusable design tokens:
• Color token system
• Spacing scale
• Typography hierarchy
• Elevation and shadow system
This allowed the system to scale while maintaining visual consistency.
✔️ Cross-Product Consistency
The design system unified UI across several Milk Stork product areas:
• Ecommerce product pages
• Cart and checkout flow
• Customer account dashboard
• Internal operations interfaces
This helped ensure a consistent experience for both customers and internal teams.
Outcomes
The design system improved product development in several ways:
• Faster design iteration
• More consistent UI patterns across features
• Improved collaboration between design and engineering
• A scalable foundation for future product development
Reflection
Design systems are more than component libraries. They create a shared language that allows teams to design, build, and scale products more effectively.
By establishing a unified system, Milk Stork’s platform could continue growing while maintaining clarity, consistency, and efficiency across the product experience.
