Microsoft Excel and Google Sheets are more than easy-to-use apps – they’re powerful tools. Businesses use them to create everything from budget plans to forecasting revenue. While they are powerful tools, spreadsheets are not always pleasing to the eye of the average user. Even alternating the colors of rows and columns of numbers can’t stop the eyes of most users from glazing over.
We recently helped a client with a project to design a new user interface to replace two powerful – yet not visually appealing – spreadsheet sales tools.
Comparing apples and oranges
The client used an Excel spreadsheet as a calculator to demonstrate cost savings during sales calls, but they wanted to create a self-service tool that customers could use themselves.
One of the products the client offers is elastomeric respirators. The upfront costs for the reusable respirators are higher than the alternative – disposable N95 masks. But the long-term costs drop dramatically since businesses can change the filters of the elastomeric respirators and keep them in use for longer periods. For example, they used the calculator to show that even if you’re replacing a filter set every week, you’re still going to save about 38% over the cost of outfitting people with N95 masks.
Great solutions are the perfect mix of form and function – so they approached us to create a web interface for the calculator that their sales team and customers could use. Having two different user personas meant we needed to design an interface that could be easy to control and understand.
We started with reviewing their brand guide to get an understanding of what elements we could work with. The main fields for the calculator are for entering the usage numbers for N95 masks and the pricing for elastomeric filters and respirators. We used a slider control to change the values for the number of elastomeric filters easily.
We used the client’s brand colors to show a clear delineation between the costs for the N95 masks and the elastomeric respirators.
Being able to enter the cost values quickly was only step one. Next, we wanted to enable our client to show the changes in savings in real-time as the customer or salesperson changed the values.
We designed two charts to help demonstrate the cost savings by taking the tabular data making it clear and readable. The first chart displays the comparative costs of the N95 masks compared to the elastomeric respirators. The second chart draws out the cost savings over five years with a hover function that allows the user to see the cost savings per year.
Creating the charts had an exciting challenge. The inputs for the N95 masks and the elastomeric respirators are not analogous. For example, a customer could say they would use 5000 N95 masks per month, and the comparable elastomeric numbers would be 250 respirators with filter sets for the same number of employees. We had to take these two different data points and show a cost comparison. As we mentioned, the elastomeric respirators have a higher upfront cost for the first year as the customer has to purchase the masks and filters. But in each subsequent year, the savings increase as only the filters need to be replaced.
Since this was a customer-facing tool, we also included a bespoke section to include marketing information to help reinforce the value of not just the respirators but also working with our client.
The total cost of ownership
The second tool the client needed a new interface for was a total cost of ownership calculator. They provide the sale and installation of telemetry sensors to measure everything from hydrogen sulfide to carbon dioxide levels.
Using the same design paradigms as the elastomeric respirator cost calculator, we designed a total cost of ownership self-service tool for their customers. There are multiple cost inputs including, hardware, installation, labour, and replacement costs. To simply the user interface, we designed a tab control to separate them.
As a customer makes adjustments, the graphs on the tool update to reflect the total cost of ownership compared to their competitor’s sensors. We took a massive set of inputs and outputs and simplified them into an easy-to-read (and convincing) tool to help their customers make a purchase decision.
Show, don’t tell
User experience design is more than just brand guides and button placements – in this project, we had to dissect these spreadsheets. We needed to understand what matters to the client and customers and then design a user-friendly interface and drive the customer to the call to action – contact a salesperson and get a conversation started.
Our design philosophy focuses on creating user interfaces that are intuitive, functionals, and elegant. Converting Excel spreadsheets into web-based tools may seem simple - but looks can be deceiving. You’re taking the power of one of the most used applications and making something not just beautiful in form but with the same level of functionality.
