SERVICE
Design System
UI Design
Brand Identity
White-label Solution
TIMELINE
Feb 2023
May 2023
TOOL
REQUEST
The existing system created significant pain points across three key groups:
Design Team
Redundant effort creating similar elements repeatedly
Inefficient handoffs to engineering
Limited ability to onboard new clients
Engineering Team
Component inconsistencies across implementations
Extended build cycles
Design-to-development misalignment
End Users
Confusing interface variations
Disjointed user journeys
Weakened brand presence
Muge Unlu
Design Team Lead
SmartGift® for Business is a digital gifting platform service that lets you choose your favorite gift and decide exactly where you’d like it delivered.
MY ROLE
I worked as an independent contractor, and the end-client was 1-800-Flowers.com, Inc. I created the multi-branded design system using Figma variables from scratch, working closely with front-end developers to ensure technical alignment. I also trained the design team on effectively utilizing the component library for new features, establishing sustainable design practices throughout the organization.
WORK PROCESS
Design System:
Single Source of Truth
NAMING TOKENS
Primitive Colors
Foundation colors in the SmartGift for Business Design System are absolute values that serve as low-level tokens, functioning as building blocks for the semantic color system rather than for direct interface use.
Semantic Colors
UI colors reference primitives to maintain consistent meaning across merchant brands while adapting to each brand's visual identity.
Component Colors
Component colors apply directly to UI elements, referencing semantic tokens for various states to ensure consistent behavior while maintaining custom visual identity.
SLOTS
Flexible Placeholder Components
Slots in our design system act as Figma placeholders that accept custom content while maintaining connection to the parent component, balancing consistency with customization by preserving system update inheritance.
2x
40%
3x
