DESIGNING FOR CONNECTION
How MoneyGram’s International Design System Unifies a Global Financial Ecosystem
The International Mission:
MoneyGram empowers human mobility, and our design system is a key driver of that vision. But beyond just sending money internationally to loved ones, our platform supports a dynamic ecosystem of brands—each feeding off the same design system while enhancing different financial services. From seamless global money transfers to digital wallets, crypto integrations (in select countries), and a rewards-driven marketplace, our international design system ensures a cohesive yet flexible experience for millions of users worldwide. This is how we built a system that bridges cultures, devices, and financial needs—while keeping the user at the heart of every interaction.
SOLVING THE PUZZLE
How MoneyGram’s International Design System Brings Global Experiences Together
A well-designed system should feel seamless—just like a perfectly solved Rubik’s Cube. Each element complements the other, forming a harmonious whole. But twist one piece out of place, and suddenly, things feel disjointed. That’s exactly how our product design team saw the challenge of creating MoneyGram’s International Design System.
To ensure consistency across our global platform, we developed RUBIC Mini App—a modular approach to integrating our design system within the MoneyGram digital experience. Inspired by human-centered design and guided by Material Design principles, we built a scalable system that seamlessly connects money transfers, digital wallets, crypto integration (in select countries), and a rewards marketplace. No matter which feature a user engages with, they experience a cohesive, intuitive, and beautifully aligned design—just like a well-arranged Rubik’s Cube.
The Building Blocks of Our Design System
From typography and proper grid spacing to CTA styles, toast notifications, design patterns, tokens, and more—we shaped a system where every piece complements the other. Each component was carefully crafted to ensure flexibility and scalability, allowing the system to evolve with new features while maintaining consistency across the platform.
This wasn’t just about aesthetics—it was about creating a unified experience that empowers users worldwide, no matter which part of the MoneyGram ecosystem they engage with.
We Unlocked Significant Improvements Across Tech
Streamlined Designer Workflow – With a single design library in Figma, designers across all teams could pull components quickly, eliminating inconsistencies and reducing redundant work.
Seamless Designer-Developer Collaboration – We documented the system in Zeroheight, making it accessible to engineering teams and reducing back-and-forth communication.
Accelerated Development – By standardizing components and documenting best practices, we reduced friction in the development process. This improved front-end implementation, decreased the number of story points in groomed stories, and enabled teams to take on more tasks per sprint.