Sustain
Workflow-first CSRD readiness dashboard for German mid-market teams. Built from desk research on ESRS requirements and competitor patterns to support data collection, validation, and audit-ready reporting.
50,000 European companies face a new reporting mandate. Most have no system for it.
The EU’s Corporate Sustainability Reporting Directive (CSRD) requires companies to report on approximately 1,100 data points across environmental, social, and governance dimensions. For German Mittelstand companies — manufacturers with 250–5,000 employees — this is an entirely new category of compliance work.
The data lives across five or more departments. HR owns workforce metrics, Operations owns emissions data, Legal owns governance policies. No single person has a complete picture, and there’s no established workflow for cross-department ESG data collection.
What must a solution deliver?
What’s missing? What’s overdue? Where is the process stuck?
Which data points are validated? Are we audit-ready?
Who delivers what, by when? No ambiguity on responsibilities.
Desk research before pixels. Understanding the regulation, the users, and the gap.
I spent four days studying the ESRS framework, reading CSRD implementation guides from the German Federal Ministry for Economic Affairs, reviewing Bundesanzeiger filing examples, and comparing six ESG platforms at the pattern level — Sphera, Persefoni, Watershed, Plan A, Sweep, and Normative. Three patterns emerged.
Data import from ERP systems (SAP, Oracle). Audit trail and version history. Automated plausibility checks against industry benchmarks. PDF report generation matching ESRS disclosure requirements.
No clear “what do I do next?” workflow. Data collection is passive — wait for CSV uploads — rather than active: assign, remind, track. Progress exists but doesn’t connect to regulatory deadlines. The learning curve assumes a dedicated sustainability team.
Three screens for three questions every user asks.
Instead of a feature-packed platform, I organized the product around three sequential questions a sustainability manager asks every working day.
Executive overview: compliance readiness, data collection progress, deadline countdown, E/S/G breakdown, emission trends, and alerts. The page a sustainability manager opens every morning.
Interactive scatter plot mapping 10 sustainability topics by financial and impact materiality. Defines which ESRS standards are mandatory — the regulatory foundation for every data point.
Operational center for ~1,100 data points. Filter by standard, status, department. Assign owners, set deadlines, send reminders, validate entries. The screen users spend 80% of their time in.
Linear workflow — each screen feeds the next. DMA defines scope → Data Hub collects → Report assembles.
Every visual choice traces back to a user need or regulatory constraint.
Sustainability managers spend 2–3 hours daily in this tool. A dark theme reduces eye strain during long sessions and lets the E/S/G color system remain clearly legible. It also signals ‘professional tool,’ not ‘marketing dashboard.’
German professionals read ESRS in English but discuss compliance in German. A manual toggle lets them switch context mid-task — checking the English standard name while drafting German descriptions.
Environmental (green), Social (blue), Governance (amber). These three colors appear in badges, chart accents, border highlights, and navigation across all screens. Users know which pillar they’re working in without reading labels.
The Data Collection Hub doesn’t show empty fields. It shows assigned tasks with owners, deadlines, and ‘Send Reminder’ buttons. The tool creates accountability workflows, not just data storage.
The dashboard leads with ‘67% ready’ — not ‘33% missing.’ The scatter plot shows positioned topics, not checklists. Positive framing drives engagement; deficit framing creates avoidance in compliance tools.
All three screens use ResizeObserver instead of viewport media queries. They adapt correctly in full-screen view, Framer canvas, or embedded panels. No assumptions about viewport width.
Three interactive screens, fully responsive, zero dependencies.
Each screen is a single React component (<800 lines) deployed directly in Framer. No npm packages, no build step. Bilingual DE/EN toggle, staggered load animations, and container-query responsive layout.
Compliance Dashboard
Four animated KPI cards, E/S/G compliance rings with gradient progress bars, interactive emissions chart with scope-level detail, alert panel with severity-based ordering, quick navigation grid.
Double Materiality Assessment
Interactive scatter plot matrix: 10 sustainability topics positioned by financial × impact materiality. Animated dot placement, hover tooltips, click-to-select with synced detail panel.
Data Collection Hub
Three-column operational layout: ESRS standard filters (left), data point list with inline actions (center), context-sensitive detail panel (right). Supports bulk assignment, deadline tracking, and validation.
Two weeks from blank canvas to interactive prototype.
Read ESRS standards, CSRD guides, and audited 6 competitors. Mapped data collection workflows and department ownership patterns.
Defined the 3-screen architecture. Paper sketches. Identified the Dashboard → DMA → Data Hub sequential flow.
Established dark theme, E/S/G color system, and typographic scale. Built component tokens. Designed hi-fi screens.
Built all screens as React components. Zero dependencies. Animations, bilingual support, responsive layout. Deployed in Framer.
What I’d do differently with more time and real users.
This is a concept project built from desk research. The design decisions are grounded in regulatory requirements and competitor analysis, but they haven’t been validated with real sustainability managers. Honesty about that boundary matters.
Recruit 5–8 sustainability managers at German Mittelstand companies. Key question: does the Dashboard → DMA → Data Hub sequence match their mental model, or do they navigate compliance differently?
The hardest UX moment happens when the sustainability manager assigns a data point to someone in Operations who has never seen the tool. That first-touch experience for secondary users is untested and critical.
Could the tool pre-fill values from previous reporting years, industry benchmarks, or uploaded documents? Reducing manual entry across 1,100 data points would transform the daily experience.
The fourth screen — where collected data becomes an audit-ready CSRD report — is the payoff moment. Designing this would close the workflow loop from ‘collect’ to ‘deliver.’
B2B compliance tools fail when they organize around features instead of workflows. Sustain works by mapping to the three questions every sustainability manager asks daily: where do we stand, what matters most, and who owes what data.
Compliance Progress
Carbon Emissions Trend
Alerts & Actions
Quick Navigation
Recent Activity
Double Materiality Assessment
CompletedIdentify the material sustainability topics for your company
Last updated: January 15, 2026