Manoj Shakar
  • Home
  • About
  • Craft
Spendflo / Platform Redesign / AI Integration

SaaS tool to AI-native procurement platform.

Spendflo was losing deals to Coupa and Zip, and churning customers who needed more than spend tracking. This is how we repositioned the product - and what I learned designing the platform that followed.

Timeline
5 months
Role
Lead Product Designer
Effort saved
↓ 40%
Adoption
↑ 35%
AI trust
4.3 / 5
Full platform dashboard - the redesigned Spendflo interface

The redesigned Spendflo - intake-to-procure and procure-to-pay in one unified AI-native interface.


01  ·  Context

The product worked. The business was at risk.

We were losing deals to Coupa and Zip. Customers were churning to tools that owned more of their workflow. A large enterprise deal had procurement features as a hard requirement to close. The platform shift wasn't a product bet - it was a survival move.

The moment that changed the direction

"Research showed procurement leads didn't care about spend visibility at all. They cared about getting purchases approved and vendors onboarded without the back-and-forth. That finding killed the original roadmap and reframed what the product needed to be."

This came out of 8 interviews with procurement leads across existing and prospective accounts. The insight went directly to the founding team and became the basis for the new platform strategy.

Before
Old Spendflo UI - passive data views
Passive data views. No workflow. Procurement decisions happened outside the product - in email, Slack, and spreadsheets.
After
New Spendflo platform - end-to-end procurement workflow
End-to-end procurement workflow. Request, approve, contract, pay, renew - all in one place.
📉
Losing deals to Coupa and Zip

Enterprise prospects needed full procurement coverage. Spendflo's SaaS tracking scope wasn't enough to get past procurement evaluation. Deals were being lost at the shortlist stage.

🔁
Customers churning for fuller tools

Teams outgrew Spendflo as their procurement complexity grew. They needed a tool that could run the full workflow - not just track spend after the fact.

🤝
A deal that required procurement features to close

One large enterprise account had intake-to-procure as a hard requirement. It set the timeline - and gave us a real customer to design against from day one.


02  ·  Research

Six tools. One shared gap.

Evaluated the market to find what was worth borrowing and where every tool broke down. The shared gaps became the design brief.

Zip
End-to-end procurement
Intake UX Approval routing No AI layer No contract intelligence

Covers the full procurement loop well. Weak on AI-driven decisions and contract management depth.

Airbase
Spend management
Audit trail Policy guardrails Finance-first IA

Finance trusts it. Too rigid for procurement leads who need flexibility.

Coupa
Enterprise procurement
Full lifecycle Months to implement Form-heavy

Right scope, wrong weight class for mid-market teams.

Procurify
Mid-market procurement
Budget visibility No AI layer Fully reactive

Well designed but passive by design. No proactive intelligence anywhere.

Ironclad
Contract lifecycle
Contract timeline UI Legal-only silo

Best-in-class for legal. Disconnected from procurement entirely.

Vendr
SaaS buying
Renewal framing Benchmark pricing Human-dependent

Great recommendations. Service model - not scalable, not self-serve.

1
Nobody owned the full loop

Every tool owned one slice. None connected intake to contracts to renewals. Teams stitched 3–4 tools and lost context at every handoff.

2
AI was the missing layer everywhere

Benchmarking, routing, renewal timing - all data problems every tool handled manually. AI wasn't a feature. It was the unlock.

3
Research killed the original roadmap

The plan was to deepen spend visibility. Research showed that was the wrong problem entirely. Procurement leads needed workflow, not dashboards. That finding went to the founding team and became the new product strategy.

Who we designed for
👩‍💼
Procurement Lead
Primary user
Goal
Right vendor, right price, least back-and-forth.
Frustration
Chasing approvals on Slack. Renewal deadlines with no notice.
Needed from us
One place for the full cycle. AI that does prep, not decisions.
👨‍💻
Finance Manager
Approver + budget owner
Goal
Control spend without being a bottleneck. No surprises.
Frustration
Approval requests with no context. Bills that don't match contracts.
Needed from us
Full context on every approval. Bills reconciled automatically.
🧑‍🤝‍🧑
Business Requester
Occasional user
Goal
Get what the team needs, fast, without a procurement course.
Frustration
Requests disappearing with no update. Not knowing what to fill in.
Needed from us
Guided intake. Live status so they're never left wondering.
Who does what
Step Procurement Lead Finance Manager Business Requester
New requestReviews and routesNotified if above threshold✦Raises + tracks status
Approval✦First-level approver✦Final approver, high-valueNotified on decision
Vendor selection✦Shortlists, uses Flo AIReviews cost benchmarksProvides team context
Contract✦Uploads, owns contractReviews payment termsNo access
BillsFlags mismatches✦Approves paymentNo access
Renewals✦Reviews Flo AI rec, actsApproves or cancelsUsage feedback if asked

✦ Primary owner of this step


03  ·  Platform Design

Old IA: organised around data. New IA: organised around workflow.

Once research reframed the problem, I had to make the case for rebuilding the IA rather than patching it. Adding procurement features to the existing structure would have created the same disconnected experience we were trying to move away from.

Before Four disconnected data views
Spendflo Vendors Contracts Spend Renewals No connection between sections Decisions still happen outside the product
After Two connected workflows, AI across both
Flo AI - intelligence layer Intake to Procure (I2P) Procure to Pay (P2P) Request Raise+route Approve Review+sign Contract Create+store PO+Bills 3-way match Payment Approve+pay Renew AI-guided Renewal triggers a new request - the loop continues
Full procurement flow - modules covered below are highlighted
Request
Approval
PR created
Contract
Renewal
PO to vendor
Invoice / Bill
3-way match
Payment
I2P - Intake to Procure
P2P - Procure to Pay
Covered in separate case studies
I2P

Contracts - from black box to structured data.

⚡ Constraint: AI model capabilities were still being defined by engineering while we were designing the UI - so every AI-powered feature had to be designed with a non-AI fallback from day one.

Contracts lived in legal's Drive. Critical terms - notice periods, auto-renewals - never reached procurement until too late. The challenge: make contracts legible for non-lawyers without adding more manual work.

  • Upload PDF. Flo AI extracts key terms automatically.
  • Users verify and correct, not fill from scratch.
  • Each term links back to the source clause in the PDF.
Contract detail with AI-extracted key terms
What we tried
Manual metadata form on upload. Fill in the renewal date, value, notice period yourself.
Why it didn't work
Extra work on top of a document that already had the answers. Nobody filled it in consistently.
What we built
Upload the PDF. Flo AI extracts key terms. Users verify and correct - not fill from scratch. Contract becomes structured data the platform can act on.
Contract repository view
Repository
Status, owner, value, and days to renewal visible without opening anything.
AI-extracted contract key terms
AI key terms
Flo AI pulls the 6–8 terms that matter. Each links to the source clause in the PDF.
P2P

Bills - invoice, PO, contract in one view.

⚡ Engineering said no: The full 3-way match was too complex to ship in the timeline. I stripped the UI down to the three numbers that mattered - invoice, PO, contract - and proposed a phased approach. That simplified version shipped in 2 weeks. The full version followed a sprint later.

The invoice, PO, and contract governing it all lived in three separate tools. No one could see all three together to verify an invoice before paying it.

  • Invoice, PO, and contract amounts shown side by side.
  • Flo AI runs the 3-way match automatically on upload.
  • Discrepancies flagged with the specific mismatch highlighted.
  • Approve or dispute from the same screen.
Bills 3-way match view
What we tried
Standalone bills list - a table of invoices with status filters. Clean but disconnected from contracts and POs.
Why it didn't work
Finance still needed two other tools to reconcile. We moved the list, not the work. The problem was untouched.
What we built
Every bill shows invoice vs PO vs contract amounts side by side. Flo AI runs the 3-way match on upload. Approve or dispute from the same screen.
How the 3-way match works
Invoice
Amount billed by vendor
✕
Contract
Agreed price and terms
✕
PO
What was ordered
→
Match result
Approve or flag

Flo AI runs this on bill upload. Matches go to payment approval. Discrepancies surface the specific mismatch - amount, line item, or terms - so finance acts without investigating from scratch.

Bills dashboard
Bills dashboard
Sorted by status: matched, flagged, pending. Flo AI flags surface to the top.
3-way match detail view
3-way match view
Invoice, PO, and contract side by side. Discrepancy highlighted inline. Approve or dispute from the same screen.

04  ·  Flo AI

Procurement has real stakes. Flo AI had to earn trust, not assume it.

Procurement teams deal with six-figure contracts and budget accountability. AI that just gives answers without context gets ignored or overridden immediately. The design challenge was making AI feel like a trusted colleague, not a black box.

Flo AI in-context hero screen
Where it lives

Inline at the moment of decision. Not a sidebar. Not a chatbot page.

Flo AI surfaces inside the workflow at specific trigger points: when a renewal is coming up, when a bill is uploaded, when a vendor is being evaluated. Users don't go to Flo AI. Flo AI comes to them when it has something useful to say.

How it earns trust

Every recommendation shows a one-line rationale. Always. No black box.

Users can expand to see the full reasoning and the data source behind it. When the AI is uncertain, it says so, and the override path surfaces. When it's confident, the action is one click. The user is always in control, but the AI makes staying in control effortless.

Flo AI renewal recommendation
Renewal recommendation
Flo AI surfaces renew, renegotiate, or cancel with a one-line rationale and usage data. One-click action or full reasoning on demand.
Flo AI conversational intake
Conversational intake
For complex requests, Flo guides through a back-and-forth instead of a long form. Pre-fills known fields and asks only for what's missing.

05  ·  Design System

Token-first. AI-aware from day one.

No existing system. No AI component patterns to reference anywhere. Built in parallel with shipping - which forced every decision to be deliberate and reusable.

Spendflo design system component library
Token architecture in Figma
Token architecture
3-tier structure: primitives, semantic, and component tokens. No component ever references a raw hex value. Figma variables mirrored directly to CSS custom properties.
AI-native component patterns
AI-native component patterns
Recommendation card with rationale surface and confidence signal. Streaming states: loading, generating, complete. Trust badge, human override indicator, and contextual activation trigger.

06  ·  Impact

Measured across 12 accounts, 90 days post-launch.

↓
40%
Reduction in procurement effort. 3-hour tasks down to under 45 minutes.
↑
35%
Increase in weekly active usage among procurement leads vs pre-launch baseline.
↑
4.3
AI trust rating out of 5 from in-product surveys across 200+ decisions.
↓
3×
Faster time-to-approval after smart routing and consolidated context.

07  ·  Moments that shaped the product

Three times the work changed direction.

Design isn't just about screens. These are the moments where the thinking mattered more than the output.

Research killed the roadmap

The plan was to deepen spend visibility. Research said that was the wrong problem.

8 interviews with procurement leads showed they didn't care about dashboards - they needed to get purchases approved without chasing people on Slack. I brought that finding to the founding team with a reframed product brief. The original roadmap was shelved. The platform strategy came directly from this research.

Engineering said no. I redesigned around it.

The 3-way match was flagged as too complex to build in the timeline.

Instead of cutting the feature, I stripped the UI to its minimum viable form - three numbers side by side: invoice, PO, contract. That was something engineering could ship in 2 weeks. I documented the fuller version as a phase 2 spec. Both shipped. The constraint made the first version cleaner than the original design.

Pushed back on leading with AI

The initial direction was to lead with a conversational AI assistant as the primary interface.

Research showed procurement leads didn't trust AI recommendations without first seeing the workflow they were acting on. An AI that gave answers before users understood the context created friction, not speed. I proposed embedding Flo AI at specific decision points inside existing workflows rather than making it the front door. That framing changed the entire product architecture of Flo AI.


08  ·  Reflections

What I'd do differently.

1
Lock the IA before designing screens

A structural IA decision in week 6 caused rework on screens already in progress. IA alignment needs to be a gate, not an assumption made along the way.

2
The design system needed a dedicated owner

Building in parallel was right given the timeline. Without someone fully accountable it drifted in places. Even on small teams, the system needs dedicated review time.

3
AI trust needs longitudinal signal

You can't test trust in 45 minutes. The 4.3 rating came from 90 days post-launch. I'd push for a beta cohort earlier to start capturing that data before the launch scramble.

← All work Next case study →