CodiFi’s Webflow website. Seven products, 3.7M orders a day.

CodiFi builds the infrastructure layer under Indian broking. Trading middleware, an options platform, eKYC, a partner portal, back office, research tools, trading apps. Thirty-five broker integrations. Trade execution under thirty milliseconds. Thirty-seven lakh orders placed on a normal day.

You have almost certainly used it. You have definitely never seen it.

That is the problem we were hired to solve.

The brief

Sell a layer nobody can see.

Most software sells itself by showing you the screen. CodiFi cannot. Their products sit behind the broker’s app, underneath the trading terminal, inside the onboarding flow. The end user never meets CodiFi. The buyer does, and the buyer is not one person.

A backend lead wants to know what the API boundary covers and what happens when a broker adapter fails. A frontend lead wants to know whether the order book streams. An operations head wants to know where reconciliation mismatches surface. A compliance officer wants to know what the audit trail retains. Four people, four questions, one page.

Then the second problem. CodiFi ships seven products. Put seven technical products on one website without a structure and they read as seven companies sharing a logo. Buyers pick one, miss the rest, and the compounding argument, that these things are stronger together, never gets made.

The product had depth already. The job was to make that depth enterable in under a minute, and still hold up for the specialist who wants to read for twenty.

The approach

Name the buyer on the page.

Every capability block on the site says who it is for, in plain text, on the page.

Who it is for: Platform and backend teams building broker integrations and trading workflows. Who it is for: Ops, infra, and platform teams responsible for reliability and day-to-day control. Who it is for: Product and frontend teams building trading screens that need speed and continuity.

It looks almost too simple. It is the highest-leverage line on the site. In a category with four buyers and no shared vocabulary, telling a reader which parts are theirs is worth more than any amount of explanatory copy. They stop scanning and start reading.

The pages are then organised around the outcome instead of the object. A broker does not wake up wanting middleware. They wake up wanting orders to clear, clients to onboard, and compliance to hold. So the middleware page opens on “one API boundary for everything pre-trade” rather than a feature list. The back office page opens on where broker operations actually break, at the handoff points between disconnected systems, before it names a single module.

The design system

Version the products, do not list them.

The seven products are numbered on the site. 1.0 Trading Middleware. 2.0 Snapalpha. 3.0 Partner Portal. 4.0 eKYC. 5.0 Back Office.

That is a small device carrying a large argument. A numbered stack reads as layers of one system. A list of names reads as a catalogue. Every product page carries the full numbered set in its footer, so wherever a buyer lands, they can see the shape of the whole thing and where they are inside it.

The technical depth sits behind progressive disclosure rather than in front of it. The middleware page groups everything into six module families: Platform and Infrastructure, Core Trading, Secure Access, Market Intelligence, Trading Tools, Enhancers. Open Core Trading and you get the actual trade lifecycle, place, modify, cancel, order book, trade book, positions, holdings, limits. Open Secure Access and you get password plus OTP, TOTP, biometric, QR, SSO, guest, all on JWT sessions. A CTO can go three levels deep. A founder can stay at the top and still understand the shape.

Proof before persuasion

Capital markets buyers do not respond to adjectives. They respond to numbers and to names they recognise.

So the homepage puts the numbers above the fold: 99.9% platform uptime, execution under 30ms, 10M+ trades processed, 35+ broker integrations. The middleware page carries the ones that actually decide a procurement conversation: it absorbs 80% or more of OMS and RMS load, 50% faster processing, 23% higher user capacity.

Then it puts the customers on the page, by name and title. Sidhavelayutham M at AliceBlue. Devanshu Motikhaye at Aditya Birla Capital. Vishwanath Raman at Chola Securities. Abhishek Mane at Jainam Broking. Yuvaraj Singaravel at GoPocket. Maha Iyer at Pricetime. In Indian broking, those six names settle the reliability question faster than any uptime chart.

The visual language stays deliberately quiet. Dark, dense, technical, close to the terminals these buyers already live in. When the product is the proof, decoration reads as doubt.

The build

Built in Webflow so CodiFi can keep shipping.

CodiFi has launched a product a year since 2021. A website that needs a designer every time a product ships is a website that is out of date by the second quarter.

We built the page patterns as a system: product hero with the version number, capability grid, a block naming who it is for, numbered how-it-works sequence, proof band, testimonial rail, FAQ, cross-navigation to the rest of the stack. Five product pages are live in that system today. Trading Apps and Research Portal drop into the same patterns without a new project, which is the actual deliverable. Not eight pages. A system that makes the ninth page cheap.

The FAQ blocks on every product page were built as structured, crawlable content rather than decoration, so the site answers the questions a buyer types into a search engine, in the words they type them.

The result

Seven products that finally sound like one company.

The site now explains the infrastructure layer, numbers the products inside it, names the buyer for each capability, and gives every product a page a specialist can go deep on without the homepage carrying all of it.

Raghu Ram Rajamani and the CodiFi team engaged with the structure, not just the surface. They pushed back on how the module groups were organised and on how much technical depth belonged on the first screen, and the site is sharper for it. That is worth saying plainly, because most feedback rounds are about colour, and this one was about architecture.

Common questions

What does CodiFi do?

CodiFi builds cloud-native infrastructure for Indian capital markets. Its products cover trading middleware, the Snapalpha options platform, eKYC onboarding, a partner portal, back office, trading apps, and research tools, running across thirty-five broker integrations.

What did Rango do for CodiFi?

Rango designed and built CodiFi’s website in Webflow. That covered positioning the category, structuring seven products into one numbered stack, writing and designing the product pages, and building a reusable page system the CodiFi team can extend as new products launch.

Why is a capital markets infrastructure website hard to design?

The product is invisible to the end user and the purchase involves four different technical buyers, backend, frontend, operations and compliance, each with a different question. The site has to teach a category that has no common vocabulary while staying fast for a specialist who already knows it.

How is the CodiFi website structured?

One page per product, numbered 1.0 through 5.0 as layers of a single stack rather than a catalogue. Each capability block names the team it is for. Proof sits early: uptime, execution speed, order volume, broker integrations, and six named broker customers.

Was the CodiFi website built in Webflow?

Yes. Webflow was chosen so CodiFi can add product pages inside the existing system without a redesign. Two of the seven products do not have pages yet and will use the same patterns.

Who uses CodiFi?

Indian brokers and asset managers, including AliceBlue, GoPocket, Aditya Birla Capital, Chola Securities, Jainam Broking, and Pricetime.