Role
Design Strategist
Product Designer
Design System Ops
Team
Betterfly Cross Team
Bubble DS Team
Overview
Betterfly is a wellness and insurance platform that enables organisations and their employees to improve their health and lifestyle. Among other features, the platform rewards users’ healthy habits with life insurance.
I joined Betterfly as part of Kunder (a company focused on fintech solutions), one of their strategic acquisitions in 2021. In 2022, they became the first B company (social enterprise) to achieve unicorn status in Latin America.
One of my key tasks was setting up and managing a new Design System.
Challenge
Components are easy, collaboration is hard
Creating a design system that enables teams to efficiently deliver consistent product experiences 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 the (few) opportunities to create alignment and implement design system pilots in a rapidly scaling structure is critical to achieving system goals.
Outcome
2022
DS Process V.1
Scaling up
Role
Research
Design
Ops & Strategy
Design Cross Team
1 Design Lead
1 UI Lead
1 Product Designer (ME)
1 Illustrator
1. Discovery
Research
We develop a series of studies and audits to define the scope and current state of product design at Betterfly, identify user needs (designers and developers), set objectives, explore and converge on a design direction, propose a strategy and gain organisational commitment.
Alignment
Then we run workshops to help us focus on the problem to be solved within the design system, define the aspects needed to build, measure and learn.
2. Strategy
We define a categorized set of deliverables alignend to specifics time framed objectives.
1. Starting DS Q1 – Q2. Establish a single source of truth for Betterfly’s digital product experience.
Creation and homologation of libraries in Figma
Governance models and collaborative team building workflows
DS team kickoff
Task management definition
2. Adopting DS Q3. Create a community and promote the design system culture for shared decision making, contribution and collaboration in its implementation and maintenance.
Share libraries and encourage their implementation at design level.
Create support and consultation spaces with product designers.
Communicate updates to teams
Define development tools and code distribution
Define the development process
3. DS Efficiency (Q4). Improve development efficiency and design consistency, allowing teams to focus on creating the best experiences for Betterfly’s digital products.
Share web (React) and app libraries (Android iOS) at code level.
Document and publish the design system at both code level and design guidelines.
Communicate releases and updates.
3. Delivery. Not. Rebranding.
Well, yes. It seems to be a fairly common pitfall to focus too much on the output of the design systems team and forget that your team was in the middle of a fast, complex business evolution process. And a request for a complete rebrand makes sense when you’re a startup and became the first B-Corp in Latin American to achieve unicorn status.
The company’s milestone and subsequent new product priority (mobile app instead of web as defined in our scope) forced us to reprioritise our efforts towards teams that needed to quickly implement the new visual style on their local domains.
3. (Redefined) Delivery
Although the system components development was de-prioritised due to new business objectives, we re align on adapt the design system prior to rebranding.
We define, customise and document the branding aspects of the design system. Follow up on upgrades and support teams to ensure their success in this big bang product updating.
Fortunately, the evolution of tokenisation and the implementation of changes to the library structure allowed for subtle and agile updates to styles and components.
Learnings
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.
2023
DS Process V.2
Rebrand extend
1. UI Audit
We’ve already done a general audit, which let us not only identify the most important elements, but also optimise those libraries and assets, and make them easier to find. So now we can review more specific things like iconography or more general things like navigation patterns.
Operations
As well as all of the above, we also put in place development, audits, critique, documentation and handoff processes, which helped to improve design and development quality standards.
