Kodo: making complex money movement feel clear.
Across 21 months at Kodo, I led design work on the public website, Corporate Cards, and a new procure-to-pay workspace—connecting dense financial workflows through a consistent design language.
Role
Lead Product Designer
One platform. Three connected surfaces.
Kodo brings procurement, accounts payable, payments, corporate cards, and reimbursements into one spend platform. The work stretched from explaining that platform to prospective customers to helping teams move requests and money through it with confidence.
My remit crossed marketing, product, and systems work. I designed and built the new website in Framer, worked on the Corporate Cards platform, and led design for the first release of Kodo's new procure-to-pay workspace. Product and engineering partners helped turn evolving requirements into a working product.
Explain a broad platform without losing the thread.
The public site needed to make a complex spend platform understandable to buyers with different levels of financial and operational maturity.
The problem
Accounts payable, vendor payments, corporate cards, reimbursements, and workflows solve related problems, but a simple list of features does not explain how they work together.
My responsibility
I designed the site in Figma and built it in Framer, carrying the structure, visual language, and motion through to the live experience.
Design approach
The story starts with the outcome for the buyer, then opens into product pillars, customer segments, workflows, integrations, and collaboration. This gives visitors a way into the platform before asking them to parse individual features.
What shipped
A live marketing site at kodo.com, designed in Figma and built in Framer with custom interactive components.
Key decisions
- 01Organize the platform around clear product pillars instead of one dense feature inventory.
- 02Give startup, mid-market, and enterprise buyers distinct entry points.
- 03Use workflow and integration examples to make the depth of the platform tangible.
Make control feel usable in everyday spending.
Corporate Cards sits between the person making a purchase and the finance team responsible for policy, visibility, and reconciliation.
The problem
Employees need a straightforward way to spend, while finance teams need limits, visibility into activity, and reporting they can trust. The product has to hold both needs at once.
My responsibility
I worked on the Corporate Cards platform as part of Kodo's broader product design remit. Original screens and the exact evolution of this work will be added when the design files are available.
Design approach
The chapter is organized around the documented product capabilities: card controls, real-time spend tracking, and reporting. It gives the design work context without treating a public marketing illustration as an original product screen.
Work status
Work on Kodo's Corporate Cards experience. The original files will identify which changes shipped and document any measured outcomes.
Questions for the design files
- 01How did the work explain limits and restrictions where they were set?
- 02Which card activity views helped finance teams monitor spend?
- 03How did daily card use connect to reporting and reconciliation?
Design file placeholder
Corporate Cards overview
Original screens and process artifacts will be added here.
Design file placeholder
Controls and card activity
Original screens and process artifacts will be added here.
A mobile prototype across cards and procure-to-pay.
This Mobile UPI App prototype connects the Corporate Cards and procure-to-pay sides of the work. Deepti demonstrated it at NPCI.
Open the prototype in FigmaViewing may require a Figma account or file access. Use the link above if the embed does not load.
Give every handoff a place in the flow.
Kodo's new procure-to-pay workspace brought requests, approvals, purchasing, invoices, and payments into a connected enterprise flow.
The problem
A finance workflow needs to make the next action clear without losing policy, approval history, or the context attached to a request. Those constraints become harder as teams and approval levels grow.
My responsibility
I led product design from early discovery through the first enterprise rollout, working closely with product and engineering partners as requirements and edge cases evolved.
Design approach
The work centered on making the states and handoffs in a procure-to-pay journey understandable. Configurable forms, maker-checker approvals, and integrations had to read as one coherent workspace rather than unrelated screens.
What shipped
The first version of Kodo's new procure-to-pay workspace launched with enterprise customers. Original screens and verified outcome measures will be added alongside the design files.
Questions for the design files
- 01How were the current state and next owner shown in a multi-step process?
- 02Where did approval rules and nested levels become visible to users?
- 03What context carried across request, order, invoice, and payment?
Design file placeholder
End-to-end workflow
Original screens and process artifacts will be added here.
Design file placeholder
Request and approval detail
Original screens and process artifacts will be added here.
Design file placeholder
System patterns and edge cases
Original screens and process artifacts will be added here.
The Vendor Portal, inside procure-to-pay.
This Vendor Portal prototype is part of Kodo's procure-to-pay platform. It is an original design artifact from the P2P work.
Open the prototype in FigmaViewing may require a Figma account or file access. Use the link above if the embed does not load.
A design system for the spaces between.
Across the work, I built a shared component library and a consistent visual language for web and app experiences. The Kodo system included native light and dark patterns, with Tamagui and Material Design 3 explorations. It helped complex forms and workflows stay coherent as the platform expanded.
Design system library
Original components and patterns will be added with the design files.
People I worked with
Gaurav Thapa and Tumul Roy were direct partners in this work. Their recommendations speak to the close collaboration behind the product and system decisions.
“iterate quickly without becoming superficial”
“We partnered day-to-day from early discovery through enterprise rollout”
What shipped, and what stayed with me.
Work and releases
- Kodo's public website, designed in Figma and built in Framer.
- Corporate Cards product design work; original artifacts are pending.
- The first release of the new procure-to-pay workspace with enterprise customers.
- A shared design system across the web and product work.
Lessons learned
- In financial products, clarity is part of control: people need to understand the state of work before they can trust the next step.
- A system earns its value when it makes repeated decisions easier across very different surfaces.
- Close collaboration with product and engineering mattered most when requirements were changing and edge cases were still emerging.
This account focuses on the work I contributed to. Kodo's company-wide customer and transaction figures are separate from the outcomes of these projects.