0%
Julio Ferracini
Picpay 1

Picpay Design System

PicPay · 2023 – 2024 · Head, Design Foundation & System

Redesigning core experience and the new Picpay Design System for 65 million users — a strategic, data-driven evolution aligned with its IPO journey and exponential growth in Brazil’s fintech sector, transitioning from a wallet to a complete financial platform.

_ context

Problem framing

A product that scaled faster than its structure.

User

The experience lacked a clear hierarchy between core financial tasks and commercial stimuli.

Transactional flows, offers, and products competed for attention, creating friction in everyday usage and eroding user trust — especially in moments where reliability is critical.

Business

At scale, the product was driven by a fragmented system of 283 components without a unifying architecture.

This resulted in inconsistencies, slower delivery cycles, and growing technical debt — ultimately increasing app size and creating a measurable barrier to adoption and growth.

Research

The first step was to go into the field to identify real-life pain points and perceptions of customers. Use within context, prototyping to the extremes.

+300

People

Contextual usability in squares, transit, commercial centres

3

Weeks

~28 researchers and designers, continuous field testing

4

States

BA · SP · MG · RS — archetype-based regional strategy

+20

Prototypes

ux and visual concepts tested and iterated in field sessions
Picpay Design System
Picpay Design System
Picpay Design System
Picpay Design System

Designing for extremes.

Solving real problems requires designing within real contexts.
Without context, even well-designed products become noise.

Users trust first.

Quality is what earns that trust, and the numbers prove it. In financial products, trust is not a feature — it is the interface.

Across 300 users in contextual field studies, 83% ignored offers when they interfered with simple tasks like paying or transferring money.The more critical the task, the lower the tolerance for distraction.

This revealed a fundamental tension:

when monetization competes with usability, trust collapses — and so does conversion.

Old PP

Main insight

Users trust first, then convert.

Users consistently named transferring money, paying bills, and tracking balance as the interactions that built or broke trust. Offers experienced as noise when placed ahead of task completion.

Strategy

01

Concept Framing

Translated research insights into 3 testable visual archetypes — information-first, task-first, offer-first — validated in the field with 300 users.

02

Detailed Design

Full product design across 7 surfaces — Home, Carteira, Cartão, Shop, Benefícios, Onboarding, Investimentos — scoped by business importance and complexity.

03

Design Orchestration

System migration, QA tracks, and continuous delivery. Two parallel handoff tracks: product BU and Design System — each with its own dev and QA pipeline.

Trade-off

Offers deprioritised in favour of trust. Non-credit offers were moved behind task completion. However, using smart cross-selling to open up new perspectives for the business.

_ craft

Design Studio

Crafting a cohesive visual and interaction language

Picpay Design System
Picpay Design System
Picpay Design System
Picpay Design System
Picpay Design System
Picpay Design System
_ delivery

Impact System

Design as an operating system

Foundation

Tokens & Styles
General Structure
Base Interactions

Components

Base Elements
Root Components
Component Anatomy

Modules

Templates
Product Lib
Polished Components

(Design) Chassis

Selling System
Voice System
Polished Experiences

Design Chassis

Foundation

Modularity

01

Non-hollow components

Purpose is defined within the module. Atomic design requires complex guidance. Modular design is intuitive and comprehensive.

02

Visual engine priority

One module guides dozens of vocations, without suppressing flexibility and bringing consistency to journeys with rhythm and dynamism.

_ outcome

Rollout and Results

Scaling impact across product and business

Business Outcome

The Impact of Impact System: design app-to-brand and significant improvements at the product entry point.

Behind the Impact (System)

Do more with less and impact the end user experience.

20-30%

Handoff lag solved

Less than 1/3 of the old design system was equivalent in code.

10+ apps into 1

Excessive coupling

Independent modules in a rigid design distributed across BU’s.

-77%

Download size reduction

Performance improvements noticeable to the user.

≈ 74.6%

Reduction

More consistency, greater scalability, improved affordance.

Learnings

01

Prioritisation needs executive sponsorship

Intermediate management coordination cannot protect a project principle under delivery pressure—an appointed sponsor is needed to mediate the negotiation.

02

Quality is a business argument, not an aesthetic one

A 25% conversion uplift across 5M users is not achieved by moving faster with lower quality. The discipline to resist false urgency was the most important design decision in this project.

03

Redesigning at scale demands data-driven approach

When every change affects 35M users and hundreds of engineers, the only sustainable path is decisions anchored in business impact — shared language that cross-functional partners can also defend.

Picpay Design System
Picpay Design System
Picpay Design System
2026 – design by Julio Ferracini – São Paulo – Brazil