{"id":79,"date":"2026-04-16T05:09:08","date_gmt":"2026-04-16T05:09:08","guid":{"rendered":"https:\/\/delandabarbosa.com\/eng\/?post_type=jetpack-portfolio&p=79"},"modified":"2026-04-16T05:09:08","modified_gmt":"2026-04-16T05:09:08","slug":"d3-fintech","status":"publish","type":"jetpack-portfolio","link":"https:\/\/delandabarbosa.com\/eng\/portfolio\/d3-fintech\/","title":{"rendered":"d3 fintech"},"content":{"rendered":"\n
\n
\n
\n

d3 Fintech<\/h1>\n B2B financial platform designed from scratch, from information architecture to 71 screens. Digital account, corporate Pix, and sub-account system for business management.
\nRole:<\/b> UX\/UI Designer
\nPlataform:<\/b> Mobile (iOS & Android)
\nScope:<\/b> Product Designer, Information Architecture, User Flow, B2B Fintech\n <\/span>\n
<\/div>\n <\/div>\n \n <\/div>\n<\/section>\n\n\n\n
\n
\n The Challenge<\/b>
\nUnlike a consumer banking app, a company operates with multiple stakeholders, legal documentation, cash flow across accounts, and regulatory obligations. The app needed to support all of this without compromising usability.\n\nThe central challenge was to create an experience that feels simple for day-to-day management, while covering the full complexity of financial back-office operations underneath: KYC with business documentation, legal representative, biometric selfie validation, and PIN as a second authorization factor.\n\nAdditionally, the sub-account feature (child accounts linked to a parent company account) has no direct equivalent in traditional banking apps. A new mental model had to be created, without a consolidated market reference.\n\nPS: This project consisted of designing a complete fintech application focused on payments and receivables via Pix, with native ERP integration. Developed internally as a proposal for a real client, the project was not implemented due to budget constraints. The visual identity presented is fictional and created exclusively for portfolio purposes.

\nStructure<\/b>
\nThe experience was structured considering the complexity of the B2B context, especially onboarding, which involves 9 critical steps \u2014 from account creation to security validation. Each step was designed to reduce drop-off and ensure clarity for the user.\n\nThe flow also includes the 4 types of Pix keys (CPF\/CNPJ, email, phone, and random), with specific validations and error states, maintaining consistency and predictability throughout the journey.\n\nAdditionally, I designed a new sub-account module with batch transfers on mobile, with no reference in the Brazilian market, requiring flows to be built from scratch with a focus on control, scalability, and usability.\n <\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
\n
\nEach decision has a rationale. Below are the most relevant ones: across information architecture, interaction, visual system, and error handling.
\nUX – <\/b>Architecture and Flow: centralized hub instead of fragmented operations. All Pix operations (Transfer, Pay QR Code, Deposit, Request Payment, My Keys, My Limit) originate from a single Pix Area, accessible from both the Digital Account and the main menu. The alternative would be distributing each operation as a separate menu item, increasing cognitive load for managers who use all of them.
\n\nZIP code auto-fills address: in both address flows (company and legal representative), entering the ZIP code auto-fills street, neighborhood, city, and state via ViaCEP integration. The user only needs to complete number and complement. This removes 5 out of 7 address fields as active input, reducing both time and typing errors on objective data.
\n\nDisabled CTA until required fields are complete: the \u201cContinue\u201d button remains gray and inactive until all required (*) fields are filled. On the documents screen, the button only activates after uploading the Articles of Incorporation; other documents are optional and visually distinct. This eliminates submission errors and the frustration of validation messages after clicking. Feedback happens before action, not after.
\n <\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
\n UI – <\/b> Contextual icon + floating label = immediate recognition: each form field includes an icon on the left indicating the expected data before reading (lock for password, envelope for email, calendar for date). This reduces reading load in long forms, especially in a 9-step onboarding flow.
\n\n2\u00d72 grid with icon + label instead of list: the Home uses a grid of 4 cards with icon and service name, not a vertical list. For an app with multiple distinct business modules (Digital Account, Open Banking, Billing Center, Payroll Credit), the grid communicates parallelism \u2014 \u201c4 products, equally accessible\u201d \u2014 while a list would imply hierarchy or sequence.
\n\nReceipt with masked data and direct download: the transfer receipt displays partially masked CNPJ (*000-) and agency\/account in banking format. The download icon in the top-right corner is the only action element, deliberately without a share button to avoid encouraging external sharing of sensitive data. Masking is not just visual, it is a security behavior communicated through UI, without relying on text warnings.\n <\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
\n System – <\/b> PIN as a second-factor pattern: a 6-digit PIN is required for all critical actions \u2014 Pix transfers, key deletion, limit adjustments, and sub-account creation. The consistency is intentional: a single mental model of \u201cauthorization\u201d avoids forcing users to decide which credential to use in each context.
\n\nBalance as a toggle: balance visibility is opt-in, not default. The eye icon next to the balance allows hiding the value. It remains visible by default, based on the B2B context where financial managers typically need immediate access to the amount, unlike consumers who may be in public environments.
\n\nPix limits: three independent limit periods with individual editing. The app distinguishes daytime (06:00\u201319:59 for individuals), nighttime (20:00\u201305:59), and full-period limits for companies; each editable separately with PIN confirmation. This level of granularity is uncommon in B2C apps but is a regulatory requirement from the Central Bank for business accounts.\n <\/div>\n\n\n\n
\n \n<\/div><\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n Sub-accounts \u2014 A New Mental Model<\/b>
Balance distribution across multiple sub-accounts on a single screen. The \u201cTransfer between accounts\u201d screen lists all sub-accounts with an editable value field for each, plus a global field at the top (\u201cEnter the amount to be sent to each account\u201d). The remaining balance to distribute is calculated in real time as values are entered.\n\nDiscarded alternatives: a separate transfer flow per sub-account (inefficient for users with 5+ sub-accounts) and an \u201cautomatic distribution\u201d screen (loss of granular control required by managers).\n <\/div>\n\n\n\n
\n \n<\/div>\n\n\n\n
\n Results:<\/b> PComplete platform with documented process, from information architecture mapping to final screens \u2014 ready for development handoff.
\n71<\/b> screens documented \u2014 default, empty, error, and success states.
\n9<\/b> onboarding steps with full KYC, no unnecessary fields.
\n1 AI – <\/b> complete architecture with 4 modules and 3 hierarchy levels.
\n0<\/b> Eunrecoverable errors \u2014 every edge case has a defined next step.<\/div><\/div>\n\n\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

d3 Fintech B2B financial platform designed from scratch, from information architecture to 71 screens. Digital account, corporate Pix, and sub-account system for business management. Role: UX\/UI Designer Plataform: Mobile (iOS & Android) Scope: Product Designer, Information Architecture, User Flow, B2B Fintech The Challenge Unlike a consumer banking app, a company operates with multiple stakeholders, legal […]<\/p>\n","protected":false},"author":3,"featured_media":80,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"jetpack-portfolio-type":[4,3],"jetpack-portfolio-tag":[],"class_list":["post-79","jetpack-portfolio","type-jetpack-portfolio","status-publish","format-standard","has-post-thumbnail","hentry","jetpack-portfolio-type-ui-design","jetpack-portfolio-type-ux-design"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio\/79","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio"}],"about":[{"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/types\/jetpack-portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":1,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio\/79\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio\/79\/revisions\/83"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/media\/80"}],"wp:attachment":[{"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/media?parent=79"}],"wp:term":[{"taxonomy":"jetpack-portfolio-type","embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio-type?post=79"},{"taxonomy":"jetpack-portfolio-tag","embeddable":true,"href":"https:\/\/delandabarbosa.com\/eng\/wp-json\/wp\/v2\/jetpack-portfolio-tag?post=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}