Client:
Dedicated (Comply)
My Role:
Sole UX/UI Designer
Year:
2020 – 2025
Team:
1 Designer (me), 1 Product Owner, 2 SAP Consultants, 1 Frontend, 1 Backend, 1 ERP, 1 AI Engineer
Reading Time:
~7 min
Service Provided:
Discovery, UX Design, Testing, UI Design, Design System
The Challenge
Accountants, Administrative Managers and CFOs used to work with:
Sensitive documents distributed across multiple tools with no unified tracking
Repetitive manual processes causing errors and duplication
No real-time visibility on compliance and process status
Existing tools focused on individual features, not on an end-to-end workflow
The Design Tension
Automate enough to save hours, but stay transparent enough to earn trust in a domain where users are trained to distrust anything they can't verify.
Understanding The Users
Before designing, I worked with PO and SAP Consultants to map 3 core user types, each with different goals, contexts and frustrations.
Accountants – Operational Depth
Live in the tool 6+ hours/day. Need speed and zero ambiguity on compliance.
Design implication: clarity beats click-reduction (every action must be traceable and reversible).
Administrative Managers – Control & Oversight
Supervise the team and handle exceptions. Need visibility on what's blocked and why.
Design implication: they don't want dashboards, they want exceptions (highlight what requires action, hide the rest).
CFOs / Finance Managers – Strategic Visibility
Rarely inside the tool. Need real-time KPIs and approvals on the go.
Design implication: in regulated workflows, transparency is adoption (visible audit trails drive trust).
Process
I co-designed Comply end-to-end in Agile with PO, SAP Consultants and Development Team (design by frontstage, development by backstage). 2-week UX + 2-week UI cycles per feature.
My work included information architecture, user flows, wireframes, service blueprints, a design system built from scratch (components, patterns, documentation), technical handoff and functional testing in pre-release.
I was the only designer in a cross-functional team. Design and development happened together, every day.
How design connected with business, engineering and quality across every release.
Designing With Constraints
The hardest design decisions weren't visual. Each backlog item was a small piece of a larger feature and I built a service blueprint with the dev team for every one. We agreed on rules, edge cases and constraints before I opened Figma.
Sample blueprint from a sprint on the cost-centre allocation step, one piece of the larger invoice posting flow.
This blueprint shows an early iteration. The final UI added AI-suggested allocations on rows.
Design Decisions
3 cases where a design decisions met a system constraint:
One flow, two entry states. An invoice enters allocation as A* or B2 depending on its progress. Backend needed the states distinct for downstream logic; the interface treats them as one.
Configurable search threshold. GET /accounts fired on every keystroke. We added a minimum character count, configurable per client by the SAP consultant.
Two endpoints, one action. POST and PUT on /invoices/{id}/allocations preserved separate audit trails. The frontstage read 200 vs 201 to show "Allocated" or "Updated" in the alert (1 action, 2 outcomes).
The Architectural Decision
The default in B2B SaaS is one responsive layout for all roles. We rejected it for Comply.
Accountants and Managers don't share screen sizes, they share data. Their jobs are opposite. So we built 2 products on a shared backend: Web for depth, Mobile for action.
Web for Accountants. See everything, act on what breaks the pattern.
Mobile for Managers. Open to act, not to browse.
Mapping The Product
High-level view of the Web product. 7 main areas, 15 sub-sections, 1 shared entry flow (Login → Company Selection). A detailed version was delivered to the Development Team.
High-level information architecture. Web only. Synthesis, not the complete map.
Solution
Comply is a modular platform that unifies document management, e-invoicing and compliance monitoring into a single platform.
Smart automation: OCR for unstructured documents, AI validation, automated SAP posting, unified e-invoicing reception
Control and tracking: centralized archive, audit trail, color-coded status with text labels for accessibility, rule-based document assignment, rule-based cost-center allocation and end-to-end dispute management
Multi-device: web for depth, mobile for action, cross-device for time sheets and expenses
Three Principles
3 principles drove every feature above:
Visible automation. Every automated action is labeled, reversible, explained. No black boxes in regulated work.
Status at a glance. Color-coded indicators paired with text labels communicate state in under a second, before users scroll.
Role-specific apps, not one responsive layout. Accountants and CFOs have opposite needs. One layout wouldn't serve in both cases.
Invoice Posting Assistant: Making Automation Visible
Hundreds of invoices a day, each a compliance risk. Automation only helps if accountants can trust and check every step.
Overall status leads the view. The "Post" button is disabled if any row needs action. The green DDT status is clearly visible, showing that what works is as important as what doesn’t.
Filter to reduce scan time. The “With error” filter hides clean rows, while totals and context stay visible, reducing noise without losing the full view.
Suggestions, not defaults. The model learns over time: high-confidence rows are assigned automatically, while low-confidence ones are shown as options. Less manual work, faster resolution.
Overall status closes the loop. When all rows are allocated, the status turns green and the "Post" button activates. The final action is enabled only when the invoice is fully traceable and error-free.
From Web To Mobile
The Accountant validates from web. The Manager approves from mobile. 2 roles, 2 devices, 1 shared workflow. The document never stops moving, even when the people change.
Web: Accountant assigns the invoice.
Mobile: Manager approves in two taps.
Design System
Not a Figma library. A technical handoff with the front-end team. Every component included its loading, empty and error states, responsiveness rules and tokens aligned with the Angular architecture. In B2B, design quality shows in production speed, not in mockups.
Each component included its full set of states and tokens, already named to match the front-end variables. The image shows a small selection.
Foundations
Before any component existed, each foundation was already a named token: colours, typography, spacing, radius and shadows. The image shows a small selection.
Anatomy
Each component was documented as a set of named tokens: radius, padding, icon size, typography and colours.
States
Each state of the button was mapped to a named colour token, used directly by the front-end.
Page States
Each screen was designed in its 4 states from the start. The front-end built the real behaviour, not just the happy path.
Business Impact
Most Comply customers came from paper-based workflows.
Metrics validated with 5 beta companies. The design primarily contributed to: error reduction (guided workflows), reduced time per invoice (auto-fill and visual matching) and expense visibility (role-based dashboards). Accounting automation and OCR were contributions from the engineering team.
Before | After | |
|---|---|---|
Savings per invoice | 46-50€ | -45€ (-90%) |
Time per invoice | 12–15 min | <2 min (−85%) |
Accounting closing | 7–10 days | <1 day (−90%) |
Errors and duplicates | 3–5% | <1% |
Process automation | 0–10% (Mostly manual) | 100% |
Expense visibility | 20–40% fragmented | 100% |
Learnings
Automation must be visible to be trusted. Silent auto-fills made accountants close the app. I made every automated action visible, reversible and explained.
The design system is half the product in regulated environments. It is where compliance lives, not just a styling layer.
The best design decisions came from meetings with SAP consultants, not from Figma. The rules and flows of the product came out of these meetings. Figma only translated them.
5 years on Comply showed me one thing: design doesn't happen in Figma. It happens in meetings, in quick sketches, in slow conversations that turn ideas into real products.
Next Project
