Performance breaks at scale
Most tools slow down or fail beyond 200 pages — and invoice bundles of 100–400 pages are the daily norm, not an edge case.
Split, merge and export documents — before AI reads them — Staple AI — Document Editor case study
Staple AI processes invoices, purchase orders and delivery notes for finance and operations teams. Documents arrive bundled — 40 pages that are really four invoices. As a design assignment for Staple in April 2026, I designed the Document Editor: the module where teams split, merge and reorganise pages across documents, with AI suggesting the splits and OCR naming every new section.
- OrganiseFolders · Sources · Workspaces
- EditSplit · Merge · AI suggestions
- ShipName · Export · Audit
4Core screens: folders, workspace, split & merge, export
6Tools benchmarked, from Adobe Acrobat to iLovePDF
37Screens and states designed, errors included
22Future features mapped across the document lifecycle
Forty pages that are really four invoices
About Staple AI
Staple AI is a document processing platform for finance and operations teams handling high volumes of invoices, purchase orders and delivery notes. Documents arrive from email, cloud storage and direct upload — often bundled together as one multi-page file.
The brief
Design a Document Editor workspace that lets users split, merge and reorganise pages across documents before exporting: browse folders, open one or more documents, split and merge sections, preview pages, act on many pages at once, and auto-name every new section.
Five problems every morning
Benchmarking existing tools surfaced the same failures again and again — in the exact workflow finance teams run daily.
No cross-document multi-select
Users can only work on one document at a time, repeating the same action again and again across vendor bundles.
Split and merge are hidden
The two most important actions live in right-click menus and side panels. New associates can’t find them without training.
Renaming after every split
Every tool names new files “Extract_001”. Teams rename hundreds of sections by hand — an estimated 60–90 minutes per batch.
Weak drag feedback
Most tools show one ghost page when you drag ten, so users can’t confirm what they’re moving before they drop it.
Let the product do the sorting
AI suggests where bundles split, OCR names each section, and bulk actions work across documents — the user confirms rather than creates.
How the work ran
- Research
Five research tracks
Competitor teardown, bulk-pattern analysis, thumbnail benchmarking, finance mental models and naming conventions.
- Define
People and problems
A primary persona and two secondary ones, five ranked UX problems and four opportunity gaps.
- Design
Flows, sketches, screens
An end-to-end flow with every branch, paper sketches, then 37 high-fidelity screens and states within Staple’s brand.
- Prototype
Clickable in Figma
A working prototype of the main module, from folder to export.
Five tracks, five answers
Each research track targeted one gap in what the design needed to know.
| Method | What I studied | Key output |
|---|---|---|
| Competitor UX teardown | Adobe Acrobat, PDF Expert, Smallpdf, Foxit, iLovePDF — multi-select, drag feedback, split and merge UI, power-user pain points | Gap matrix and bulk UX score benchmarks |
| B2B bulk pattern analysis | Figma (marquee select), Linear (floating bar), Notion and Airtable (inline checkbox and count badge), virtual scroll at 100+ items | Interaction model for multi-select and the action bar |
| Thumbnail UI benchmarking | Thumbnail height (120–150px), hover zoom, selection states, label placement | 130px height, 3-column grid, 2× hover zoom |
| Finance ops mental model | How finance teams think about documents — bundles, packets, chapters; folder conventions; where errors come from | Persona vocabulary map and naming convention |
| Auto-naming pattern study | Adobe AutoSplit OCR naming, PDF Expert suffixes, B2B naming (vendor-first vs date-first, invoice numbers) | Pre-confirm inline naming with an OCR fallback |
Six tools, one gap
Every tool could split and merge. None was built for acting on hundreds of pages at once.
| Tool | Strengths | Weaknesses | Multi-page handling | Power-user pain | Bulk UX score |
|---|---|---|---|---|---|
| Adobe Acrobat | Thumbnails, bulk reorder | Complex UI, pricey | Drag in Organize pane | Slow at 200+ pages | 68 |
| PDF Expert | Fast side-by-side view | Mac-only, limited scale | Sidebar drag | Expensive, platform lock-in | 72 |
| Smallpdf | Simple, quick | Size limits and quotas | Checkbox strip | Bulk friction, ads interrupt | 44 |
| Foxit | Custom views | Steep learning curve | Thumbnail marquee | Drag inconsistency | 51 |
| iLovePDF | Easy batch operations | Basic feature set | List reorder | Massive batches slow | 30 |
| Staple (design target) | AI + bulk + web-native | — the opportunity | Rubber-band select + AI assist | Built for 1,000+ pages | 92 |
Bulk UX scores are my own audit (0–100). Staple’s score is the design target, not a measured result.
Document prep is where time goes
Accounts payable teams that automate get invoices through in days, not weeks. Preparing documents is the first step of that pipeline.
Days to process a single invoice
Ardent Partners, State of ePayables 2024: best-in-class AP teams compared with all others.
| Group | Days per invoice |
|---|---|
| All other AP teams | 17.4 days |
| Best-in-class AP teams | 3.1 days |
Bulk UX score by tool
My audit of how well each tool handles acting on many pages at once (0–100).
| Tool | Bulk UX score |
|---|---|
| Staple (design target) | 92 |
| PDF Expert | 72 |
| Adobe Acrobat | 68 |
| Foxit | 51 |
| Smallpdf | 44 |
| iLovePDF | 30 |
How each tool really behaves
| Tool | Multi-select | Drag feedback | Split UI | Merge UI | Key pain |
|---|---|---|---|---|---|
| Adobe Acrobat | Marquee drag or Shift+click | Ghost thumbnail + insertion line | Right-click → Extract pages | Combine Files sidebar | Slow on 200+ pages; no keyboard bulk navigation |
| PDF Expert | Cmd+click in split-view sidebar | Live preview during drag | Drag selection to a new document | Two documents in Split View, drag across | Mac-only; no auto-range for bulk |
| Smallpdf | Checkbox per thumbnail or Shift range | Shadow + position line | Select range → Split | Upload several, reorder thumbnails | File size limits; ads interrupt power flows |
| Foxit | Marquee drag or Ctrl+click | Preview pane updates on drag | Select → Extract in combine pane | Even/odd select, drag in pane | Inconsistent multi-drag at 100+ pages |
| iLovePDF | Checkbox on bulk upload view | Basic hover state only | Range selector → split | Drag files into a list to reorder | Slow batch uploads; no advanced drag |
The same mistakes, in every tool
Across all six tools, four patterns kept repeating — two to build on, two to fix.
Methods
- Thumbnail rail is the shared mental model
- Split and merge hidden in every tool
- Generic names after every split
- A performance cliff around 200 pages
Key insights
Build on the thumbnail rail
Every tool uses a thumbnail rail to navigate pages. It’s an established mental model — Staple should build on it, not replace it.
Bring the main actions forward
Split and merge are buried in right-click menus everywhere. Making them first-class actions is the easiest big win.
Name sections before, not after
No tool suggests a name from the document before a split. Pre-confirm naming from OCR removes hundreds of manual renames.
Performance is a feature
Browser tools struggle above 100 pages. Virtualised rendering keeps a 1,200-page bundle as responsive as a 12-page one.
What no competitor offers
AI-assisted grouping
OCR and content similarity suggest where a bundle splits: “This looks like 4 invoices — Acme Corp (p.1–3), BrightTech (p.4–7)…”. The user confirms instead of creating.
Keyboard-first bulk navigation
Arrows to move, Space to select, Shift+arrow for ranges, Cmd+A for all, Esc to dismiss — the whole workflow without a mouse.
Pre-confirm OCR naming
Before a split runs, show the suggested name from page 1 and let the user edit or accept it inline. Right most of the time — the user only fixes the rest.
Virtualised 1,000+ page rendering
Only visible thumbnails load, so there’s no performance cliff — Adobe only partly solves this today.
Built around the person preparing the pile
Three user archetypes from finance and operations workflows. The primary persona drove every core decision.
Priya Menon
Finance Operations Lead · primary
- Company
- Mid-size logistics company
- Experience
- 6 years
- Volume
- 80–150 bundles a day
Goals
- Process daily invoice bundles without errors
- Split vendor bundles into individual documents for routing
- Keep a full audit trail of every split and merge
- Finish document prep before 11 AM
Pain points
- Her PDF tool slows to a crawl on 100+ page bundles
- Can’t select pages from several documents at once
- Every split is named “Extract_001” — renamed by hand
- Split and merge hidden in right-click menus
Finance Analyst
Reconciliation from multi-page reports
- Tech level
- High — Excel, PDF tools, ERP
- Main goal
- Accurate data from long reports
Goals
- Extract data from multi-page reports with formatting intact
- Move quickly between documents and sections
Pain points
- Manual data entry errors from poorly converted reports
- Tables misalign after conversion
Data Processing Associate
Bulk extraction for audits
- Tech level
- Advanced — basic automations
- Main goal
- Hundreds of documents, no errors
Goals
- Process hundreds of documents in bulk for audit preparation
- Work without slow-downs at volume
Pain points
- Tools don’t scale; multi-select is slow
- No page previews in bulk view; high error rates
One module, end to end
“Staple’s brief was a tool for splitting and merging pages. The research showed the real job was bigger: giving finance teams their mornings back.”
- Five-track research and a six-tool competitor benchmark
- Personas, ranked UX problems and opportunity gaps
- Information architecture for four core screens
- The end-to-end flow — happy path, alternatives and every error
- Paper sketches, then 37 high-fidelity screens within Staple’s brand
- A clickable Figma prototype and a future roadmap
- Client
- Staple AI (design assignment)
- Date
- April 2026
- Scope
- Document Editor module
- Users
- Finance & operations teams
- Brand
- Staple guidelines, Noto Sans, shadcn icons
- Tools
- Figma, FigJam
Four screens, one sidebar
A persistent left sidebar, a global top bar, and a floating action bar that appears only when there’s a selection to act on.
01 · Folder browser
- View modes
- List and grid (G)
- Sort & filter
- Name, date, size, type
- Date-range and type chips
- Multi-select
- Checkbox on hover
- Shift+click range
- Count badge
- Bulk actions
- Open in editor
- Move
- Delete
02 · Document workspace
- Thumbnail rail
- 130px pages, 3-column grid
- Rubber-band select
- Preview pane
- Full render
- Zoom and page info
- Section panel
- Named sections
- Inline rename
- Drag to reorder
- Floating bar
- Split · Merge · Copy · Move · Delete
03 · Split & merge
- Split
- Pre-confirm modal
- OCR-suggested name
- Merge
- “Merge here” target
- Ghost-stack drag
- Naming
- Vendor_InvNo_YYYYMMDD
- Editable before confirming
- Undo
- Cmd+Z
- Session history
04 · Export
- Trigger
- Always visible in the header
- Sections
- All pre-selected
- Toggle individually
- Format
- PDF or PDF/A
- Per-section override
- Output
- Download ZIP or cloud folder
- Progress, success and audit log
The happy path — and every way off it
The main module from opening a folder to a finished export — happy path, alternatives and every error. Drag to explore, zoom into any step, or open it full screen.
Read the flow as a list
- Start
- Screen or action
- Decision
- AI or system action
- Warning
- Error
- Modal
- Success
- Happy path
- Alternative
- Error
Folder browser
- Start: User starts the workflow
- Screen or action: Open the folder browserSidebar → Acme Corp / April
S1-DEFAULT - Screen or action: Select a source tabAll · Email · Drive · QuickBooks · Xero · Uploads
- Decision: Is the source connected?
- Happy path: Yes show documents as grid or list cards
- Alternative: No show a reconnect prompt
- Error: Upload fails corrupted, password-protected or too large — retry
- Decision: How many documents to open?
- Happy path: One click to open it directly
- Alternative: Two or three multi-select, then “Open in editor”
Document workspace
- AI or system action: Workspace loadsThumbnail rail, preview and section panel
S2-WORKSPACE - Decision: AI bundle suggestion?
- Happy path: Yes “3 invoices detected — review splits”
- Alternative: No or dismissed review pages in the rail, hover for 2× preview
- Decision: Confidence?
- Happy path: High green note
- Alternative: Low amber note — rename before confirming
- Modal: Accept all, or review eachBatch pre-confirm shows every suggested section; amber ones are highlighted for inline rename
- Success: Post-split workspace“3 sections created” + Undo
S2-POSTSPLIT
Split & merge
- Screen or action: Select pagesRubber-band drag · Shift+click · Space · Cmd+A
S2-MULTISELECT - AI or system action: Floating action bar appears“N pages selected” · Split · Merge · Copy · Move
- Modal: Split into sectionPre-confirm modal with page range and OCR name
- Happy path: High confidence accept the name
- Alternative: Low confidence amber warning — rename manually
- Screen or action: Merge hereGhost-stack drag to the target section, drop to confirm
- Success: Section created or mergedSuccess toast + Undo (10 seconds)
Export
- Screen or action: Click Export in the headerAlways visible — never nested in a menu
- Modal: Export drawer opensAll sections pre-selected; format and destination
S4-EXPORT - Warning: Any unnamed sections?
- Alternative: Yes amber warning, rename inline before export
- Happy path: All named continue
- AI or system action: Progress per sectionOverall % and a cancel option
S4-PROGRESS - Decision: Export result?
- Happy path: Success download links, open in folder, audit log entry
- Error: Failed error toast — retry the failed sections
- Success: Workflow complete
S4-SUCCESS
Ideas on paper first
Sidebar options, folder layouts, two upload approaches, the editing workspace and the export panel — sketched before any pixels.
Structure before style
The layout skeleton of the four core screens. Redrawn for this case study from the final designs.
AI finds the splits, you approve them
When a bundle opens, Staple reads it. If it looks like several documents, a banner says so — “AI detected 3 invoices” — and offers to review the suggested splits.
The review shows each suggested section as a coloured band in the thumbnail rail, with its OCR name, page range and a confidence dot. High-confidence sections can be accepted together; low-confidence ones are highlighted amber and must be renamed before they’re created. One click confirms them all.
The problem
- Users found document boundaries by scrolling, page by page.
- Every split produced a generic name to fix later.
- Nothing said how sure the system was.
What I designed
- AI-suggested splits shown as colour bands in the rail.
- OCR names pre-filled, with a confidence indicator.
- Accept all, or review each — amber ones need a name.
Why this, not thatI made the AI suggest, never act. Finance teams need an audit trail and the final say — so the AI prepares the splits and the person confirms them, with low confidence always flagged.
Select once, act everywhere
Selecting pages works the way people already know: drag a rubber band across the canvas, click checkboxes that appear on hover, Shift-click for a range, or Cmd+A for everything — across sections and documents.
As soon as there’s a selection, a floating action bar appears at the bottom with a count and every main action: split into section, merge here, copy to, move to and delete. Merging shows a ghost stack of the moving pages with a count badge, and a teal line marks exactly where they’ll land.
The problem
- One document at a time, the same action repeated.
- Main actions buried in right-click menus.
- Dragging ten pages looked like dragging one.
What I designed
- Rubber-band, checkbox, Shift-range and keyboard selection.
- A floating bar with every main action and a count.
- Ghost-stack drag with a +N badge and an insertion line.
Why this, not thatI anchored the action bar to the bottom of the viewport, near the content, instead of a top toolbar. It reduces eye travel, and because it always appears in the same place, people build muscle memory for it.
Named right, exported in one go
New sections are named the way finance teams file: vendor first, then invoice number, then date — for example AcmeCorp_INV-0089_20250408. The name is suggested from page 1 before the split runs, and it stays editable.
Export is always one click away in the header. Every section is pre-selected; format, naming and destination are set once; and any section still unnamed is flagged inline before anything leaves the workspace.
The problem
- Date-first names clashed with how teams file.
- Export settings hidden in nested menus.
- Unnamed files slipped through to the pipeline.
What I designed
- Vendor_InvNo_YYYYMMDD names, editable before confirming.
- Export always visible, every section pre-selected.
- Unnamed sections flagged and renamed inline.
Why this, not thatI put the vendor name first in every generated name. Finance teams file by client, then date — so vendor-first names sort exactly the way their folders already do.
Every source, every state
Documents arrive from email, cloud storage, accounting software and uploads — so the design covers loading, empty, syncing and every way a connection can fail.
Every choice, with its reason
Each major interaction decision, the alternative considered, and why this one won.
Multi-select model
What I chose
Rubber-band drag plus a per-thumbnail checkbox. Shift+click for ranges; Cmd/Ctrl+A for all.
Why
Rubber-band mirrors Figma and modern canvas tools; the checkbox makes selection discoverable for less technical users. Both reach the same state, so nobody is left behind.
Floating action bar
What I chose
A bar anchored to the bottom of the viewport, with a count and split, merge, copy, move and delete. Esc dismisses it.
Why
It appears near the content, which cuts eye travel compared with a top toolbar, and its fixed position builds muscle memory.
Drag and drop feedback
What I chose
A ghost stack of up to three thumbnails with a “+N” badge, a teal insertion line between valid positions, and a snap on drop.
Why
A single ghost is ambiguous when many pages move. The stack and count confirm what’s moving; the line shows where it lands before release.
Auto-naming on split
What I chose
A pre-confirm modal with the OCR-suggested name from page 1, edited inline or accepted. Confirmed names are remembered in the session.
Why
Every competitor forces renaming after the split. Naming before turns 40 rename tasks into 40 quick confirmations — an estimated 45+ minutes saved a day.
Thumbnail size and hover
What I chose
130px thumbnails in a three-column grid, with a 2× zoom on hover showing page number, section label and checkbox.
Why
Below about 120px, invoice headers and tables become unreadable. 130px is the balance between density and legibility.
Keyboard shortcuts
What I chose
Arrows to move, Space to select, Shift+arrow for ranges, Cmd/Ctrl+A for all, Delete, Esc, and Tab between zones.
Why
Power users process 100+ operations a day. A full keyboard path is faster for them — and it makes the tool accessible to people with motor impairments.
Proven patterns, borrowed on purpose
| Source | Pattern | Why |
|---|---|---|
| Figma | Rubber-band canvas select | Best-in-class for selecting many objects without losing spatial context — the muscle memory transfers immediately. |
| Linear | Viewport-anchored floating action bar | Appears near the content being acted on and only when there’s a selection, so there’s no mode confusion. |
| Notion / Airtable | Selection count badge + bulk bar | People need to see how many items are selected before committing a bulk action. |
| PDF Expert | Side-by-side drag to merge | Dragging between sections is faster and clearer than the dialog-based merge in other tools. |
| Airtable | Checkbox revealed on hover | Always-visible checkboxes add noise to a dense grid; hover keeps it clean and still discoverable. |
Six rules behind every screen
Bulk-first, not page-first
The common action is acting on 10–80 pages at once. Every decision is tested against bulk use first.
Reveal progressively
Open and preview are always visible; advanced actions appear when a selection or intent calls for them.
Confirm before committing
Large or destructive actions show a preview before they run — and undo is always one step away.
Respect the mental model
Finance teams think in bundles and chapters. The UI speaks in sections, and folders follow client, then month.
Performance is a feature
Virtualised rendering, lazy-loaded thumbnails and optimistic updates are requirements, not stretch goals.
Two skill floors, one system
A new associate finishes the workflow with visible controls; an expert finishes it from the keyboard.
Their brand, my system
The module follows Staple’s brand guidelines from the brief.
- Colour
- Primary #08272E · secondary #1C515E · dark teal #003B4A · accent #CDF1FF · surface #EDF7FA — with amber and red kept for warnings and errors.
- Typography
- Noto Sans for every level — headings, sub-headings, body and labels like “PAGE 1 OF 12 · INVOICE”.
- Icons
- The shadcn/ui icon set, matched by meaning first, then by look.
- Components
- Document cards, thumbnail rail, section panel, floating action bar, pre-confirm modals, banners and toasts.
Try it yourself
The clickable Figma prototype of the main module — from the folder browser to export.
From one module to the whole lifecycle
The editor solves split, merge and export. The roadmap closes the rest of the document journey — from capture to signature to archive.
Inline text editing
Click any text block to correct vendor names, amounts or dates — powered by OCR and a text layer.
Annotation & markup
Highlights, notes and drawings, tracked per user and non-destructive — for approval workflows.
Image replacement
Drop a new logo, stamp or signature onto an old one and it snaps into the same box.
PDF form builder
Add fillable fields to any PDF and save templates for recurring forms.
Redaction
Permanently black out bank, ID and personal details before sharing — with sensitive fields flagged automatically.
Page numbers & headers
Numbering, headers, watermarks and stamps that renumber themselves after split and merge.
E-signature
Draw, type or upload a signature — compliant with eIDAS, the ESIGN Act and India’s IT Act 2000.
Send for signature
Request signatures from vendors without accounts, track status, and remind automatically.
Approval chains
Sequential or parallel routes with conditions and automatic escalation.
Signature templates & DSC
Reusable signing set-ups, plus Digital Signature Certificates for GST and government filings.
Real-time co-editing
Live cursors, presence and comments per page — no more “v2_final_FINAL.pdf”.
Roles, audit vault & automation
Role-based access, an immutable audit trail, and document-event automations like “approved → push to QuickBooks”.
Where AI takes it next
AI already suggests splits and names. Next, it can understand what’s inside every document.
AI data extraction
Pull vendor, invoice number, line items, tax and due dates into editable fields — and export to QuickBooks, Xero or a spreadsheet.
Semantic search
“Invoices from vendors in Dubai over ₹2L in Q1” — search by meaning across 1,000+ documents, not just file names.
Anomaly & fraud detection
Flag duplicate invoices, PO and invoice mismatches and unusual vendor patterns with a quiet risk badge.
Ask AI about a document
A chat panel beside any document: “What’s the payment due date?” “Summarise this contract in three sentences.”
Auto-classification & routing
Identify each upload as an invoice, PO, contract or delivery note, tag it, file it and route it for approval.
Mobile capture
Photograph a paper invoice; AI straightens it, cleans it up and turns it into a searchable PDF in the right folder.
What I’m confident about — and what I’d test
The real problem was bigger
The brief asked for split and merge. The research showed teams lose their mornings to organisational work the product should do for them.
Every decision has a reason
Each threshold, naming rule, drag behaviour and shortcut traces back to how finance teams actually work.
What I’d test next
Usability sessions with 3–5 finance operations leads on real bundles — to validate the floating-bar threshold, OCR naming acceptance and the confidence indicator.
The roadmap completes the journey
Future scope isn’t a wishlist — it’s the rest of the same journey, from arrival to signed, archived and audit-ready.
See it live
Explore Staple AI — Document Editor for yourself.
Click through the full module in Figma — from the folder browser to export.
Less sorting, more processing.
Mornings back for finance teams.
The Document Editor turns the most tedious part of document processing — finding where one invoice ends and the next begins — into a few confirmations. Explore the prototype above, or ask me for a walkthrough.