Recently I was working on designing several custom UI elements for a local Starboard SUP boards distributor who is building his e-commerce store on Shopify.
One of the challenges I stumbled upon was that the boards come in many variations, with different technologies and sizes.
While it’s easy to deal with this on a product page it’s not that straightforward when you look at all the products laid out on a grid.
Customers usually get discouraged by any visual obstacles and do not like to spend a lot of time browsing and checking every single product to find the variations they’re looking for.
In case of our boards, the customer might be looking for a board designed for a particular range of the rider’s weight and made in a particular technology. UX is way better when even before entering the product page we can clearly communicate the key product characteristics. Unfortunately, when it comes to e-commerce platforms and pre-made themes which most people use, there is no way of showing that additional information in the product grid. 
The merchant can show the picture, the title (and eventually add some extra information to it) and the price. I’ve decided to add some extra information to the pictures instead.
![starboard.png](https://steemitimages.com/DQmQ1DcMcw35ACET5pyQr4XarZ5bt8wD5q7vGHkXfCKEV9L/starboard.png)
It solves the issue of communicating the extra details to website visitors but creates another issue for the merchant. It’s not that easy to create custom-made product tiles when one is not a designer and is probably short on time.
Even for people with some background in design, it is a little bit too time-consuming. Removing the background from the product picture in a photo editing tool and then making the product tile in Sketch modifying the details for each one as well.
When there are dozens of products it’s a lot of repetitive work. To make it a little bit simpler I reused some of the logic of an app I was working on to build a simple tool allowing to remove the background (for products which pictures were taken on a one colour background and no internal clearance in them) and adding some extra labels, colour swatches, size swatches etc.
It has made my work considerably quicker. It’s been used to create a few hundred product tiles of SUPs, paddles and accessories. I’ve shown it to some people and they told me I should consider publishing it. After polishing it a little bit I have decided I would give it a try and see if people liked it or not.
![e-pic product tile maker.png](https://steemitimages.com/DQmNq5GM7kxCVNRSJAC2ZEpwD2FdHJpmUvjWw5BfeT21V6L/e-pic%20product%20tile%20maker.png)
It’s a kind of simplified Canva targeting product images only with some additional features to handle swatches and some other things a merchant might find useful. So, for starters, I have designed just 3 themes. All of them created with clothing products in mind. They allow users to put their own products in, add watermarks, logos, colour swatches, size swatches, discount information etc. When a user is happy it allows to save a picture in 2048x2048 size in their photo library.
https://youtu.be/vFnASu3fUYo
There are plenty of things I can improve if people like it. Allow to save a layout set previously would be probably one of the really useful ones. It would make the editing even easier and more intuitive. At some stage I can even add an option to pull pictures and some data straight from Shopify and allow some bulk editing and automatically republishing them (for example add some discount information to all of them at once) but it would require a lot of work and I prefer to wait for some feedback if there are people who like the app and would pay for an app with even more powerful features and more themes for various industries in it.

<a href="https://itunes.apple.com/us/app/e-pic/id1369652112?mt=8">Download the E-pic  by QuantumKiwi.co from the App Store</a>