Case study · Firefly Fire Pumps
Three and a half years at Firefly: the tool the sales team quotes from, and the website buyers use.
Role
UX Designer. One of two designers with Anchal Nagdev to Dec 2022, then the only designer.
Team
Atharva Ruikar (UX Designer, me) · Anchal Nagdev (UX Designer, to December 2022) · Rohit Mali (Director of Sales and Marketing) · MID (development partner)
Timeline
Jan 2021 to Jul 2024
Tools
Figma, FigJam, Photoshop, Miro, Google Sheets
Research
Workflow mapping and walkthroughs with Rohit and sales before each build. No analytics on the tool.
At a glance
The website · shipped
The sales tool · shipped, no data yet
2021
2022
2023
2024
Website · 2022 to Jul 2024
Sales tool · Jan 2021 to Dec 2022
Chapter 1 · The website · Shipped B2B · 2022–2024
Firefly listed 100+ fire pumps the way the factory builds them, not the way its six kinds of buyer choose them. Website enquiries now convert into about 15–17% of Firefly’s annual revenue. The structure and the three enquiry routes are still live on fireflypumps.com; a later vendor replaced the visual layer, so the screens on this page are the shipped 2023 designs, not today’s site.
Role
UX Designer, with Anchal Nagdev, then solo
Team
Two designers (Anchal Nagdev and me), then me alone from January 2023, external build team
Duration
2022 – Jul 2024
Tools
+5 morePlatform
Responsive web + mobile
01 · On the live site
Screen by screen
These are screens from fireflypumps.com as it runs today. Anchal and I designed the navigation, the product structure and the enquiry routes. The vendor has since reworked parts of the visual layer.
Information architecture
Products grouped the way buyers ask
The Products menu lists eight families: portable, vehicle-mounted, trailer, skid, power take-off, CAFS, nozzles and accessories. Vehicle-mounted opens a second level that splits normal pressure from multi-pressure, so a buyer reaches a model in two moves. On a phone the same tree becomes an accordion in the same order.
Enquiry routes
Separate forms for each kind of enquiry
Enquiry splits into Product, Dealership and Spares & Service. Each has its own form, so a buyer, a would-be dealer and a service customer each start from the page meant for them.
Multi-language
Nine language versions for export buyers
Select Language links to regional versions of the site in Spanish, Russian, Arabic, French, Portuguese, German, Polish, Indonesian and Turkish. It sits in the main navigation on every page.
Product pages
One template for every product page
Trailer, vehicle-mounted and power take-off pages share one layout: model tag, product name, rated duty points, a Connect with us button and a breadcrumb back to the category. On a phone the specs stay above the product photo.
Proof
Numbers and clients on the home page
The second screen of the home page shows 60 years, 20K pumps, made in India and 1K customers. Below it are a client wall of government and private organisations and a map of where Firefly pumps are in service.
Mobile
The rest of the site on a phone
Spares and service, forest wildland products and new launches keep the same header, floating contact buttons and red call to action as desktop.
02 · Context
A catalog that had outgrown its own structure
Firefly Fire Pumps has built fire-fighting pumps in Kolhapur since 1963 and is India’s largest maker of vehicle-mounted units, sold to state fire services, the armed forces, refineries and port trusts, and export distributors in 60+ countries.
Anchal and I owned product design end to end: research, IA, wireframes and hi-fi UI. From 2023 I carried launch and post-launch iteration alone.
This is spec-and-tender buying. Nobody adds a fire pump to a cart.
0-to-1
First structured catalog
8
Product families
100+
Individual products
50+
Pages designed
19 mo
Only designer, through launch
Where the pumps go: HQ and the 30 countries listed under Our Global Presence
Countries as listed on fireflypumps.com/locations-we-serve: 30 markets across Europe, the Gulf, Africa, South and South-East Asia, Australia and the Caribbean, plus the Kolhapur works.
03 · Problem
Two true structures, pulling in opposite directions
How the pumps are made
Mounting type → material → series
The structure the factory, the spares inventory and the service network genuinely run on. Break it and you break the business internally.
How buyers arrive
Situation → flow rate → pressure class
A forest fire on a slope. A refinery tender with a specified duty point. A truck chassis that needs a pump on its PTO.
Both are true. The manufacturing one shipped, and the buyer lost.
It also had to hold in ten language editions, one of them right-to-left. A hierarchy that only works in English is not a hierarchy.
Buyer
Arrives knowing
Needs next
Path
Fire brigades
The fire scenario and their vehicle fleet
Flow, pressure, suction, engine, compared side by side
scenario → compare
Procurement
A tender document with a specified duty point
Compliance papers and a formal enquiry route
spec → docs → enquiry
Distributors
A territory and a customer base
The full range, export terms, a dealership conversation
range → dealership
OEM / body builders
A chassis and a PTO takeoff
Mount specs, compatibility, PTO documentation
PTO → compatibility
Service & spares
A pump they already own
Parts, manuals, support, the most underserved path
model → spares
Forestry / wildland
Terrain, and what a crew can carry
Weight, priming, portability before anything else
portable → weight
Six buyers, six different first questions. Before the rebuild, all six were routed through one list and one generic enquiry form.
Why a flat list fails at this range
Eight models, a 36× span, and every one of them sat in the same flat list in the same order, separated by nothing but a model code.
Model designations as published on the live catalog.
MFP-275-P
275 LPM @ 4.2 BAR
MFP-1300-P
1300 LPM @ 7 BAR
MFT-1800-D
1800 LPM @ 7 BAR
MFV-LP-1020
2000 LPM @ 10 BAR
MFV-MP-1040
4000 LPM @ 10 BAR · 250 @ 40
MFT-8000-D
8000 LPM @ 10 BAR
MFV-LP-10000
10000 LPM @ 10 BAR
Rated duty points as published on each product page. Only models whose duty point was verified are shown.
04 · Research
Diagnose the structure before redesigning the surface
Four methods ran. Two changed the design; two confirmed or sized what those two found.
Changed the design
Card sort
Buyers grouped by situation, not by the way the pumps are built.
Stakeholder interviews
The people fielding inbound leads described the same failure, repeatedly.
Confirmed or sized it
Benchmarking
How peers handle comparison and distributor paths.
Usability testing
Five moderated rounds narrowed a long wishlist to three fixes.
What the interviews found
Enquiries arrived without a model number, because the enquirer never got far enough to find one. That reframed the problem from traffic to qualification, and it became the argument that won the enquiry split.
Card sort: what buyers grouped, and what they ignored
Reconstructed 2026
Cluster labels are the participants’ language, not the company’s. Participant count was not recorded in surviving documentation.
Stakeholder map
Reconstructed 2026
Six functions, one desk
Sales & Marketing
Primary counterpart, weekly
Technical / R&D
Owns spec accuracy and the series naming
Exports
Nine language markets, distributor path
Operations
Spares and service continuity
Finance
Scope and vendor cost
Managing Director
Approves; rarely in the detail
The buyer
No function, no seat, no ask. Research is how they got one.
Director functions are inferred from the business, not from an org chart. Position on the grid reflects working reality during the project.
Where it conflicted, and how it resolved
Every one of these was won the same way: not by arguing usability, but by restating the UX case in the metric that stakeholder was already judged on. Sales is measured on lead quality, not task-completion time, so the IA argument was made in lead quality.
Credibility kept, but moved behind the entry point
The counters stayed, because they earn trust in tender buying. They were placed after the product entry, so credibility supports a decision already in progress rather than delaying it. Nothing was cut, so nothing had to be defended.
Sales & Marketing wanted the homepage to open on the full product range plus 60 years, 20K pumps, exports to 60+ countries. The instinct of a manufacturer who wins tenders on reputation.
05 · Structure
Scenario → power → flow, with the factory’s taxonomy kept intact
Category page, three directions
Reconstructed 2026, originals not retained
A · Filter rail
Dropped
A filter assumes the buyer already speaks the catalog’s language. The card sort said they do not.
B · Segmented grid
Shipped
The same narrowing, delivered with zero interaction.
C · Decision guide
Folded in below the fold
Serves the first-time buyer without slowing the specifier.
Lo-fi wireframes: product page, spec-first
Reconstructed 2026, originals not retained
Once the structure held, the surface was built as a system, not a set of pages: one palette, three typefaces, and a component set sized by what the build team would reuse across 50+ pages and ten language editions.
The system as shipped: tokens and components
From the shipped stylesheet and designs
Brand
Wordmark. Firefly, ‘Gear Up For The Fight’
Signature surface, the diagonal red field behind the credibility band
Colour
Firefly Red
#E31B29
Ink
#000000
Slate
#32373C
Grey 05
#949494
Grey 01
#F0F0F0
White
#FFFFFF
Type
Aa. Firefly Fire Pumps
Roboto
Headings, navigation and product data
Aa. Firefly Fire Pumps
Open Sans
Body copy and feature descriptions
Aa. Firefly Fire Pumps
Play
Display accents, the hero claim
Components, from the shipped designs
Header, logo, primary nav, language selector, side enquiry buttons
Product card, image, model code, family
Link card, image tile with label
Enquiry panel, company, contact, country, requirement and a file attachment
Primary link button, label with arrow
Sitemap footer, manufacturing taxonomy retained
Photography, the seven homepage banners
Colour and type values are read from the live stylesheet. Tiles are the Figma component exports. The library held 40+ components, these are the ones a buyer meets between landing and enquiry.
The buyer-facing hierarchy sits on top and the manufacturing taxonomy was retained underneath, so both structures coexist instead of competing. Nobody had to lose an argument.
Information architecture, as shipped
Eight scenario groups at the top. Two levels down the buyer is on a single model code, without ever having to know a series letter.
User flow, six entries to three enquiry routes
Beams trace the path each buyer actually takes. Distributors and existing owners never touch the catalog. Before the split, they queued behind tender enquiries in one inbox.
The portable pumps category as designed: scenario first, then capacity, then the model. This is the page the card sort argued for.
06 · Process
A structured path from diagnosis to launch
Six stages, from the first interviews through launch and the updates after it. The order matters: nothing was drawn until the structure was proven.
Team
Two designers (Anchal Nagdev and me), then me alone from January 2023, external build team
PM stack
None
Research
Paper and shared boards
Numbers
Sheets and sales records
Handoff
WhatsApp and email
07 · Decisions
The decisions behind the structure
Six decisions, each tied to the screen it produced. One ties to a business result; the others changed the structure without a number attached.
The pinned screen follows the decision you are reading. Hover it to zoom into the shipped design.
08 · Outcomes
What it is worth today
Of annual revenue from website enquiries
Products in the catalog
Product families
Pages designed
The revenue share is the sales team’s number for website enquiries that convert into orders, per Rohit Mali, Director of Sales and Marketing. No analytics baseline was kept before launch, so there is no before-and-after figure for the redesign itself. The other three numbers are scope.
09 · Limitations
What these numbers can and cannot say
Chapter 2 · The sales tool · B2B sales operations
Giving a pump maker’s sales team one information model
Firefly Pumps quoted portable, vehicle-mounted, and PTO pumps out of spreadsheets and PDF catalogues. With Anchal Nagdev in 2021 and 2022, I designed the record model and four-layer catalogue behind the replacement tool.
Visuals recreated in Figma in 2026 from memory, since the original files weren’t retained.
10 · Problem
A rep typed the call into a sheet and opened a PDF catalogue to find a pump. Operations got the accepted quote with the pump model and often without the site conditions. Product knowledge belonged to a few senior people, so a newer rep couldn’t tell which of two pumps fit a fire tender.
Before
One customer, many spreadsheets, and no agreed shape for a quote
Every rep kept customers, requirements, pump options, and quotes in their own files. Operations got accepted quotes as attachments and phoned sales to fill the gaps.
After
One record chain, customer to inquiry to quote to order, with the catalogue beside it
I structured the tool so a customer owned its inquiries, each inquiry owned its requirements and quotes, and an accepted quote became the order. Anchal Nagdev designed the inquiry and quotation screens on that model.
11 · Ownership
Atharva Ruikar
I owned the tool’s information architecture, the product catalogue, the selection and comparison flow, and the guide’s component variants and library organization. From January 2023 I moved to the website full time as its only designer.
Anchal Nagdev, Rohit Mali, MID
Anchal Nagdev owned requirements mapping with me, inquiry capture, and the quotation workspace. We designed the website together, and she owned the guide’s foundations, form components, and content rules. Rohit Mali, Director of Sales and Marketing, ran validation with sales. MID built from our Figma files and specs.
12 · Core loop
Figure 1
Recreated 2026
Figure 1. The six stages over the record types each writes to. Recreated in Figma in 2026 from memory, since the original files weren’t retained.
13 · Decisions
What I rejected
01
Rejected: quote as the root record.
It copied the spreadsheet, so a known customer’s next inquiry started blank.
02
Rejected: contact-first CRM pipeline.
Pipeline stages hid the requirements, and the team quoted far more than it tracked leads.
03
Shipped: customer to inquiry to quote to order.
Each link answered what the previous one couldn’t.
14 · Design guide
The guide came before the screens, in six layers: foundations, content rules, core components, product patterns, website modules, and documentation. Anchal owned foundations, form components, and content rules. I owned component variants and library organization, then carried it into the website work after she left.
Figure 5
Recreated 2026
Figure 5. The guide’s six layers, each component tagged by owner. Recreated in Figma in 2026 from memory, since the original files weren’t retained.
15 · Website
Anchal and I designed the website together: two ways in, by category (portable, vehicle-mounted, PTO) and by application. Each product page opened with application fit, then key specs, then technical documents, then the enquiry path, L1 through L4 in order. On mobile the spec table showed only the deciding attributes. The enquiry form reused the tool’s inquiry fields, so web enquiries arrived shaped like phone calls. A later vendor has since replaced the visual layer; the structure and enquiry routes are still live.
Product page, 1440 and 390
Visuals recreated in Figma in 2026 from memory, since the original files weren’t retained.
16 · Built
MID built the tool in stages for about 100 people in sales, sales management, and operations, each stage validated by walkthrough. Reps found products faster and quotes went out faster; no analytics were set up, so there is no number. The list below is scope.
00
Design guide
01
Dashboard
02
Inquiries
03
Customers (contacts, inquiries, quotes, orders)
04
Product catalogue (families, specs, options, documents)
05
Product selection and comparison
06
Quotations
07
Orders and handoffs
08
Admin and reference data
Left out of v1: inventory, reporting, dealer portal, service history.
17 · Measures
Baseline: spreadsheet-era figures from the sales team’s own files before launch.
Measure
Data
Median inquiry-to-quote time.
No data yet
Revisions per quote.
No data yet
Orders returned for missing information.
No data yet
Active users and completed workflows per module.
No data yet
Product-page-to-enquiry rate on the site.
No data yet
18 · How they connect
Reps, managers, operations and web buyers read one catalogue, and each stops at the depth its decision needs. The site’s enquiry form reuses the tool’s inquiry fields, so a web enquiry arrives shaped like a phone call.
19 · Reflection
The website · What I’d carry forward
What worked
The lever was structural, not visual. Nobody heard a usability argument; each director heard the case restated in the metric they were already judged on.
The limitation
The spec-first template shipped ahead of the spec data, so some pages still carry a shared performance table and the homepage counters ship as 00. Designing a template that assumes content discipline, without owning the pipeline, is the mistake I would not repeat.
Next time
Instrument funnel events from day one. Push for search-first on mobile past this catalog size. Treat the datasheet pipeline and post-launch QA as design deliverables.
What is live today. The catalog structure, the scenario-first hierarchy and the three enquiry routes shipped in 2023 and remain on fireflypumps.com. The visual layer has since been changed by the vendor that maintains the site, so the site you see today is not the one on this page; the screens here are the shipped 2023 designs. The homepage counters and the shared performance tables described in the limitation above are part of what changed hands.
The sales tool · What I’d redo
01
I’d set those five measures before MID wrote a line. We made every roadmap call on walkthrough feedback for two years.
02
I’d also write the catalogue’s data rules as a one-page schema before the first product card. The four layers were clear in Figma and took review rounds to land in MID’s build.
20 · Takeaways
01
Model the records before the screens.
A screen can be redrawn in a day. A record chain ~100 people have filled can’t be.
Proficiency in information architecture.
02
Let uncertainty be a value.
Five requirement states cost one extra select. They removed the placeholder numbers that broke quotes.
Proficiency in data modeling for forms.
03
Layer reference data by who reads it.
Reps, managers, operations, and web buyers read one catalogue. Each stops at the depth its decision needs.
Proficiency in product catalogue design.
04
Treat continuity as design work.
A fixed model and a maintained guide outlast any single screen. I’d budget for that upkeep from day one.
Proficiency in design system maintenance.
