ODDITY
Il Makiage
Role
Product Designer
Project Type
Design System
Year
2022-2026
Ongoing system work
Tools
Figma
System Context
When I joined IL Makiage, there was no shared design system, no Figma-based workflow, and no unified product language.
I led the creation of a design system from scratch, introducing reusable components, UI patterns, and a shared source of truth that improved consistency and made design-to-development handoff faster and clearer.
Before
Design work was fragmented across tools and files, with repeated UI decisions and inconsistent patterns across product experiences.
What i built
A Figma-based system with visual foundations, reusable components, UI patterns, and a shared source of truth for design and development.
Impact
Improved consistency across e-commerce flows, reduced repetitive design work, made handoff faster and clearer for engineering, and gave new designers a shared foundation to onboard and work from.
System Structure
The system was built using Atomic Design principles - starting with design tokens and visual foundations, then scaling them into reusable components and product patterns used across key e-commerce flows.
Tokens & Atoms
Before moving into deeper component work, we first needed to tighten the foundations. This included refining the typography system, clarifying font usage and sizes, defining spacing and grid behavior, aligning the base color palette, and creating a more consistent iconography language across key pages, quizzes, and recurring product moments.
These decisions created the visual foundation for the components and patterns that followed.
Molecules
Once the foundations and atoms were defined, repeated UI decisions were turned into reusable components with clear states, variants, and behaviors.
Designers could move faster with fewer inconsistencies, while engineers received components that were easier to implement, maintain, and scale.
Organisms
Core components were combined into larger reusable patterns for recurring e-commerce moments across PDPs, quizzes, post-quiz funnels, and product discovery flows.
Each pattern created a consistent starting point, while still leaving enough flexibility to support different pages, markets, and user journeys.
Templates & Screens
Core organisms were arranged into reusable page templates and applied across real product screens.
This connected the design system to the full e-commerce experience, helping the team move beyond isolated components toward scalable, consistent product flows.
Impact
The design system was never a one-time project, but over time it created a clear shift in how teams worked. Product experiences became more consistent across key flows, while designers had fewer repeated UI decisions to solve from scratch.
For engineering, clearer specs, states, and reusable patterns made implementation easier and reduced handoff friction. For new designers, the system became a shared foundation to onboard from and build with.
Overall, it helped product, design, and engineering move with more alignment, consistency, and speed.
A shared product language across key flows and pages.
Fewer repeated decisions and faster design work.
Clearer handoff for engineering with defined states and patterns.