What happened to my inventory?

Redesigning a mobile first experience

A quick win for Shopify

Shopify merchants of all sizes share some pretty universal problems. Growing an audience, effective marketing and inventory accuracy. It's important for merchants to know exactly how much inventory they have on hand to fulfill orders, to do accounting and to manage their cash flows.

The Shopify inventory history page is where merchants go to figure out what exactly happened to their inventory quantities. And I was tasked with redesigning the mobile native experience to be mobile first.

The old version of inventory history

As you can see, this page is extremely difficult to navigate. It has a horizontal side scroll that makes the date sticky. It's extremely difficult for merchants to investigate a discepency and is overall a very cumbersome, not crafted experience.

Who uses this page?

Merchants use inventory history for three main reasons as a part of their inventory management workflows.

  1. To investigate a discrepency

  2. For accounting/tax purposes

  3. To identify deadstock (slower movingg inventory)

Designing for smaller real estate

Next up I investigated the IA of the table to identify which pieces of information were more important to merchants. This is because the transition from desktop web to mobile native comes with a lot less real estate and the IA should be crafted to reflect this.

I kept in mind the JTBD for the page and the questions that merchants were trying to answer.

Going wide with explorations

Even though having cards seemed like the most straight-forward approach since it best matched the rest of Shopify, I experimented with a few different layouts. For example the list view made skimming really easy, which aligned with what merchants are trying to do on this page, but didn't work with large numbers.

Exploring various card layouts

I then experimented with various card cell layouts to figure out what made the most sense and that was the easiest to scan. I thought about questions like: Does it make more sense to see the quantity and then the adjustment or the other way around?

Accessibility

It's very important to me that I design an inclusive experience for all merchants. I made some prototypes to support font size increases, screen readers, and internationalization.

Increased font sizes

Testing internationalization

Finalized designs

Here is the before and after of the Inventory History. The page has now been redesigned for a truely mobile first experience.