Making Profile Collage
Our process for making a side project
It’s easy to get bogged down with grand product ideas and building large codebases (as we had been doing with Pocket Leap) but every so often it’s nice to focus on a small set of functionality, build it quickly and ship it. It helps exercise your muscles of design, building, launching and marketing — so we find it really worthwhile.
Charlotte has already detailed the inspiration behind Profile Collage (thanks Aldi) but it was clear to Chris and I that there was a better way to create these collage photos for Instagram feeds than Charlotte spending time stuck in Photoshop. And if it’s a problem Charlotte faces, it’s likely something other digital marketers will run into.
So how did we make Profile Collage?
Getting started
To start with, we created mockups in Sketch to figure out the process users would go through. We wanted to make it as simple as possible, so decided to break the process down into logical steps of making a collage rather than overwhelm the user with lots of options and controls.
First step is choose a collage size, second step add and position your picture, third step slice it. Last step download your collage. Simple.
It’s hardly the most complex user journey but simplicity can be hard to achieve. It was well worth investing the time upfront to plan out our product.
Building it
First up, there was a decision to be made on how we achieve slicing the image into a collage— browser side vs server side. And we actually built both. TL;DR: ultimately, we decided on publishing it as server side to give us more flexibility on building out new features.
The ‘front end’ version was using React components inside a Rails application and worked fine, but we figured that if enough people use the product we’d want to add in some more useful features such as auto-posting, photo editing and analytics, which would require a backend app, and seeing as we had the rails app anyway we decided to move more and more of it server side. The only part that remains written in React is the positioning of the grid for slicing.
Going the backend route actually gave us, for very little effort, a simple feature that has helped us with referrals — featured posts/examples. We had always planned on doing it (see the Sketch picture above) but we were going to have a manual process where we would curate the examples (i.e. it was hardcoded). But now, with the rails app, once a user generates a collage they can give us their Instagram handle and we promote their profile on our homepage.
Libraries & Services
The backend makes use of a few key libraries and services. One of which is Imgix, a fantastic service that allows you to do a tonne of powerful image manipulation through their API. You can add watermarks, compress, crop, add filters, blurs and more. If you’re ever making a product that relies on great imagery we’d highly recommend using Imgix.
Another core part of Profile Collage is, of course, the image uploads. As we’re using Rails 5.2 we made use of the new Active Storage library, which is part of Rails since 5.2. This replaces the paperclip gem (or similar) for handling file uploads. Active Storage makes it easy to upload files, attaching those files to Active Record objects. It’s easy to get up and running and you can actually achieve some image transformations (resizing for example) using it but it was not adequate for our needs — hence the decision to use Imgix.
Mobile headaches
Instagram is predominately used on mobile so we made sure the service was optimised for mobile browsers. Unfortunately, that includes iOS Safari. This caused headaches.
The biggest problem was with the resizable grid overlay. One of the things we did to make the grid stand out was darkening the part of the image that isn’t selected.
To get this to work we had to be a little creative and use the image twice, one for the background with a dark overlay, then again on top of that within the grid area. This was fine — until we tried it on iOS, where the part of the image inside the grid sometimes ended up rotated 90 degrees to the left 😱.
The problem was background images don’t always behave the same on iOS Safari as they do elsewhere. In the end, we had to settle for a hacky solution by just absolutely positioning the grid image.
Give it a go
We’ve launched Profile Collage on Product Hunt, come on over and check it out here.
The service is up and running at https://profilecollage.com so please do give it a go and let us know what you think.
You can see more of our development projects over on the Add Jam website.
