Consistent Product Images on mobile

Not all product pages are the same. Recently we had to redesign our mobile product page and the obvious component was Product Image Gallery. What is a furniture e-commerce store without a picture gallery?

The answer is: Add a product gallery section on top the the product page, Why so much of fuss? Sounds simple enough. Right?

However, the goal is to showcase product images that helps to decide. Images that bring perspective into picture & Images which are uniform.

So, we started with mapping our product images on different parameters.

  1. Style of Images: There are two different styles of product images on CasaOne.
Different styles of product images

2. Size of Images: There is no standard size in which our vendors will share or add product images to the catalog. This leads to different image sizes and resolutions. You cannot define a standard component to house these images. One size doesn’t fit all here.

Different sizes of product images

3. Orientation of Images: Furniture are of different styles. Some of them are tall, some of them are wide. If you don’t put everything in the same viewpoint, the relativity of furniture’s size goes for a toss and it becomes a major problem.

With all these different constraints, how do we solve for consistent imagery ?

When we look at it plain and simple, there are multiple ways in which this can be solved:

a. Asking furniture vendors/manufacturers to share all the images in one particular format and resolution.

b. Involving graphic and photo editing teams to edit all the existing imagery to make them consistent.

c. Clicking new pictures for all our products.

d. Outsourcing the job to an expert agency.

Next step was to study the feasibility of all these probable solutions:

a. Asking furniture vendors/manufacturers to share all the images in one particular format and resolution — A very long project and has a lot of variables like Vendor’s availability and intent, merchandising team co-ordination, availability of the product in stock and so on.

b. Involving graphic and photo editing teams to edit all the existing imagery to make them consistent — We have more than 6000 SKU’s on CasaOne. Each of these have 5 images on an average. It will take months and entire graphic team’s bandwidth.

c. Clicking new pictures for all our products — Not Possible again. 6000x5=30,000 pictures to be clicked on an average. It will be super expensive and again will take months. This will have to be repeated all over whenever a new product is added to the catalog.

d. Outsourcing the job to an expert agency — Super Expensive and needs a dedicated team to co-ordinate every single day.

So, What is to be done?

The team went back to the drawing board to find a solution which was:

  1. Quick in delivering results so that we can go to market faster
  2. Automated and independent on the availability of the team
  3. Cost effective
  4. Scalable to any product which may be added in future

After a lot of brainstorming with the PM and Engineering team, We decided to formulate an equation which will help us minimise the inconsistencies in the images and make everything look less chaotic.

So here is our Magic Equation (explained through images below).

  • If image is in portrait mode ( Y > X) , Fix the height with 16pt padding.
  • If image is in landscape mode ( X > Y) , Fix the width with 16pt padding.
  • If image is square shape(X = Y), Fix either width or height with 16 pt padding depending on device orientation.

Results

Before: Product page images without applying the equation
After: Product page images after applying the equation

Learnings

Brainstorming and striving for the solution is the key. Add a pinch on design and systems thinking and the most complex problems can become a piece of cake. We could have spend a lot of time and resources achieving something which is pixel perfect but we ended up spending negligible time and resources achieving something which is near perfect. It all depends on the company priorities and direction in that point of time. For us, this was a win-win situation.