Case Study: Building Intuitivo’s Design System
Intuitivo, an innovator in automated retail solutions, set out to unify and streamline the user experience across its flagship products: A-POP and Wallet App. I collaborated with the team to design and implement a comprehensive design system that simplified digital interactions while reinforcing the brand’s identity.
The Challenge
Before the project, Intuitivo’s digital products lacked a consistent design language, which led to fragmented experiences, slower development, and difficulties in scaling. The challenge was to create a shared foundation that:
Ensured visual and functional consistency across platforms.
Increased design and development efficiency by reducing redundant work.
Provided a single source of truth for all UI components and standards.
Approach
We embraced Brad Frost’s Atomic Design methodology to structure the system into clear, reusable layers:
Foundations
Defined the key building blocks of the visual language:
Color palette: Created a cohesive palette aligned with Intuitivo’s brand identity.
Typography: Selected fonts for clarity, legibility, and personality.
Grid & spacing: Built a flexible grid system for consistency and rhythm.
Iconography: Designed an icon library to ensure clear, intuitive navigation.
Atoms
Created basic UI elements including buttons, controls, inputs, and states that could be reused across screens.
Molecules
Combined atoms into small, functional components such as cards, banners, and carousels to handle key interface patterns.
Organisms
Developed larger, interactive units like product cards, menus, and bottom sheets that combined multiple components for high-impact experiences.
Templates
Applied the system to key flows like onboarding and transactional screens, ensuring consistency across end-to-end user journeys.
Collaboration
This was a cross-functional effort involving designers, developers, and product managers. We created shared documentation and libraries in Figma, aligning everyone on a unified design language.
Results
Delivered a comprehensive design system with 167 components, including 99+ atoms, 104 molecules, and 87 organisms.
Reduced design-to-development time by streamlining handoff and documentation.
Increased product consistency, improving user trust and brand recognition.
Created a scalable foundation for future features and product lines.
Key Learnings
A design system is never static — it must evolve as the product grows.
Early alignment with engineering saves significant time downstream.
Documenting decisions is as important as the components themselves, to onboard new team members quickly.
