ROI Calculator Redesign for Minoa
OVERVIEW
We (my manager and I) worked with our client, Minoa, B2B Saas start-up serving salespeople, in a 2 week sprint to redesign their ROI Calculator, a tool to help salespeople more quickly arrive at value propositions within their business cases.
The overarching goal of this sprint was to increase the number of business cases created. In uncovering barriers to users creating business cases, we identified the ROI calculator as a major sticking point. Its block layout was not intuitive for users who are used to representing equations horizontally. Its interface did not support exploration or learning by playing, and overall it was difficult to quickly edit calculations.
Formula Bar
Users can more intuitively build calculations horizontally in a formula bar. Users can enter operators and search and select inputs and subcalculations all in the formula bar.
Overall visibility + usability
Users can easily see, add and edit inputs, subtotals and formula bar outputs, all at once.
Top down/Bottom up Workflows
Users with diverse workflows are supported in the new design, whether they start with configuring inputs, or the formula.
Room for "play"
Users can easily duplicate calculations to tinker with possibile formulas, and revert to old versions. Inputs in spreadsheet UI.
CLIENT
Minoa is a B2B SaaS start-up that helps salespeople with value selling and co-selling, earlier in the sales cycle, they do this by helping salespeople quickly produce Business Cases.
Business Cases are documents that salespeople create to lay out their value proposition for their customer, which includes a narrative and a financial component. Minoa’s ROI Calculator helps salespeople make a financial case for their product, or how their proposed product will either reduce costs or improve revenue.
DEFINE REQUIREMENTS
Requirements shifted a little throughout this process as we got to better understand user’s needs and requests/new insights from the client. For the purpose of this case study, I’m presenting all requirements here:
🎛️
Same functionality as existing solution
Engineers would need to be able to translate existing use cases and calculations into our new solution, so the same functionality need to be accounted for.
🏃
Quickly create a use case and ROI calculation locally
✏️
Easily edit existing ROI calculations and use cases
🛝
Room for informal exploration
Without Minoa, this ROI calculation work is typically done in spreadsheets. There is an element of play and exploration users can easily do in spreadsheets, and it was important that our solution invites and allows for this kind of process.
🛠️
Accommodate top-down and bottom-up workflows
Some salespeople work from inputs to outputs, configuring all the input information, then configuring the formulas that build on them - bottom-up workflows.
Some salespeople begin working from their output formula, and as theyre building this, they start to compile the list of inputs they will need to track down - top-down workflows.
RESEARCH
INTERNAL AUDIT
Minoas current calculator solution relied on blocks and vertically stacking information. I noted also that I needed to click into subtotals and totals to see the calculation detail, to understand how they all fit together to create the output. I also noted substantial space being taken up by “No description available”, which contributed to an overall feeling that I wasn’t easily able to see enough of the right kind of information.
Pre-existing ROI Calculator
🧱
Information is organized vertically in blocks
👀
On default, detail is not visible for individual blocks
📭
A lot of empty space in default state
🚫
Substantial space taken up by “No description available”
RESEARCH
USER INTERVIEWS
Minoa conducted two customer interviews and came back with several insights about the builder, big and small. A few key takeaways of the interviews:
🗣️
Where are my totals?
Both users expected to find their total/output called out, or a large calculated total number somewhere. One user suggested it would be nice to show the spatial relationship between inputs and outputs.
🗣️
Problems configuring inputs
Neither user changed their inputs type. Both could not figure out how to change the input type and were confused by the input detail panel.
One user commented that it would be nice to easily see and use the ‘building blocks’ of the calculation (input values and subtotals) to then create new subtotals and totals.
🗣️
Confusion with Blocks
One user did not understand the concept of calculation blocks. They also commented that they expected drag and drop functionality. This expectation I attribute to the block interface itself.
RESEARCH
COMPETITOR COMPARISON
To better understand competitors’ calculation workspace user experiences, I researched Pry, Causal, and Scratch. I focused on the surfaces they used, their overall layouts, and the input interface. How do users configure input information in these applications? How do they see, add and edit inputs and outputs?
Pry
Model Page
Overall, it was clear that all three competitors were laying out their workspaces similarlly with 2 or 3 columns, and a large workspace area where users configure their calculations. Some of my major takeaways from this exercise:
🏋️
Large centered workspace
All three competitors have the center of the page dedicated to the main “work” area. 2/3 used a three column layout, with the process flow starting at the left, with a space to configure inputs, and the far right, a space to configure outputs.
🟰
Formula bar and horizontal work
2/3 use a formula bar where the main job of calculating takes place. They communicate the calculation information horizontally, following the format of a formulas in spreadsheets.
🤰
Easy to duplicate elements
An interesting feature that stood out to me was the ability to easily branch and duplicate pages of calculations. This helped to allow for informal areas to play and experiment.
📊
Spreadsheet UI
All of the competitors borrowed certain formal elements from spreadsheets.
WIREFRAMES
After my competitive research, aspects of our solution space seemed clearer. Keeping an eye on our requirement to accommodate current functionality, I started by figuring out how to translate an existing Minoa ROI calculation into a new interface based on my competitive comparison learnings, something with a large centered workspace, and formula bar.
A couple of rounds of iteration and a UI skinning pass later, we arrived at our final design. Called out here are the major areas of change from initial wireframe to final, and why we made those decisions.
First pass at wireframes
👀
Spreadsheet UI for inputs
We got rid of the blocks, employing a spreadsheet UI for inputs. Users typically do calculator work in spreadsheets, so our solution is familiar and allows users to experiment to develop their calculations.
Multiple Calculations and Versioning
We added multiple calulations so users can quickly duplicate a calculation and experiment with different inputs. We also added an affordance for versioning, so users can revert to older versions.
Formula bar for totals
We recommitted to the formula bar for the outputs, too. It was too confusing to use both block and formula strategies in one interface. So we scrapped the blocks in favor of a horizontal, formulaic approach across the board.