Mobirise Website Builder

Custom Calculations

2022-2023
The icing on the cake of retail pricing: building straightforward pricing equations unique to every retailer. I created a design language that marries catalog-specific data retrieval with expected simplicity. 

The Problem

Once Dynamic Pricing was in the market, we lost out on a lot of contracts because the product was missing the ability to do simple addition, subtraction, and multiplication inside of the Strategy Builder. This feature was built to address a gap in our capabilities. 

Mobirise Website Builder

What it Does

Custom Calculations is a combination of a PEMDAS equation and a search tool. The user can choose a “price” data attribute in their catalog (for example, Top Competitor Price or MSRP), plug that into the builder, and add basic arithmetic actions around it. 

Mobirise Website Builder

Inspiration

During one of our sales demos, we were told, “I like the way your product works much better than what I use now, but I can’t use it if you can’t do calculations.” Off handedly I asked if they could show us what they meant, and they shared their screen on a competitor’s product interface (shown here).

This screenshot shows a straightforward equation:

Add the cost of an item, the cost to ship it, the commission percentage we need to make, and the price to cover our overhead; multiply that by 1.25; then subtract our standard shipping price.

I immediately set to work on a way to replicate this capability.

If it ain't broke, don't fix it

Feature Design

Dynamic Pricing’s biggest competitor is Microsoft Excel, something that every one of our customers and prospects are intimately familiar with. I based the initial designs off of Excel’s equation structure to reduce the learning curve. This was an interesting feature because the core of the interaction and UI design stayed pretty much fixed through the Discovery process. There were additions that were made, mostly for engineering feasibility, but user testing was immediately positive.

The feature operations by allowing the user to select pricing attributes from their catalog, and do very basic math around it. The user can search their catalog to choose an attribute to base the calculation on, type out sets of parentheses to nest the scope, and nest multiple sets of scopes inside or around that. Here are a few examples:

Mobirise Website Builder
Mobirise Website Builder
Mobirise Website Builder
Mobirise Website Builder
Mobirise Website Builder

Documentation

Working closely with senior engineers, I outlined design documentation for:

  1. Typing and Selecting Terms
    How the user searches and selects the terms they want to use in their calculations. There is a suggestion in the search area that uses a “contains” filtration of the user’s product catalog to return results, and color coding of the different types of terms: text, number, self-referential, operators, and any errors.PLG for existing products:
  2. Parentheses Interactions
    How the user creates and interacts with nested math operations. We documented the mathematical order of operations, and the user interactions of opening a set of parentheses and hover states over nested scopes inside an equation.
  3. Deleting Terms
    How the user deletes a term from the equation. While the interaction is straightforward, there was a lot of debate amongst the team about what it meant to delete various amounts of nested scopes. What we landed on was: when the user highlights and deletes a set of parentheses, all content within them is also deleted including other nested scopes.
  4. Errors
    When the product returns an error state and what the user interacts with the fix it. User errors were tricky here because a no-code solution straddles the line between giving the user freedom to create what they want and not allowing the user to create garbage on accident. I documented all of the cases which would be recognized as errors, and how the UI should be made extremely obvious when this does occur. One of my tenets is that help text should actually be helpful versus simply explanatory; there is a difference between a misspelling and when a user accidentally divides by zero so the tooltip copy should reflect that. 
  5. Saving Calculations
    How the user can save their work as a template to use in other pricing strategies, and how to call those calculations elsewhere.
Mobirise Website Builder

Interesting Insights

This feature was released over two years after Dynamic Pricing was in market, and was one of the last pieces that I felt the product needed to be “feature complete”. If I had a time machine, I would have gone back and started with Calculations. This being missing for those two years was more singularly responsible for closed/lost opportunities than any other single factor. It was so simple once we realized what was needed, and the entire design and documentation process was finished over the course of three sprints. While this was a huge missed opportunity, the feature is in the product now and is the most-used pricing action across customers.

© Copyright 2024 Aaron Petrik - All Rights Reserved

Free AI Website Maker