FPML Editor

FPML (Financial Products Markup Language) is an XML-based standard for describing financial derivatives. At Societe Generale, traders and analysts needed to view and edit these complex documents — but existing tools were clunky developer interfaces, not designed for business users.

My internship project: design and build a web-based FPML editor that makes complex financial data accessible.

Complex Data Structures FPML documents are deeply nested XML with hundreds of fields. The UI needed to make this navigable without overwhelming users.

Technical Users, Limited Patience Financial professionals are smart but busy. Every click costs time. The interface needed to be efficient, not just pretty.

Validation & Error Prevention Invalid FPML can cause real problems in trading systems. The editor needed to catch errors before they propagate.

Built a web application using Angular and Material UI:

Tree Navigation — Collapsible tree view for navigating document structure. Users can drill into nested sections without losing context.

Inline Editing — Click any field to edit in place. No modal dialogs, no context switching.

Smart Validation — Real-time validation against FPML schema. Errors highlighted immediately with clear explanations.

Search & Filter — Quick search across all fields. Filter to show only specific data types or sections.

Dark Theme — Financial tools often run all day. A dark interface reduces eye strain during long sessions.

The tool shipped internally at Societe Generale.

What I delivered: • Complete UI/UX design for FPML editor • Working Angular application with Material UI • Tree navigation component for nested data • Inline editing with validation • Search and filter functionality

What I learned: This was my first real design-to-code project. Building what I designed taught me to think about edge cases, loading states, and error handling from the start. It's easy to design the happy path — implementation forces you to design everything else.