Pacific Forage Bag Supply is an agricultural firm founded in 1995 that supplies silage equipment and seeds.  Co-owner Alexis sells specialized equipment to dairy farmers that helps them reduce feed loss from rot and spoilage. In the past, she’s relied on a helpful but outdated sales tool built in Excel to help her show farmers what they stand to gain from using the equipment. The tool did its job but was harder to use than it needed to be. Despite the essential information it provided her clients, the spreadsheet was becoming a hindrance to her sales process. Alexis approached Out-Smarts to explore the possibility of replacing the tool with a custom app.

Discovery Process

Alexis’ requirements were few: the tool needed to be easy to use, generate PDF reports she could download or print for her clients, including a defined subset of the functionality present in the Excel document, and be completed within her budget.

Because she often meets her clients on their farms and in rural areas without guaranteed internet access, we decided the tool should be a client-side, single page application that could be used offline. Since the app would generate PDF reports, we didn’t need to worry about permanent storage on a remote server or database access.

Our discovery process involved investigating the hundreds of formulas and macros built into the Excel document to get a clear picture of the work required to translate the calculations. Behind the scenes, the formulas were at times a classic case of spaghetti code: cells referring to cells referring to cells which in turn referred to yet more cells. Working with Alexis, we broke the spreadsheet down into its major screens and calculations. Then, we create a fully costed project summary for her, which she reviewed and approved.

Some of the formulas in the Excel document

React Web App Development

Initial design work was done in Figma — a design tool like Sketch.

After breaking down the excel document, we prototyped some interface layouts and visual styles in Figma, a design tool similar to Sketch. We worked with Alexis to map out the information architecture and user interface flows of the new tool. The goal wasn’t simply to recreate the Excel document screen-for-screen, but to design a workflow that would best support her whole sales process. By using modern web technologies and rebuilding the tool for the browser, Out-Smarts was able to deliver a user experience much improved over the Excel document.

We chose React, a JavaScript library for building user interfaces, because it supported our requirements of an offline, client-side, single page experience. And it’s popular; backed by Facebook, React is unlikely to disappear anytime soon.

We also used a few other well-supported open source libraries to deliver features like PDF file generation and animated charts: Webpack and Babel formed the foundation of our development toolchain; Redux and Dot Prop Immutable allowed us to store client-side data in a simple but flexible format; Big.js prevented unfortunate rounding errors in calculating monetary values; PdfMake generated PDF reports without the need for server software; and Victory gave us animated charts and graphs to display in-app reports.

Single-Page Application

The result was an offline-ready single-page application with 14 sections that used over 35 custom-built React components. We replicated the computations of the original Excel document with over 60 calculation functions, this time in an exceptionally user-friendly and portable solution.

Right from the browser, Alexis can export PDF reports for her clients based on the information she gathers during her discovery process. And she can even export and import client profiles as JSON files to share among her employees who also have access to the tool.

What Our Customers Have to Say

“I had a very old Excel-based sales tool that I needed updating, and I had a hard time finding someone who would take it on that I felt I could communicate with throughout the process just to ensure we were on the same page.  Out-Smarts Marketing was recommended to me by someone in the Marketing field, which I thought was a good sign. Kyle took on my outdated sales tool, with all it’s convoluted and confusing equations, and listened and learned about my Agriculture business and my needs.  His attention to detail and his comfort with the material made the plan very effective and surprisingly simple (at least from my end)! I am very happy with the final product and know it will serve my company well.”

Why We Loved this Work

Having a great working relationship with our clients really is the foundation to any project’s success, and Alexis was a joy to work with. We enjoyed learning more about her industry and the challenges she faces in the field, as her explanations gave us a great sense of how she uses the tool and the value a modernized version would add to her work life.

Building a React application after an Excel document may have been an unconventional task, but we love a challenge and the opportunity to do custom work that few others take on. We’re thrilled with the results!

Learn more about our custom app services or get started on your own custom developed app.