IdPinThat.com: From Idea To Launch In Ten Days

The Idea

IdPinThat.com is a new microapp that I launched last week. The idea originally came from some of the sessions at #Fincon13 (where Pinterest traffic was a big focus this year) and then continued to develop in my head over the following weeks as clients started asking me questions about how to use Pinterest. Because I work so closely with my hosting and tech support clients, these kind of questions are common, but this one in particular kept hammering validating the idea I already had floating around in my head: A tool that gives people high quality pictures and an easy way to edit them in their browser, specifically to drive Pinterest traffic to their blog posts.

I’m no stranger to Pinterest. When I was developing Manteresting, I did extensive research into Pinterest, its viral model, what makes it such a powerful traffic driver, and what kind of posts were the most popular. It’s very clear that the prettier the image and the clearer the message on that image, the more people are going to share that Pin even if they never click through. That said, the more that Pin is shared, the more probable click-throughs become.

If I were to build this tool, it had to have great quality pictures available without any licensing constraints and it had to be easy enough for anyone to use without Photoshop experience.

I jotted down notes about the idea at #Fincon13 and continued to add to those notes as client questions touched on the idea, but then I sat on it for a couple of months. I had other things going on and forgot all about it until one day I was brushing up on my Python and stumbled on to this Mega Tutorial on Flask by Miguel Grinberg.

I built the first version of Manteresting in Django, which is a framework for Python, but I had never heard of Flask before or much about micro-frameworks in general so I thought I’d take a deeper look. I went through the bulk of Miguel’s mega tutorial, then realized this would be the perfect framework to use to get IdPinThat.com off the ground. I ditched the rest of the tutorial and got to work.

Here’s a rough timeline of the IdPinThat.com development

I started coding on a Friday

January 10th, sometime in the evening. I had much of the first version of IdPinThat.com done ~ten coding hours later. You could search, select your beautiful picture from the previews shown and then the site displayed that picture full-size on a page….not quite there yet.

By Sunday evening, I had a name picked out thanks to the help of Andrea Whitmer, Bootstrapped the app so it wasn’t so dang ugly plain, and had improved functionality to the point that, after selecting your picture, you’d end up at a faux editor that let you do all sorts of fun stuff on the front-end. At that point, when you clicked submit to actually save the edits, nothing would happen. Progress! 🙂

Here’s what she looked like at this point:

Note: Clumsy messaging and a cluttered homepage that’s confusing at best.

Up until this point, I hadn’t looked around much at what else was out there in terms of reusable code. I was enjoying experimenting with Flask too much. I was writing raw Python functions to do a lot of things that I ended up actually tossing out in the latest version, but it was all part of the experience. I wrote custom functions to process the images as they came into the server and to do all sorts of stuff to make the User Interface more user-friendly.

Were I to do things all over again, I don’t think I’d change a thing! I learned a lot of new JS/JQuery techniques and got my hands nice and dirty in Python. No regrets there!

First Revisions

Back to the timeline. Normal life resumed on Monday so I had less time to work on IdPinThat.com, but did spend what little time I had cleaning up the user interface and messaging so users would actually understand what the site did for them. Here are some revisions the site design went through:

Note: Much clearer layout and concise wording.

And here’s a look at the results page at that time:

Note: Minimalist results page but you can see in this screenshot a bug where the images overlapped. Also, notice the multiple navigation elements on the page that were confusing especially to mobile viewers.

And finally, the editor at this stage:

Note: notice the overlapping containers near the bottom, another bug.

I spent the rest of the week polishing functionality and knocking out some of the bugs that had shown up during testing. This is how things looked when I started sending the site out to my mastermind group, and a few of my clients who had unwittingly validated my original idea, Sunday, January 19th.

By Monday evening, I had a bug list to start squashing as well as a feature request list that was quickly growing. It seemed like my focus on simplicity left a lot to be desired in my app. My test group of users wanted more functionality; image cropping, resizing, multiple captions, effects and more! I already had some of this on my feature todo list but realized at this point, if I wanted to get the app launched while I was still in the honeymoon stage with it ie while I still gave a crap and liked the idea, I’d need to look at incorporating a real editor into my app.

Right now there are a couple of image editors getting attention as well as some oldies that are still solid. I looked at PicMonkey as it was specifically requested by one of my testers that the controls be like that. PicMonkey a pretty decent app and they have an API…sort of. 

PicMonkey

Within a few minutes of receiving an API key via email from PicMonkey, I gave it a shot. Here’s what that looked like:

Note: Looks good! Lots of image effects and tools at your disposal…

But there was a problem. The PicMonkey API was crazy slow. It took around ten seconds to load up inside IdPinThat.com and the API is not flexible at all. You’re essentially just loading the PicMonkey site into an iframe within your site via an API call, and the PicMonkey interface can’t be changed at all. There is one API call that lets you disable certain parts of the user interface…except there’s only one part of the interface that you’re allowed to disable in the current API and disabling it didn’t even work! To top it off, PicMonkey’s interface is heavily branded from the navigation to the share links you can send, being from PicMonkey’s domain.

This won’t do at all.

So I looked to one of the oldies…

Aviary

Aviary has been around for a long time. They once had a web-based image editor much like Pixlr.com which they shut down, I’m assuming to focus on their image editor API which is fantastic now.

At first glance, the Aviary API looked much more complex than PicMonkey’s, which (at this point) was a good thing. The documentation on the API is very complete though and you’re able to control a large portion of the Aviary interface when using the API. That’s perfect.

Here’s how the Aviary image editor looked:

Note: Clean, plenty of features and far less obtrusive branding.

Aviary took a bit longer to get just right but when finished, I was very happy with the result. If you go to IdPinThat.com now, you’ll find Aviary is still there and will also be used to power the upcoming IdPinThat.com mobile apps for iOS and Android as their API has an excellent mobile branch!

Aviary also ties wonderfully into Filepicker.io which I could use to export your images to cloud providers after you’re done editing.

The editor change came on a Thursday. That single change knocked out about 20 feature requests and half a dozen bugs that were present in my custom editor. From there, I wanted to polish the site navigation, info pages and make sure the site was fully responsive as that was on the bug list.

Hamburgers

I decided the best thing to do with the navigation was to get rid of it altogether! I mean, why does a user need to see that there is an About page. Who cares. But I did want to have a place that could contain a search bar on every page of the site as well as hide the About page if anyone actually did go looking for it, so I turned to Hamburgers.

I thought the hamburger drawer menu would be the perfect design tool to hide the crap I didn’t want bothering users who came to IdPinThat.com to find and edit high quality, public domain pictures but still let users find more information on the site if they so chose.

Here’s how she looked when the new navigation was in:

Note: This is the view after clicking on the hamburger.

Simple, elegant and functional. Perfect 🙂 I was very happy with this change. Everything anyone needed to find was in that new menu. And if they didn’t want to find anything, it got out of the way — on every device, mind you — so you could just get your high quality, public domain pictures and be on your way.

I did add one more thing to every page: the IdPinThat logo. It’s there so you don’t have to open the hamburger to get back to the homepage, but is nice and small so you don’t notice it unless you’re looking for it. I’m not 100% happy with the logo where it is but it works for now.

Oh and if you’re curious, I had that logo designed on Fiverr for, you guessed it, five bucks. It’s not exactly what I asked for but it was good enough. I was looking for launch-ready, not perfect.

Now

Here’s how the site looks right now:

You may notice a few other subtle changes. The messaging on the homepage has changed a few dozen times, always to be more concise in describing exactly what IdPinThat.com can do for you. If any of you have suggestions after using the site, on how to better describe its use, please share that with me in the comments!

And that’s about that! It has been about 17 days as of the time of this writing and I’m saying, good enough for now to IdPinThat.com.

Interesting technical tidbits

I started out with the Pixabay API exclusively which worked perfectly. All the images they host are Public Domain and great quality. I didn’t want to use Flickr because of how easily someone can change their photo license which could cause headaches for my users if a license gets changed on them. In the end, Flickr does have a gazillion more images than any other image site on the net, so I thought it better to integrate them in as well. It took a couple last-minute hours.

IdPinThat.com is hosted on Heroku and there were 100 commits pushed at time of this writing. I guess that puts IdPinThat officially at version 1.00.

The current version of IdPinThat.com is 98% Python and 1.3% JavaScript (JQuery).

IdPinThat uses four APIs currently: Pixabay, Flickr, Aviary, and Filepicker.io for Public Domain images, PD and Government images, the image editor and the saving mechanism, respectively.

Other Notes

One thing I loved about using Flask was that it was so simple to set up and then got out of the way to let Python do the work. Django was a bit more in the way in my opinion and I struggled with some of the way different required cogs in the Django machine worked together. After using Flask though, I actually see how Django operates more clearly now and plan to continue using it where required though am happy to have a lightweight, simpler alternative for projects that don’t require the power and complexity that Django brings with it. I will be using Flask again to prototype if not build entirely, my future projects. It is awesome.

Finally, A Favor

I would absolutely love if you guys would share IdPinThat.com with your friends, fellow bloggers and grandmothers. Let me know if there is anything that could be done better, any  features you’d like to see or if you just hate it and want me to shut it down (I won’t but you can still tell me). I have plans for some new free and premium features that I would love to build, but I need users to make sure I build things the way you guys want to use them.

Thank you for reading and leave some words in the comments! I’ll read them.

The following two tabs change content below.

• Bio
• Latest Posts

Jesse Michelsen

Jesse Michelsen has been working in the tech industry since 2005 as a systems administrator, developer and security consultant. He specializes in WordPress, LAMP and Python. He has a passion for the web and social progress. Read more about Jesse here

Latest posts by Jesse Michelsen (see all)

• IdPinThat.com 2.0 Release: This Changes Everything 😉 - August 1, 2016
• An Example Of Promises In JavaScript (JQuery) - September 3, 2015
• IdPinThat.com: From Idea To Launch In Ten Days - January 28, 2014