Bubble DS

Design Systems
2024
Design System Lead
Dashboard view of the analytics homepage
Dashboard view of the analytics homepage
Dashboard view of the analytics homepage

Process

👆 DeepDive by Google's NotebookLM


Project Overview


Betterfly is a B2B2C wellness-based insurance platform. In 2022, they became Latin America's first social impact unicorn and faced both exciting opportunities and complex challenges. I joined Betterfly at this crucial time, first as part of the core team, and then to shape and lead the design system, taking care of its planning, alignment, launch and maintenance.


Discovery


Started with a comprehensive audit of existing UI components and user flows.
Executive meetings with stakeholders to identify pain points and align on desired outcomes.
We ran workshops to align the design system with our needs, ensuring measurable outcomes and real value.

Alingment workshops



Implementation and Adaptation

One of the challenges was to balance system development with sudden changes in business strategy due to branding updates, gamification approaches, or look and feel redesigns. We solved this by parameterizing the branding aspects of the design system and ensuring agile updates through tokenization and flexible library structures.





Results

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.
Documentation: Supernova helped us build and scale our design system documentation to be able to have all our design and development guidelines, decisions, and assets in one place.

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.



Positive feedback from both stakeholders and users, who appreciated the enhanced consistency and usability of the platform.


Team

Design systems are made up of many components, patterns, styles and guidelines that can help operationalise and optimise product efforts. But they are designed, managed and implemented by people. I have helped and been helped by some incredible people along the way.

Bubble Team: Camila Gonzalez, Allan Orellana, Natalia Guzmán and Richard Lozano.
El Mero Mero Team: Francisco Arias, Daniella Villanueva, Maralid Yañez, Madona Morales
Core Team: Luis Ávila, Nick Muñoz, Carolina Correa.
Visual Designers: David Molina, Ivan Motta.
Branding: Design Studio

Dashboard view of integrations page
Dashboard view of integrations page
Dashboard view of integrations page