Documentation Void
Legacy documentation was shallow and confusing. Without real usage rules, designers had to guess UI patterns and correct components every single day.
Emibê Design System
Leading the evolution, documentation, and adoption of Mercado Bitcoin's design system
Client
Mercado Bitcoin
Duration
Jun 2021 → Sep 2022
Scope
Design System, Product Design, Documentation, Governance
TL;DR:
At Mercado Bitcoin, I transformed a fragmented and unmaintained Design System into a scalable, governance-driven platform that unified design and engineering. By leading research, restructuring the Figma ecosystem, defining design tokens, establishing cross-functional processes, and building a new Design System from the ground up, I reduced 41 libraries to 2, accelerated interface creation by 3x, and enabled consistent, accessible experiences across web and mobile products.
Overview
Bringing structure and clarity to a product experience for millions of users.
Mercado Bitcoin is the largest cryptocurrency exchange in Latin America, serving millions of users across a rapidly evolving digital ecosystem.
I started out in a multidisciplinary squad focused on security, designing end-to-end flows for Web, iOS, and Android. But living the day-to-day reality of the product made me notice huge systemic gaps. Instead of just patching individual screens, I stepped up to pivot my role and dedicate myself completely to building a core, centralized team.
The mission was clear: pull the design system out of chaos and establish consistency, real documentation, and smooth adoption across the entire ecosystem.
The Challenge
A broken legacy system fueling design friction and engineering debt.
Our legacy system, Apollo, was just a fragmented collection of components running with zero centralized maintenance, no dedicated owners, and no alignment with engineering. This lack of structure caused massive visual mismatch across the platform and turned every new feature into a development bottleneck.
Before moving forward with a solution, we needed to map out our main friction points. Looking at the system structure, we grouped our technical debt into four critical fronts:
Library avalanche
Figma files were scattered across 41, unmaintained component libraries running at the same time, making it difficult to define a single source of truth.
Engineering Rift
Apollo had zero engineering involvement. Web and mobile front-ends faced high debt since nothing was pre-built.
Accessibility Blindspot
Basic inclusion was completely locked out. Live interfaces suffered from poor typography legibility and critical low color contrast problems.
The Turning Point
A massive company-wide rebranding demanding immediate systemic agility.
The turning point came when the company decided to launch a major rebranding. Rolling out a completely new identity—with brand-new color matrices, updated typography, and fresh brand elements across every single squad at the same time—was structurally impossible with what we had.
I embraced the initiative to centralize operations, forming a dedicated Design System core cell. The team kicked off small but focused: myself, another product designer, and the part-time support of one Front-End Web Engineer and one Mobile Flutter Engineer to bridge the gap into code.
Hands-on!
How we built alignment, updated infrastructure, and scaled our design decisions.
User research
To build a tool that designers would actually want to use, we ran 1:1 qualitative interviews with the entire product design chapter. The main findings were:
- 19% CSAT Benchmark: Critically low satisfaction regarding library utility and asset speed.
- 5/10 Knowledge Score: Designers struggled to find or apply existing patterns properly.
- 78.6% Accessibility Gap: General team unfamiliarity with strict WCAG parameters.
The data spoke for itself. The team explicitly demanded an overhaul based on four main pillars: file organization, a collaborative culture, deep documentation, and unified processes.
Tooling ROI & Workspace Strategy
At the same time, we ran extensive Desk Research supported by a CSD Matrix to evaluate how the team interacted with Figma. The diagnosis was clear: we needed an upgrade to the Figma Organization tier to unlock enterprise features like advanced project organization, robust file versioning, and usage tracking via Figma Analytics.
By running an intensive seat audit - purging inactive licenses and obsolete seats during the data migration - we secured an unexpected annual saving of R$ 31,000, making the structural upgrade completely budget-neutral.
Collaboration
With the enterprise workspace active, we completely restructured the internal layout of our shared environment to prepare for proper governance. We designed a standardized workspace proposal establishing explicit spaces for product squads, distinct project grouping templates, uniform library naming conventions, standardized cover cards, and predictable inner page flows.
Instead of imposing this setup top-down, we brought the entire design team into collaborative design critique sessions hosted on Miro. This co-creation step allowed us to capture live friction notes, iterate on team needs, and collectively validate a layout optimized for everyone's daily workflow.
Cross-team alignment
To accelerate internal adoption and transform the engineering-design relationship into a high-performance system culture, we established practical agile ceremonies. We split communications into:
- 🗓️ DS Planning: Held every Monday to plan the DS team's activities for the week.
- 🗓️ DS Daily: Cross-discipline meetings to track progress and proactively unblock code barriers.
- 🗓️ DS Weekly: Conducted every Friday to review the week's activities and report progress to leadership.
- 🗓️ DS Sync: Conducted every Wednesday to align the team by presenting completed and ongoing tasks, leadership updates, research and ops, and acknowledgments for colleagues.
Improving communication and transparency
In an effort to promote transparency regarding the progress of the new design system, we also implemented the following initiatives:
- 💡 Slack communications about updates to the Design System
- 💡 Creation of a space in the Notion tool for designers to request tasks (such as components, interface reviews, etc).
- 💡 Development of the roadmap for the MVP of the new design system.
- 💡 Definition of a collaboration guide for users.
Mapping out components
To ensure that all aspects of product design and development were managed efficiently, consistently, and at scale, we began to define and organize our single sources of truth.
We started by mapping all product interfaces across its platforms (web, mobile, and Android & iOS app) to create a component inventory. This allowed us to identify inconsistencies and divergences in experiences across platforms and identify opportunities for improvement and applications of the design system.
Setting up our foundations
Following that, we began creating design tokens, which were essential for managing the visual style of the brand, optimizing component customization, and ensuring alignment with the development team, who used these same tokens in the code. Additionally, the scalability and theming capability addressed two key business needs: dark mode interfaces and the launch and acquisition of new products and brands.
We created color tokens (light & dark mode), typography, spacing, shadows, border radious, border width, opacity, and z-index, all properly documented in a specific file.
Creating components
We developed a concise process for creating new components, consisting of research, analysis, ideation, and delivery stages, along with a follow-up strategy for Emibê. This strategy is based on measuring user satisfaction every two months, conducting ongoing research, and qualifying ambassadors to strengthen the Design System culture.
Finally, we refined the components and structured main files in Figma to centralize the product flows considering all platforms, along with a unified library for icons.
From Apollo to Emibê
Creating an identity the team actually owns.
Originally called Apollo, the Design System went through a collaborative naming process involving Product Designers and team members across the initiative.
The chosen name - Emibê - came from the phonetic pronunciation of “MB”, creating a closer connection with the company identity while making the system feel more approachable and recognizable internally.
Alongside the naming process, I also explored multiple logo and visual identity directions for the system.
Applications
Applying Emibê Across Product Experiences
By centralizing foundations, components and interaction patterns, Emibê enabled product teams to create more cohesive experiences across Mercado Bitcoin's ecosystem.
The interfaces below showcase the application of the Design System across different journeys in both Light and Dark modes.
Impacts
From operational chaos to a high-performance system culture.
After 4 months of restructuring, our design system transformed how design and engineering build products together:
+85%
annual savings
Achieved by auditing inactive licenses during the migration, completely paying for the upgrade to Figma Org.
-39
library reduction
Consolidated 41 scattered files into just 2 core repositories. One source of truth for all design decisions.
+2 platforms
seamless alignment
Unified web and mobile experiences. Hand-off friction decreased, bridging the gap between design<>code.
100%
token accessibility foundation
Contrast, typography legibility, and native dark & light mode hardcoded into tokens for WCAG compliance
3x faster
interface creation
Reusable patterns, governance rituals, and clean file structures slashed production times and empowered squads.
Zero
UI reconstruction
No more pushing pixels on repetitive tasks. Designers gained full autonomy to focus entirely on research and product strategy.
The end of the journey
Less about pushing pixels, more about bringing teams together.
In October 2022 I left Mercado Bitcoin to embrace a new challenge.
The main learning I take away (in addition to an expanded understanding of blockchain and cryptocurrencies) is that a design system is, above all, about people. One of the coolest things about working with this type of product is being able to be close to my users and keep them involved and integrated at each stage of the process, continually adapting the system to meet their expectations and needs.
I said goodbye to the company grateful and satisfied with the work I managed to accomplish in such a short period of time (and 100% remotely!). I left the Emibê structure ready for new updates, and, most importantly, a satisfied and engaged team, which started to recognize the value and benefits of the design system in their work. Furthermore, I made friends that I will last a lifetime!
