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.


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.

Regular design-development syncs and a living documentation site were established to facilitate seamless handoffs and ensure consistency.

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.

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