Corporate Card Fintech — Multi-Role Portal & Design System

Sole Website UI Designer for EasyBuyCard, a corporate credit card fintech and financial solutions provider. Designed a 5-page, 144-node Figma product suite (file PV1a0t9B4S7cmNAUEeX8QD): 65 canvas nodes on the main Design page spanning three marketing landing page iterations (v1, v2, v3), 3D physical card presentation mockups, and back-office portal dashboards across four distinct user roles (Admin, Gestor, Assessor, Cliente), paired with a dedicated 79-component Design System page—the deepest tokenized component library in the 15-website Sagitta agency batch.

Agency employment at Sagitta delivering from August 2024 to September 2, 2024. Juan delivered as sole website UI designer within a three-way team split: Kelvin Bezerra created the visual identity and logo, Juan designed the complete website UI, multi-role portal layouts, and design system, and an external no-code developer was tasked with WordPress implementation. Product discovery and client research belonged to Ramon.

Multi-role SaaS architecture for corporate card management

📐65

canvas nodes on the primary Design page

🧩79

component sets on the dedicated Design System page

👥4

distinct portal personas (Admin, Gestor, Assessor, Cliente)

💳3

landing page iterations with 3D card presentations

Corporate credit cards require a fundamentally different information architecture than consumer cards. Rather than a single balance and statement view, a corporate card ecosystem operates across four interconnected permission levels, each with radically different operational priorities and data density requirements:

• Master Administrator (Admin) — System-wide financial oversight, aggregate liquidity views, total credit limit allocation, default risk parameters, and partner company onboarding.
• Corporate Manager (Gestor) — Enterprise operational control: setting departmental spending limits, issuing physical and virtual cards to employees, establishing category-level merchant blocks (e.g., fuel vs. travel), and reviewing monthly corporate statements.
• Commercial Advisor (Assessor) — Pipeline dashboard tracking corporate client acquisition, card distribution quotas, active activation rates, and commercial commission reporting.
• End Cardholder (Cliente) — Personal mobile and web cardholder portal: current available balance, real-time transaction feed, instant card lock/unlock, and virtual card generation for online business purchases.

The dedicated 79-component design system

Across the fifteen corporate websites designed during my tenure at Sagitta, EasyBuyCard was the only engagement that received a standalone, dedicated Design System page (node 1:14, containing 79 machine-read component sets). Rather than scattering unlinked instances across artboards, I structured a unified design foundation to ensure visual coherence between the public marketing surface and the dense internal portal screens.

• Financial Data Tables — High-density tables with multi-column sorting, transaction status chips (Approved, Pending, Flagged), date-range filters, and pagination controls.
• Metric Summary Cards — Executive KPI blocks displaying aggregate expenditure, limit utilization ratios, active card counts, and period-over-period delta indicators.
• Progress Indicators — Tokenized circular and linear progress gauges communicating credit limit consumption at both corporate and individual cardholder levels.
• Contextual Form Inputs — Structured numeric inputs with currency masking, card number formatters, search inputs, and customized role-selection dropdowns.
• Interactive Pricing Switches — Tabbed toggles allowing prospective enterprise clients to compare basic vs. premium corporate card subscription tiers on the marketing landing page.

Marketing landing page iterations and physical card visualization

On the marketing front, the project called for establishing immediate institutional trust. Fintech credit solutions face intense scrutiny from corporate financial officers who require assurance of financial stability, clear fee structures, and enterprise-grade security. I designed three distinct landing page variations (Landing Page v1, v2, v3), experimenting with dark-mode versus high-contrast light-mode visual tones, 3D embossed physical card renders, and responsive mobile adaptations at 375px.

What this project is and is not

• Not a shipped or live product. Checked on 2026-08-21: the only historical archive is an 'Em breve' tapume holding page (24 KB) from May 2024. The product was designed and delivered for implementation, but never reached a public launch.
• Not brand identity or logo design. Kelvin Bezerra created the EasyBuyCard logo and visual branding across this entire agency cohort.
• Not WordPress development. Implementation was assigned to an external no-code developer.
• Not user research or discovery. Product discovery and requirements were handled by Ramon.
• Not auth flow novelty. The onboarding and authentication screens (Cadastro, Login, Recuperar Senha) in the file used the standardized Sagitta agency auth kit and are not original to this project.
• Not a greenfield file built from scratch. Like most Sagitta agency deliverables, it adapted an agency base kit with custom domain-level fintech architectures.

The value of comprehensive portal design

EasyBuyCard illustrates how complex multi-stakeholder fintech products are structured before code is written. By separating four operational roles, standardizing 79 UI components, and iterating across three responsive landing page concepts, the design provided a complete, actionable technical blueprint for a modern corporate credit ecosystem.

Evidence

The product provably did not launch during the engagement era. The sole surviving Wayback Machine archive from the period (2024-05-26) is a 24 KB 'Em breve' holding page, and the domain easybuycard.com.br is dead today. The design was completed and delivered for CMS implementation, standing as an authentic design artifact for multi-role SaaS architecture and fintech design systems, not a shipped product.