Building Blocks of Consistency: The Bento Design System Story
1. Introduction
Imagine a beautifully decorated room, but each piece of furniture belonged to a different set. It wouldn’t feel quite right, would it? That’s what MoneyPay’s app interface started to resemble as it grew. A unified design system became the key to delivering a cohesive and seamless user experience.
MoneyPay isn’t just a single app; it’s a platform that includes:
- MoneyPay: A digital wallet and payment app.
- Money: A place for users to find deals and promotions.
- Colendi: A service offering buy now, pay later options and microcredits.
Each of these sub-apps were initially developed by different teams and had their own designs, making it hard for users to have a seamless experience when switching between them. This inconsistency led to a fragmented user experience and added to our development team’s workload. We needed a unified design system to bring harmony to these elements.
As a Junior UI/UX Designer at MoneyPay, I teamed up with the fellow designers in our team and sat down to create the Bento Design System. In this article, I’ll share the steps we took, the challenges we faced, and the lessons we learned along the way.
2. The Initial Steps
Fast-Paced Growth and Its Challenges: In the fast-paced world of fintech, speed often takes precedence. While this helps in quickly rolling out new features, it can sometimes lead to minor inconsistencies in the app’s design. As MoneyPay grew, these inconsistencies became more noticeable, making it challenging to maintain a cohesive look and feel across the platform.
From Font Choice to Design System: It all began with a simple wish: to use the same font across MoneyPay, Money, and Colendi. After some research and trials, we decided on using the Inter font. This small change highlighted the need for more uniformity and sparked the idea for a comprehensive design system.
We weren’t alone in facing design consistency challenges. We conducted research on established design systems like Apple’s HIG and Google’s Material Design. This research helped us identify best practices, understand common pitfalls, and tailor our approach to MoneyPay’s specific needs.
Inconsistencies in Final Designs: We also noticed differences between our Figma design outputs and the final designs on the live app. Without a solid design guide, it was tough to ensure that every detail matched our vision. Each designer’s interpretation could vary, leading to a fragmented user experience.
Scalability and Future Growth: As we looked towards the future, it became clear that our app needed a scalable design system to support ongoing growth. The Bento Design System was envisioned to not only address current inconsistencies but also to provide a robust foundation for future development. By creating a flexible and scalable design system, we could ensure that new features and updates would seamlessly integrate with the existing design.
Creating Flexible Components: One of our main goals was to create flexible components that could be used consistently across all sub-apps. These reusable components would save time and effort, allowing designers and developers to focus on innovation rather than reinventing the wheel for each new feature.
The Birth of Bento Design System: Armed with insights from our initial research and the need for scalability, we began planning the Bento Design System. Our goal was to create a comprehensive guide, including a unified color palette, typography scales, and a set of reusable UI components. This system would serve as our single source of truth, ensuring consistency across all MoneyPay experiences and streamlining the design and development process.
3. Building the Design System
First of all, Color: To establish a clear and consistent design language for MoneyPay, we implemented a limited color palette within Bento. This approach includes primary colors representing MoneyPay’s brands and a grayscale palette with specific use case names. For a clean and modern aesthetic, we opted against drop shadows. Instead, we leverage a light gray background with fully white components to achieve depth and hierarchy, resulting in a distinct visual experience.
Creating Visual Hierarchy: Building on familiarity, Bento adopts Inter as its core font, utilizing various weights and sizes to establish a clear visual hierarchy and maintain a clean aesthetic.
The Power of Four: Bento leverages a 4-pixel baseline grid system built on design tokens. These tokens are powered by Figma’s all new and versatile variables system. This ensures consistent spacing and element sizing across all MoneyPay experiences. This scalable approach allows for future expansion and adaptation of the design system.
Beyond Components: A Guide for All: Our documentation offers more than just a parts list. It dives deeper with clear do’s and don’ts ensure consistent use of components, color palettes, and typography. This empowers both designers and developers. Here are some examples from our guide:
4. Challenges and Lessons Learned
Growth Through Challenge: Developing the Bento Design System was a significant undertaking, especially for a junior designer like myself. It required me to step outside my comfort zone, learn new skills like system design principles, and effectively communicate design decisions to senior colleagues.
Balancing Legacy and Innovation: Design systems are living entities that evolve alongside the products they support. The challenge for the Bento Design System was to ensure it remained consistent with existing components while also updating them to accommodate new features and requirements.
Collaboration is Key: Successful development of the Bento Design System relied heavily on effective communication and collaboration between designers, developers, and product managers. Working together ensured a system that met both design and technical needs.
5. What’s Next for Bento
Bento’s a game-changer! It’s streamlined our design process, saved development time, and ensured a consistent experience across the MoneyPay app. But this is just the beginning. We’re constantly evolving Bento to make MoneyPay even more intuitive and user-friendly. Here’s what’s on the horizon:
- An Ever-Expanding Toolkit: Bento’s library will keep growing with new UI components, giving our design team the tools to tackle future features and stay ahead of the curve.
- Putting Users First: We’re looking into features like dark mode to personalize the MoneyPay experience and cater to your preferences.
- Screens of All Sizes: As technology changes and how you access MoneyPay evolves, Bento will adapt to support a wider range of devices and resolutions. No matter how you use MoneyPay, you’ll have a seamless experience.
By continuously improving Bento, we’re empowering our design team, enhancing your MoneyPay experience, and setting the stage for a bright future.
