HappyTiles

Design a collage and have it delivered as a poster

By Dominik Ferber

This is the story of how I made HappyTiles, an online photo collage creator for posters. You can use it to create your own poster in a few simple steps and have it printed and delivered to you with free worldwide shipping.

Inspiration

After traveling for two and a half years I ended up with a lot of pictures of all the people I met traveling. I wanted to create a poster of everyone I met and searched around for a good collage maker. After trying some free alternatives I ended up buying CollageIt 3 Pro and designed my poster with it. Then I sent the poster image to a print shop and had it delivered to my house. This is what my manual creation looks like:

Poster I created manually hanging on my wall

I spent 10.99€ on CollageIt Pro 3 and another 23.97€ on printing and shipping of the poster - totalling 34,96€. Pretty expensive for a single poster but totally worth it. The poster puts a smile on my face every day and remindes me of all the nice people I met and the cool things I got to experience.

Goal

I posted my custom-made poster on Instagram and a few friends asked me whether I could create one like this for them. This sparked the idea to create a web application where everyone can design and order their own custom poster with ease. Mothers can use it for pictures of their kids, travellers can use it to remember their trips, animal lovers can use it for shots of their pets - seems like it could be useful!

So I set out to create a product which allows everyone to design a collage of pictures with ease. Visitors should be able to use the online editor to design the picture. No design skills should be necessary. Once the creators are happy with their poster they should be able to have it printed and shipped to them easily.

Printed poster made with HappyTiles

Building the editor

The side-project is built with Firebase, Tachyons, react and its new hooks and the wonderful react-spring. It took about a month to complete and I’ve worked on it from Bali (Ubud and Canggu) and Germany.

The following features are built into the poster editor:

  • reordering of images
  • rotation of images (90°)
  • multiple dimensions for poster
  • landscape and portrait mode
  • custom text on poster
  • different layout options (border, frame, slight rotation)
  • filters

The following features are built around the editor:

  • accepting payments through Stripe
  • automatic order confirmation emails
  • admin-only dashboard hidden behind authentication
  • works on mobile and on desktop
  • upload of created poster
  • animated UI
  • client-side generation of thumbnail images to prevent consuming too much memory

Check the video below for a walkthrough of HappyTiles which shows the creation of a poster in under a minute:

I’m extremely happy with how nice the editor turned out. It’s also very easy to use and something I wish had existed when I created my first poster manually.

Building the landing page

After the editor was complete, it was time to build a landing page.

The landing page should be asthetically pleasing and have a modern luxurious look. It should spark the idea of creating ones own poster and provide some initial inspiration.

This is what I came up with after trying different layouts:

landing page

The landing page is prerendered during the build using react-snap so the markup can be served statically which helps with search engine ranking. The whole application is available in multiple languages using lingui.

I built some interaction into the landing page to spark peoples curiosity.

interaction

Marketing

I had never ran any ad campaings before so I was excited to give it a shot. First I set up Goolge Analytics so I could see the influence the ad campaings have.

Marketing on Instagram

I started with running some ads on Instagram’s content section. I photoshopped the picture below to give people an idea of what they’re ordering which I used in the ads:

Printed poster made with HappyTiles

After spending about 20€ on Instagram ads I didn’t get a single order and barely any visits, so I stopped that effort. I figured it would be smarter to target people looking for posters right now instead of having to plant the seed first.

Marketing on Google

So I tried ads on Google search next. The upsides here were that I didn’t need any marketing images as Google ads are text-based and I would be able to target people looking for posters right now.

I spent around 55€ on Google Ads which received 2750 impressions and got 74 people onto the landing page.

This was pretty good but unfortunatley none of them ordered a poster. I still had pretty high prices when I ran that ad campaign which might be the reason no orders came in.

I also found it hard to find the right keywords to target since I’m offering both, the collage maker and the printing service as a bundle. Many people are searching for either the first or the second thing but not for a combined service. So the ads seem to have targeted the wrong groups.

Launching on ProductHunt

As I am pretty proud of the poster editor I created, I wanted to show it to the world. I submitted it to ProductHunt and it received nearly 100 upvotes - pretty cool!

This launch got almost 600 unique vistors onto the landing page. I didn’t expect any orders from the launch - it was just to show the product around and to get my name out there as a maker. It is also the first thing I ever launched on ProductHunt, so now I know what that’s like.

Marketing future

At the moment I’m not sure how to continue. I’ve built this great editor but people don’t seem to order any posters from it.

Either the prices are still too high or something else is wrong. Or maybe it just takes more time for marketing to take any effect - it’s only been 2 weeks and the ad campaings didn’t run for more than a few days. Let’s see.

I’d be happy to hear about any tips you might have!

Summary

I used this project to learn about accepting payments with Stripe, using React hooks and building products with Firebase.

I also dipped my toes into Instagram and Google advertising - and I had my first ProductHunt launch.

It has been my first time building a site where I sell something myself and I loved the experience so far.

Future

I’m very happy with the technical setup, the landing page design and the poster editor. However I want to find out how to get more people to actually buy posters. So I’ll look into that next.

Open website

Open editor

Open ProductHunt post

Dominik Ferber

I'm a freelance Software Engineer and Consultant specialising in React. Since 2015 I've successfully helped enterprise and small companies from all over the world with their frontend work.

Follow me on Twitter