Building a design system from scratch
Creating a consistent and scalable design foundation across Interflora platforms.
- Client
- Interflora
- Year
- 2022
- Role
- Lead Product Designer
- Duration
- 6 months
Context
Interflora required a unified design system to support consistency across products and markets. Fragmented UI patterns and a lack of shared components were creating inefficiencies in design and development, making it difficult to deliver quality consistently at scale.
The problem
Inconsistent UI patterns, fragmented user experiences, and a lack of shared components were slowing delivery and undermining quality. Each team was making independent design decisions without a shared language, resulting in duplication of effort and an incoherent product experience.
Discovery
Methods
- Audit of existing UI components and patterns across platforms
- Identification of inconsistencies and gaps in the current design language
- Collaboration with development teams to understand implementation requirements
- Benchmark of design system best practices and component architecture patterns
What I found
The absence of a shared design foundation meant every new feature required reinventing basic patterns. Design decisions were made independently across teams, producing a fragmented experience and significant duplication of effort. There was no scalable path forward without a unified system built from clear foundations.
Key insights
Start with the right foundations
A design system built on clear tokens and primitives can evolve and scale. One built on components alone becomes rigid and difficult to maintain over time.
Consistency is a usability decision
Inconsistency in UI patterns creates cognitive friction for users and erodes trust. Consistency is not a design preference, it is a usability requirement.
Documentation makes systems usable
A system that is difficult to understand will not be adopted. Investing in clear documentation is as valuable as investing in the components themselves.
Strategy
Create a unified design language built on clear foundations, standardize UI components, improve scalability and consistency, and support cross-platform experiences from a single shared system.
Product decisions
- 01Design a full design system from scratch with a clear token structure as the foundation
- 02Create reusable UI components covering all key interaction and layout patterns
- 03Structure guidelines for usage and implementation that teams can follow independently
- 04Ensure consistency and scalability across all product and platform interfaces
Execution
Designed and delivered a complete design system from scratch, including token foundations, reusable components, and usage guidelines for cross-team implementation across Interflora platforms.
What shipped
- 01Designed a complete design system from scratch with token-based foundations
- 02Created reusable components and UI foundations covering all key patterns
- 03Structured clear usage guidelines and implementation documentation
- 04Ensured visual and interaction consistency across all interfaces
- 05Enabled faster, more scalable design and development delivery
Impact
Improved usability and consistency across Interflora platforms, faster delivery across design and development teams, and a scalable UI system that supports ongoing product development.