Customer onboarding
Inconsistent agency screens, unclear errors and a verification step where users dropped off. Support tickets were high from day one.
Designing two AI FinTech products from scratch, as the sole designer — OCTA & OCTA Flow case study
OCTA helps SMEs across the UAE and GCC get paid faster, with AI-powered invoicing, collections and bank reconciliation. OCTA Flow is a separate operating system for accounting firms. I designed both, from blank canvas to live enterprise clients, in 18 months.
- OCTAAR / AP platform
- OCTA FlowAccounting firm OS
2Products designed from scratch
18 moBlank canvas to live clients
2h → 30mEnterprise reconciliation time
15%Faster product delivery
~60% → ~90%Bank reconciliation accuracy
5,000+Design system components
The problem OCTA set out to solve
What OCTA is
OCTA is a B2B FinTech SaaS that automates accounts receivable and payable for SMEs across the UAE and GCC. Finance teams use it to create compliant invoices, chase payments through an AI collections agent, and reconcile bank statements against invoices — all in one platform.
Who uses it
Finance teams, CFOs and accountants at SMEs and enterprises. Before OCTA, most of them ran collections across 3–5 disconnected tools: Excel for tracking, WhatsApp for follow-ups, email for invoices and a separate system for reconciliation. Every step was manual, and most overdue payments came down to a phone call.
What I walked into
An agency had designed the early screens. A few modules were live, but critical flows were broken, many didn’t exist at all, and the product had no design system.
Invoice management
The invoice list had no filtering, no bulk actions and no visibility into overdue invoices. Users couldn’t make sense of what they were owed.
Invoice creation
The entire flow existed only as a written requirements document. Nothing in Figma.
Bank reconciliation
One of the most complex modules, with no designs at all — just requirements and a verbal brief from the founders.
AI collections agent
AI-driven follow-ups across WhatsApp, phone and email had never been designed. It became the product’s flagship differentiator.
E-invoicing (FTA / ZATCA)
Regulatory e-invoicing needed a dedicated flow that was legally accurate and still usable by non-accountants.
My 18 months
- Weeks 1–2
Full design audit
Reviewed every existing screen and built a prioritised list of broken flows, missing states and UX gaps. Shared it with the founders, the PM and engineering before opening Figma.
- Months 1–2
Fixed the foundations
Redesigned onboarding, fixed the invoice list and standardised components. Errors and support complaints dropped within weeks of release.
- Months 3–6
Built the missing core modules
Invoice creation, customer management, the reminders workflow and approvals.
- Months 7–12
AI features, invoice financing and reports
Bank reconciliation, the AI collections agent, e-invoicing, invoice financing, the communication hub and reports — while growing the design system alongside.
- Months 12–18
OCTA Flow, built from zero
A second, separate product for accounting firms, with its own modules, identity and workflows.
Research, built into the work
I had no research team, so research was built into the work: talking to customers, watching them use the product and testing designs before they were built.
Methods
- Customer interviews with SME finance teams
- Usability testing on live and prototype flows
- Workshops with founders and business owners
- Support ticket analysis
- Prototypes built with Claude, Cursor and v0 to test ideas before engineering time was spent
Key insights
Trust beats automation
Finance users didn’t want AI to be perfect. They wanted to see why it made a decision and fix it fast when it was wrong.
Relationships come first
In the region, a payment reminder that sounds professional in one market can feel cold or rude in another. Tone and channel matter as much as timing.
WhatsApp is a business channel
Many customers responded faster on WhatsApp than on email, so it had to be a first-class channel, not an add-on.
Compliance has to feel invisible
Users needed e-invoicing to be correct without having to understand the regulations behind it.
Sole designer. Complete ownership.
“I was the only designer across both products for the full 18 months — from auditing broken agency work to shipping AI-powered features for two separate products at the same time.”
- Product definition and feature scoping with the founders and PM
- Customer interviews and usability testing
- Design workshops with stakeholders and business owners
- Information architecture, wireframes, prototypes and high-fidelity UI
- The 0→1 design system, shared across both products
- Engineering handoff, QA review and live feedback loops
- Presenting design rationale directly to founders and enterprise clients
- Stage
- Pre-seed → Post-seed
- Funding
- $5.6M (MEVP, Wa’ed Ventures, Plug and Play) + $20M credit facility
- Users
- Finance teams · CFOs · Accountants
- Market
- UAE & GCC
- Team
- 2 founders · 1 PM · 10+ engineers · 1 designer
- Tools
- Figma · FigJam · Notion · Claude · Cursor · v0
Every screen. Every state. All shipped.
10 modules across the OCTA AR/AP platform — some inherited and fixed, most built from zero.
Dashboard
DSO, aging, cash flow and AI activity in one view for CFOs and finance teams.
Invoice management & creation
Templates, line items, VAT, live PDF preview and sending, with compliant e-invoicing built in.
Customer management
Customer profiles with TRN, credit limits, workflows, late fees and account owners.
Reminders & workflow automation
Rule-based reminder sequences across email, WhatsApp and calls, with editable templates.
AI collections agent
Follows up on overdue invoices through each customer’s preferred channel, with no manual effort.
Bank reconciliation (AI)
Matches bank transactions to invoices with confidence scores and clear reasoning.
Invoice financing
Lets businesses turn eligible unpaid invoices into early cash through partner financiers.
Communication hub
Every email, WhatsApp message and call log for each customer in one place.
Reports
Aging, collection performance and AI agent reports, exportable for stakeholders.
Documents (OCR)
Uploads invoices and statements and extracts the data automatically.
Bank reconciliation — making AI explainable
Reconciliation was the most painful daily task for finance teams: manually matching bank statement lines to invoices, hunting down mismatches and explaining gaps to management. It took hours, and one missed match could throw off a whole month.
The hardest design problem wasn’t the matching itself. It was trust. An AI that matches transactions silently is a black box, and finance teams won’t sign off on numbers they can’t explain.
The key insight from testing: users didn’t need the AI to be perfect. They needed to understand why it made each match, and to have a fast, clear way to correct it when it was wrong.
The problem
- Teams matched hundreds of transactions by hand — slow, error-prone and invisible to management.
- Existing tools were either fully automatic (risky) or fully manual (pointless). There was no middle ground.
- Split payments, overpayments and underpayments broke simple one-to-one matching.
What I designed
- Confidence-scored matching: full matches, partial matches that need review and unmatched items for manual work — so users know exactly where to look.
- Inline reasoning on every AI match (for example, matched by invoice number, amount and date), plus a one-click approve or unmatch, with every change logged for audit.
- A dedicated resolution path for partial matches that shows the missing amount and helps users find the rest.
Why this, not thatI rejected full auto-reconciliation. Speed means nothing in finance if the team can’t defend the numbers, so the AI suggests and the human approves.
ResultEnterprise reconciliation time dropped from 2 hours to 30 minutes, and matching accuracy rose from ~60% to ~90%.
AI collections — designing trust in automation
The collections agent contacts overdue customers through their preferred channel — WhatsApp, phone or email — with no human involvement. In this market, business relationships are personal, so handing customer conversations to an AI needed careful trust-building design.
Finance teams were nervous about letting AI message customers they had known for years. One badly timed or badly worded reminder could damage a relationship worth far more than the invoice.
So the design question wasn’t “how do we automate collections?” It was “how do we let teams hand over control at their own pace?”
The problem
- Teams feared AI sending messages to customers without review, because relationship risk is real.
- WhatsApp, phone and email had no unified setup or status visibility.
- Teams had no way to see what the agent was doing in real time.
What I designed
- A “preview before send” mode for first-time users, who see exactly what will go out, can edit it, and then switch on full automation when they trust it.
- Channel preference per customer: WhatsApp for some, email for others, based on how each customer actually communicates.
- A real-time activity feed showing every message, call and reply, so teams stay informed without lifting a finger.
Why this, not thatI didn’t launch with full automation by default. Gradual trust beat instant automation, because teams that feel in control keep the feature switched on.
Invoice creation — from a Notion doc to a live feature
When I joined, invoice creation had zero designs — just a requirements document and a product conversation.
The challenge was designing one flow that works for first-time SME owners and experienced accountants alike, and that meets two different e-invoicing compliance frameworks (FTA and ZATCA) in the same interface without overwhelming anyone.
The problem
- No design existed, only a written spec.
- Two compliance frameworks needed different required fields, and both had to be legally accurate.
- New users and experienced accountants needed very different levels of guidance.
What I designed
- A template gallery for new users and an advanced blank mode for experienced accountants — two entry points into one flow.
- A live PDF preview that updates as you type, so users see the final invoice before they send it.
- Compliance fields that appear only when they’re relevant, with required e-invoicing fields pre-filled from the invoice and clear transmission statuses (sent, accepted, failed).
Why this, not thatI didn’t put every compliance field on one long form. Showing fields only when relevant kept the form short for most users while staying compliant.
Platform screenshots
A second product. Built from zero.
While OCTA served SME finance teams, accounting firms needed something different: an operating system for how they actually work — managing clients, tracking time, handling tasks and balancing team capacity. OCTA Flow is a standalone product with its own modules, identity and workflows, built by the same single designer.
OCTA Flow · separate product
The OS for accounting firms
Dashboard
Active customers, tasks in progress, deadlines and team workload at a glance.
Lead management
Tracks prospects from first contact to signed client.
Customer management
Every client, contact and engagement in one place.
Time management
Built-in timers and manual time entries tied to clients and tasks.
Task management (Kanban + AI)
Kanban boards with AI assistance, using a credits model (10 free per month, more available to buy).
Capacity management
Working schedules, weekly capacity and time off, so managers can spot overload early.
Team management
Roles, permissions and workload rebalancing across the team.
Settings
Firm-level configuration and AI credit management.
What made this hard
Defining before designing
Many modules arrived as verbal briefs or Notion notes. Before designing, I ran definition sessions to clarify the problem, the users and the edge cases. Design became part of product discovery.
Stakeholder alignment at speed
Design workshops, alignment with the founders and PM, and customer reviews, all running alongside delivery. I kept a single source of truth in Figma, so decisions didn’t get lost.
Regional compliance and cultural context
FTA and ZATCA e-invoicing, TRN handling, Arabic name conventions and culturally appropriate tone for the AI collections agent all required research that wasn’t available off the shelf.
Two products, one designer
OCTA and OCTA Flow had different users, modules and design needs. A shared design system let me switch between products without losing consistency or speed.
Making AI trustworthy in B2B finance
Enterprise finance users don’t trust silent automation. Every AI feature was designed around confidence levels, visible reasoning and a manual override that lets humans decide.
Engineering collaboration across two teams
Two engineering teams building two products in parallel. I used clear specs, Dev Mode handoff and live review cycles to keep both moving without rework.
One system. Two products. 5,000+ components.
Designing two products in parallel as one designer is only possible with a rigorous system. Built from the foundations up, it scaled across OCTA and OCTA Flow and became the source engineering built from directly — speeding up delivery by 15%.
5,000+Figma components
40+Semantic colour tokens
2Products running on one system
15%Faster product delivery
- Colour
- Primary orange #F5620F, with semantic tokens for success, warning, error and info states.
- Typography
- A clear type scale for display, headings, body and data-heavy tables.
- Grid & spacing
- Consistent spacing tokens and layouts built for dense financial tables.
- Accessibility
- WCAG-aware contrast, visible states beyond colour alone (icons and labels for matched, review and failed), and keyboard-friendly forms.
Design decisions, measurable outcomes
2h30m (from 2h to 30m)
Enterprise reconciliation time after redesigning the AI-powered workflow.
Source: client reconciliation workflows+15%
Faster product delivery, with engineering building straight from the 0→1 design system.
Source: delivery trackingHighNear zero (from High to Near zero)
Customer UX complaints after redesigning the broken agency flows in the first months.
Source: support ticketsManualAutomated (from Manual to Automated)
Collections follow-ups, now handled by the AI agent across WhatsApp, phone and email.
Source: product usage~60%~90% (from ~60% to ~90%)
Bank reconciliation accuracy with AI matching and OCR, versus the manual process.
Source: reconciliation results~60%~20% (from ~60% to ~20%)
Platform-wide error rate after redesigning onboarding, invoice flows and inline validation.
Source: error trackingWhat 18 months as sole designer taught me
Define before you design
Half my time was spent in product conversations, not Figma. The most useful question was “for whom, in what context, with what constraints?”
Fix the foundation before building new floors
The pressure was to ship new features. Fixing what was broken first earned the trust that gave me more say over what came next.
Design systems are your force multiplier
Building 15+ modules alone only works when every component is built once and reused everywhere.
AI in B2B finance has to earn trust first
Show why the AI made a decision, let people override it, and log everything. That’s how adoption follows.
Context changes everything
Tone, channel and timing that feel professional in one market can feel cold in another. Design for the users you actually have.
Being the sole designer means being the voice in every room
Without a design team, every decision needed a clear “why” — and writing that down made my arguments stronger.
See it live
Explore OCTA & OCTA Flow for yourself.
OCTA has evolved since my time — today it presents itself as an AI workforce for accounting firms, so what you see there will differ from this case study. The design files are under NDA; I’m happy to walk you through them on a call.
This is version one.
The product lives on.
OCTA has kept evolving since I left, and today it presents itself as an AI workforce for accounting firms. This case study covers the 18 months I spent building its first two products — 15+ modules and 500+ screens — as the only designer in the room.