Equipment editor redesign

The existing tool

The editor had been in use for more than a decade, with no design documentation explaining its decisions. Reps could work on only one location at a time. For a customer with several sites, they repeated the same steps in separate views.

Experienced reps knew the tool’s quirks; new hires had a harder time finding their way through a quote. The redesign needed to make that path clearer while preserving the working habits people relied on. Excel export was a requirement, too: finished quotes still needed to leave the tool as spreadsheets.

Research with sales reps

I sat with sales reps and watched them prepare quotes, then kept bringing work back for feedback. Reps moved unfinished quotes into Excel to sort and edit equipment together. Rows and columns were already how they organized the work.

That distinction mattered: exporting a finished quote was necessary, but exporting just to work on it exposed a gap in the editor. The new workflow needed to support that editing without taking away the final Excel handoff.

The first design

I used paper sketches to explore table layouts and navigation with stakeholders before developing a more detailed prototype. The first direction grouped equipment by location, then by model, with open quotes organized into tabs.

The hierarchy made the relationships clear and initially received positive feedback. But it also meant opening a location, then a model, before reaching an individual item. I had made the structure easier to understand without doing enough to change how reps worked through it.

Changing the approach

Stakeholders questioned why building a quote should work so differently from the Excel file it produced. Their feedback brought me back to my own observations: reps were already leaving the editor to work in rows and columns.

I replaced the nested layout with one equipment table. Locations became filters that controlled which rows appeared. This gave up the hierarchy’s neatly separated groups, but let reps work across sites without repeatedly opening and closing them.

Designing the editor

The locations sidebar let reps select several sites and see their equipment together. Each row kept its location visible, so bringing items into the same view did not mean losing track of where they belonged.

I gave the table most of the screen and kept edits in the rows. Reps needed to compare equipment, change coverage, and review values across a long list. A denser table was useful here: it kept more of the quote in view while they worked.

The later design also brought equipment status into the table, alongside model, coverage, and pricing information. Reps could see which items were ready or still needed attention in the same place they made their changes.

Working with engineering

Looking like a spreadsheet was only part of the requirement. Reps also needed to move between cells with the keyboard, select values, and copy and paste. Those familiar interactions mattered when a quote involved many edits.

I worked with engineering to choose AG Grid for that behavior. An established grid gave us a foundation so we could focus on quoting instead of building spreadsheet controls from scratch. I designed the location selection and editing flow; engineering built the production editor.

Results and lessons

After launch, tracked usage data showed average quote time fall from 45 minutes to 12, about 73% less time. The editor we delivered together served 300+ sales reps.

This was my first major design project. Seeing the time it saved made the impact of the work tangible. The lesson was in the direction I changed: I had observed a useful way of working in Excel, but initially designed around the equipment hierarchy. I learned to judge the structure by how well it supported the task, and to bring rough work into feedback sessions before committing to it.