Portfolio: Shopify Fulfillment pricing calculator

Pricing calculator for Shopify Fulfillment Network.



Deep dive available

Want to see more of the UX process for this project? Contact Andrew to schedule an in-depth presentation.

Context

Immediately following the relaunch of the Shopify Fulfillment network and its website, our sales team reported that merchants were reaching critical decision points without understanding the pricing model much as they should.

Constraints

Time frame: 3 weeks
Components: new
Format: web

The challenge

While the new website and its pricing models hadn’t been published for very long, we didn’t wait to solve this problem.

The finance department had created an industry-first pricing model for a logistics service. This made it disadvantageous to compare Shopify’s new model with competitors that already dominated the market.

This meant that:

We needed a brand-new pricing mental model.
We had to leverage the value proposition very carefully to show the target user why this new pricing model mattered to them.

The process

Divergence: early concepts

The product’s value proposition was to simplify operations while the merchant focuses on growth. That’s why I started with a growth calculator concept to show merchants what their margins could look like with fixed shipping costs.

Convergence: chosing a concept

I compared notes with my design pod. The others provided concepts for an atomic pricing calculator and an interactive build-a-cart demo. Ultimately we chose the atomic pricing concept because was the simplest idea that made the fewest assumptions.

Iteration

My product design partner came up with an initial concept based on our early working sessions, starting with a version grounded in the Polaris design system for its interactive elements. We workshopped it to narrow down information hierarchy, interaction content, and the product’s wider value.

Refine info hierarchy

We translated the Polaris concept to a more compact web version. This format gave us more wiggle room for content in the title, the support bullets, and, crucially, nailing the information hierarchy for the multi-item savings discount.