Consignado Privado / Fintech Flow
A front-end case study focused on building and maintaining a high-friction financial journey with validation, external data checks, user state management and business rules. The case is intentionally sanitized and uses abstract flow diagrams instead of client screenshots.
This professional case is intentionally sanitized. It avoids real client data, internal names, production screenshots and sensitive implementation details.
What this work proves.
Context
This case represents a sanitized version of work on a private payroll loan journey. The product surface involved multiple steps where users needed to authorize access, run a simulation, provide documents and move through contract-related states without losing trust in the flow.
Problem
The front-end had to make a high-friction financial process feel legible. Users were moving through sensitive decisions, asynchronous checks, business-rule validation and document handling. The challenge was to keep state transitions clear while integrating with external services and internal APIs.
Constraints
- No real customer data, production screenshots, internal names or proprietary rules are shown in this portfolio.
- The user journey depended on external authorization and eligibility states that could change the next available action.
- Forms needed to support validation, loading, error and recovery states without making the user restart the journey.
- Financial flows required careful language, predictable UI states and strong guardrails around incomplete information.
Technical decisions
Modeled the journey as explicit states
D-01Instead of treating the experience as a loose set of screens, the implementation worked around the idea of a controlled journey: authorization, simulation, document submission, contract preparation and exceptional states. That made branching behavior easier to reason about and test.
Separated UI feedback from raw API responses
D-02External and internal responses were translated into user-facing states. This kept error handling, retry affordances and pending states consistent across steps, even when the underlying service returned technical or incomplete information.
Protected trust in document and contract moments
D-03Document upload, review and contract-related interactions were treated as high-trust moments. The interface needed clear copy, visible progress and stable feedback so users understood whether the system was waiting, validating or ready for the next step.
Kept tests close to business behavior
D-04Vitest and MSW helped simulate important API branches and user paths, making it easier to validate the front-end behavior around success, waiting, blocked and failure states without relying on production services.
Outcomes
- A more maintainable front-end surface for a multi-step financial journey.
- Clearer handling of loading, validation, retry and blocked states.
- A case-study-ready architecture narrative that can be shared without exposing private implementation details.
Learnings
- Financial UX is mostly state design: every unclear transition creates user doubt.
- The best front-end architecture for complex flows makes business rules visible without leaking their complexity into every component.
- Sanitized case studies can still show engineering judgment when they focus on decisions, constraints and tradeoffs.
Impact
- Built and maintained critical user journey steps.
- Improved validation, state transitions and API integration reliability.
- Worked with complex business rules and sensitive financial flows.
react
typescript
ant design
vite
vitest
msw