Product Design
Atomic Design
Research
UX/UI Design
Loyalty
Ultimate, building a scalable design system
Creating a unified design language to ensure consistency, scalability, and efficiency across the Ultimate platform.
About Ultimate
Ultimate is a comprehensive loyalty platform that brings together shopping, experiences, and rewards into a unified ecosystem. As the platform evolved, maintaining visual and interaction consistency across multiple features became increasingly important.
About the project
The Ultimate Design System was created to establish a shared visual and interaction language across the platform. The goal was to enable faster product development while maintaining consistency across interfaces, teams, and experiences.
40+
Reusable components
96
Reusable styles
36
Structured UI patterns
Visual language & colours
A structured color palette was created to support hierarchy, accessibility, and brand recognition. Primary, secondary, and functional colors were defined to guide both visual styling and interaction states.
Icons
A consistent icon set was developed to ensure clarity across navigation, actions, and system states. Each icon follows a unified grid and visual style to maintain recognizability across different interface contexts.
Atomic design framework
The design system follows an atomic approach, where interfaces are built from foundational elements into increasingly complex structures.
This framework improves maintainability and ensures that new features can be developed without introducing inconsistencies.
Atoms
Buttons
Chips/ tags
Stepper
Molecules
Modals
Stepper
Header/ Footer
Templates
Program cards
Selection card
Banners
Patterns
Homepage
Dashboard page
Confirmation
Atoms
Atoms represent the smallest building blocks of the interface, including buttons, input fields, typography styles, and color tokens. These foundational elements ensure visual consistency across the platform.
Molecules
Molecules combine atoms into functional UI components such as search bars, form groups, and content cards. These components allow teams to build complex interfaces efficiently while preserving consistency.
Templates
Templates define structured layouts for key screens within the platform. By standardizing layouts, the design system helps teams quickly assemble pages without reinventing structure.
Patterns
Interaction patterns define how users navigate and interact with the system. These patterns ensure predictable behavior across the platform, improving usability and reducing learning curves.
Reflections
Building the Ultimate Design System reinforced the importance of shared design language in large-scale digital products. By aligning teams around a structured system, we enabled faster iteration, reduced design inconsistencies, and improved long-term product scalability.
