Product Photos Management

Manage product photos easily and intuitively

The Problem

TradeGecko is an inventory management app that allows user to manage inventory and stock across multiple locations and stores. In order to achieve this, TradeGecko integrates with e-commerce store apps - such as Shopify, WooCommerce and Amazon stores - and saves our customer's time by syncing information across all stores.

Product photos one of the most important selling points of an e-commerce website. When goods aren’t accessible in person, photos step in as part of purchasing decision factors. As such, TradeGecko users need to be able to manage their photos easily and intuitively.

When dealing with inventory management, we often need to consider product vs variant. a "Product" is the overarching term for an inventory (eg: a skater skirt), while a "Variant" is the actual item that defines the individual variance of the product (eg: a skater skirt in red and size small).

The previous version of photos management in TradeGecko was done on variant level, which poses issues when the variant actually does not have physical difference with other variants within the same product. For example, a red skater skirt in size small would usually use the same photos as the size medium variant. Even so, customers still had to define photos for all variants. Imagine how tedious that can get when there could be many variants for a single product. Not to mention each variant photos upload is a duplicate in our database, which creates an unnecessary bloat.

Read about the process

The Process

By going through our JIRA tickets and listening to feedback through our Customer Success team, we determined our customers would like to have the following basic features when managing product photos: Ability to upload a new photo per product variant (for example, a skater skirt might come in red and blue), delete photos, reorder photos, and select a featured photo for that product (to be used as the primary photo for that product on e-commerce websites)

On a more complex level, to solve the issue of product photos being defined on variant level, we changed the way product photos work: photos will now be uploaded on product level (for example: a skater skirt) and from there, customers would be able to attach photos for the variant of that product (for example: a red skater skirt should have the specific photo of the red variant).

In addition, customers would also be able to bulk attach the same set of photos to many variants, which saves time when there are no physical differences among the variants.

See the design

The Design

The photos management should feel like something that is part of the core workflow, so in terms of solution, I used mostly existing elements from our design language. In order to assist with the issue of having to upload the same photos to multiple variants over and over again, customers can instead choose to bulk attach the same set of photos to multiple variants:

After photos has been attached to a variant, they can be accessed through the "Images" tab. From here, it is immediately clear one of the photos is the default photos. They can then drag and drop to reorder the photos (which will in turn affect the order they are displayed on the e-commerce website) or change the default photos to a different one.

That's all Folks!

Back to List of work