Details

Role: Staff Product Designer
Tools: Figma, Figma Variables, Miro, Supernova

Challenge

Create a Cohesive Design System
Develop a centralized and scalable design language for Betterfly’s platform.

As a Staff Product Designer, I led the creation and implementation of Betterfly’s design system—after called ‘Bubble’—during a pivotal time for the company. Betterfly was rapidly evolving, having become Latin America’s first unicorn and then a social impact unicorn, which meant we faced both exciting opportunities and complex challenges.

Establishing a design system that enables teams to deliver consistent product experiences efficiently is a complex task. Not from a design or development perspective, but from the product side of a design system.  Identifying and acting strategically to take advantage of opportunities to create transparency and implement design system pilots in a rapidly scaling structure is critical to achieve system goals.

Objectives

Ensure Scalability
Leverage Figma’s variables and design tokens to create a system that supports future product evolution.

Improve Collaboration
Streamline the design-development handoff process by standardizing components and workflows.

Enhance Efficiency
Reduce redundant design and development tasks by increasing component reusability.

Our Process

Research & Discovery

I initiated the project with a comprehensive audit of our existing UI components and user flows.

I collaborated closely with stakeholders—conducting interviews with developers and product managers—to identify pain points and align on desired outcomes.

We also conducted competitive analysis to benchmark industry best practices.

Alignment & Workshops

We ran workshops to hone in on the specific problems we needed the design system to solve. This helped us define measurable outcomes and ensure that our system would add real value.

Implementation & Adaptation

Using tools like Figma (including Figma Variables), Miro, and Supernova, we built a robust library of reusable components and integrated design tokens for colors, typography, and spacing.

A key challenge was balancing the system’s development with a sudden shift in business strategy due to a complete rebrand and a renewed focus on mobile. We addressed this by redefining our priorities, customizing the branding aspects of the design system, and ensuring agile updates through tokenization and flexible library structures.

Regular design-development syncs and a living documentation site were established to facilitate seamless handoffs and ensure consistency across both web and mobile platforms.

Bubble DS

We built Bubble to be the single source of truth for every cross-functional team member, such as designers, engineers or product managers. It powers every part of Betterfly’s product experience. It provides Betterfly with a common language and reusable code. It facilitates cross-functional collaboration, eliminates duplication of effort and creates design cohesion.

Variables & Tokens: Integrated design tokens for colours, typography and spacing to ensure flexibility and consistency.

Components: We have built a robust library of reusable components and patterns for both mobile and web platforms.

Results & Impact

The new design system reduced design time by 27% and the overall design-to-development cycle by 65%.

It improved cross-team collaboration, ensuring that everyone—from designers to engineers—was aligned.

Ultimately, we received positive feedback from both stakeholders and users, who appreciated the enhanced consistency and usability of the platform.

Key LeArnings

This experience underscored for me the importance of creating design systems that not only serve as a visual guide but also as a strategic tool that aligns with business goals and supports agile product evolution. It was a rewarding challenge that truly demonstrated how effective design systems can drive both operational efficiency and a superior user experience.”

1. Design systems are intended to provide a support structure between groups, but if that structure is not clear, the systems fade.

2. “For a design system to work, it needs to embrace the company’s characteristics and peculiarities.”

3. There are many things that can stop progress. This is even more likely if you are working for a growing company. 

4. Hook design system pilots or initiatives to the company’s overall goals. Consistency is not an end in itself, but the result of strategically adding value to the product ecosystem.