How you feel being the No1 project on EyeEm’s PhotoHackDay

…and how we achieved it

This was  a long weekend – again. Usually it takes working through the night to take the grand prize home at a Hackathon – we made it with getting some sleep at home, luckily.

Team-photoratio

But it was still quite a lot of work to do. If you’re not familiar with the concept of a Hackathon or if you want to contribute or tell others about the experience you had on EyeEm’s PhotoHackDay in Berlin feel free to use our storytelling tool Qurate:

an overview of social media elements taken at  Photo Hackday (add your own!):  https://www.qurate.de/canvas/experience/51a9b778c05d060200000017
see what I experienced:  https://www.qurate.de/post/51a9bfe0e6b9260200000030#

So, first:

The idea

Personally I went to the Photo Hack Day with an idea in mind that I registered on Hackersleague as “Tarantimgo”. I wanted to write an open service that offers a crowdsourced idea of what sounds and songs could match a set of pictures so photo platforms could commonly use it to offer ambient sound to their viewers (maybe a good topic for Battle Hack? Let me know if you need it 😉 ).

Then I met some good old acquaintances: Stefan, Bora, Rob, Gabi and we fell into a discussion about what to hack this weekend when Stefan Hoth (who’s a rather prominent face in Berlin and works as community and technology advocate for Google Services) mentioned a guy “running around on site and desperately looking for developers”. Since Robert, me and Gabriele have taken home an award on the last Hackathon for a “project with a promising business adaption” last time we said, ok, go get him.

Turns out, this has been Albert. He’s from Armenia – quite an exotic place somewhere between Russia, Turkey and Iran -, works in London and currently lives in Berlin. What he pitched to us was:

You find many nice images of nice places on EyeEm. If you find a professional shot of a place you can adore it, favorite it, like it but wouldn’t it be nice if you could repeat it with a personal touch? Let’s write an app that displays information about how to take that shot by yourself; including EXIF data, time and season of shooting and the right place.

We thought a little (and not everyone was convinced at first) about it. Robert and me (developers) have worked together three times on Hackathons already and I knew that Gabriele could give a helping hand when it comes to Bootstrap so we finally gave in and took the job and started the project Photoration.

logo

Bootstrapping

We came up with some scribbles of the idea that we could agree on. What we wanted to build for the hackathon was an application that

  • shows you which “sights” are nearby
  • shows you “professional” photos taken from at those sites (taken from EyeEm)
  • shows the position of the shooting point (the image’s GPS coordinates of the image actually) and the position of the sightseeing spot / monument on one map
  • shows additional meta data for the image (ideally EXIF data)

Albert’s job was to create “final” design scribbles of these ideas. Here are his results:

Development

We’re working with node.js and a web frontend. That’s actually a preset that I’m enforcing because I’m doing it all day and many people can adapt to it pretty fast. I set up a fresh Heroku app, added a remote to github, got Robert in within minutes and off we went. I was concentrating on the structuring and prerequisites, Robert’s task was to create a suitable backend.

We quickly found that the  EyeEm API doesn’t allow searching for sightseeing places. Of course you can search for albums that match a certain Foursquare location. You can also search for venues nearby a location ( endpoint ) but that was not matching our criteria.

We decided to get those special locations by the Foursquare API which doesn’t require an user token to do that. Robert manually picked the Foursquare venue category ids that we could reuse in the Eyeem API calls later:

4bf58dd8d48988d1e2931735,5032792091d4c4b30a586d5c,4deefb944765f83613cdba6e,4bf58dd8d48988d190941735,4bf58dd8d48988d192941735,4bf58dd8d48988d191941735,4bf58dd8d48988d136941735,4bf58dd8d48988d137941735,507c8c4091d498d9fc8c67a9,4bf58dd8d48988d1f4931735,4bf58dd8d48988d184941735,4d4b7105d754a06372d81259,4bf58dd8d48988d1e2941735,4bf58dd8d48988d1df941735,50aaa49e4b90af0d42d5de11,4bf58dd8d48988d15c941735,4bf58dd8d48988d1e0941735,4bf58dd8d48988d161941735,4bf58dd8d48988d15d941735,4eb1d4d54b900d56c88a45fc,4bf58dd8d48988d163941735,4bf58dd8d48988d164941735,4bf58dd8d48988d165941735,4bf58dd8d48988d166941735,5032848691d4c4b30a586d61,4bf58dd8d48988d126941735,4bf58dd8d48988d131941735,4bf58dd8d48988d1f7941735,4bf58dd8d48988d12c951735

On first load our application

  • loads foursquare venues of those category IDs nearby a location the client provides
  • for each venue found we’re firing a query (yes, that’s a lot of simultaneous queries) to EyeEm’s /albums endpoint. You can provide a venue’s foursquare id to get matching photo albums.
  • for each album found we’re firing another query to get its best rated photos because we’re only interested in the “highlights” that people might find worth to be copied

That’s nearly everything our backend does. It would be helpful if the API understood arrays of IDs to reduce the amount of requests that we have to send.

Frontend

I don’t want to get into too much details here why I decided so but I’m using Backbone.js and a single page app approach for the frontend. I simply love this framework for its unobtrusiveness and I know that it can be used for mobile applications very well as long as you know what you’re doing. I also decided for Bootstrap 2.3.2 since it comes with responsive features. I created a Backbone router that dynamically creates its routes and points to handler methods in two Backbone.Views that I consider separate frontend classes. Using that approach I could delegate some frontend work to Robert ( he implemented parts of the single image view ) when I was getting tired around noon the second day. In the meanwhile Gabriele updated the bootstrap CSS with custom fonts and colors.

If you want to read through the code go ahead but please don’t blame me for the many bad styles and ignorances (you don’t put API keys on a public repo, do you? No you don’t !)

Github: https://github.com/elmariachi111/photoration

Results

qrcodeWe came up with a fully functional but (you might’ve guessed) rather cheezy web application that runs on mobile clients. You can check it out yourself by pointing your phone to http://photoration.herokuapp.com (give the dyno some time to wake up and wait for the many API calls to return).

After the initial loading has finished you can browse through EyeEm albums of nearby sightseeing spots. If you found a photo that looks gorgeous, tap it to get some details and to see a combined map of the spot and the photo.

Thank you

First, I’d like to give my warmest Thank you to my team: Robert, Albert, Gabriel. We 4 know that we couldn’t have made this possible without – us 4 🙂 Thanks a lot to the EyeEm team: you do an incredible job and you did an amazing one on that Hackday. The spirit you get at that location is far better than on any other Hackathon I ever attended. Thanks a lot to Github, Nodejs, Backbone and Bootstrap for being there and make bootstrapping applications on a weekend dead simple (if you know what you do).

photoration

Why did we win that event? A question you have to ask the jury. But personally I have the feeling that this app (even though technically there’s absolutely no rocket science involved) really does (or tries to do) something valueable: it wants to help you to take better pictures. An iPad application that automatically takes pictures of a cat or a christmas tree that blinks in certain images’ lights are funny but they don’t bring much value to the community (but rather to world, especially for cat lovers;) )

Where to go from here?

There are lots of improvements due. Massive caching of results would be a brilliant idea. A swipe-capable frontend (as scribbled by Albert) would be real nice. A photo overlay would be even nicer: lets show the chosen picture transparently over your camera preview. A selection of really good pictures would be very helpful (plus a connection to professional photo services like 500px, fotolia e.a.). Maybe this could be achieved by rating pictures in terms of “pro shot” instead of “nice one”.

If you think that this stuff has potential: feel free to connect our team members. You find us here:

Albert: http://www.linkedin.com/in/albertpoghosyan
Robert: http://about.me/RobTS
Me (Stefan): http://about.me/stadolf
Gabriele: https://www.facebook.com/gnegro

More details on the project can be found on hackerleague: https://www.hackerleague.org/hackathons/photo-hack-day/hacks/photoration-app 

Idea: A Business Model Canvas Collaboration and Comparison Platform

If you’re into the founding business and you’re following best practices threads you will have stumbled upon the concept of Business Model Canvasses as supposed by Alexander Osterwalder. The idea of business model canvasses is to focus on the cornerstones of your business: what is the value that you want to deliver (aka your “product”)? What is the customer focus (B2B/B2C)? Where’s the money coming from? What are you doing everyday? What do you essentially need to keep the whole thing running (resources, partners)? A Business Model Canvas aligns all of your answers on a unique table and acts as a discussion tool for your co-founders, partners and investors. Instead of pitching the idea (which basically leads you to explain your product, not your revenue opportunities) you can pitch the canvas – people who know the concept will understand in 3 minutes what you’re talking about as long as you found the right descriptions for each item.

The Business Model Canvas

The bad thing about business modelling is: not everything that sounds good or valid is working in the real world. And in most cases you won’t be able to see that on the canvas. If you are coworking with experienced people from your business area they might tell you: “that never worked for me, so don’t do it” or “I’ve tried that in the past, it worked great for me”. But what you still don’t know is if the market is still ready to pay for your value or if it’s going to fail because the idea you have is going to fail because it always had failed in the past. Business Modelling is only working if you can validate your model – that means greatly simplified: call your customer or partner, ask them if they want to pay, charge them, adjust the price, see if it scales. In reality you’re still depending on experience. But where to get the experience?

Since Osterwald’s canvasses are structuring the concept of a business model very well they should be comparable. Most canvasses that I have seen also contain somewhat similar words like “end customer”, “traveller”, “media budget”, “AdSense”, “Affiliates”, “Local Heroes”, “mass market” etc. I think those words could at least be categorized if not completely reused. For many business this is even true for the value proposition perspective: A company that sells personalized cereals is quite similar to a company that sells personalized T-Shirts – except their Key Activities which in the first case means you have to operate machines or employ people to mix the ingredients and in the latter case to have a machine print T-Shirts. In the end both companies are profiling, attracting and keeping customers and ship a physical product, one on a weekly, the other on a rather spontaneous schedule.

I’d like to state that a main purpose of business model canvasses is to make business models comparable. So if you share your model with standardized captions with others you might discover patterns in what’s working well and what might be a rather bad idea instead. If 10 companies that assemble a shippable personalizable physical product have failed putting sponsor brands in the Key Partnership or Revenue Stream columns it could be rather obvious that you’re business model is also unhealthy if you do the same thing. Of course this example highly depends on the business area you’re working with: Adidas might be highly interested in putting their name on an individual sport drink package than Kellog’s on your personal cereal.

Fact is that some patterns are proven to work better than others, depending on industry, market environment, company size etc. So lets imagine you want to start your next idea’s business model canvas by putting phrases (using a certain category / taxonomy) in the right columns. As soon as VP contains [physical, personalizable] and R$ contains [branding] an alert bulb goes yellow to warn you that this combination has failed in ten other cases and only worked for two. You then can switch your view to those cases and see if you have really good reasons to prove the warning incorrect. Furthermore the system could learn from good practices and suggest ideas to new ones: if you have drawn most of the product / value parts but still don’t have an idea what to write into the R$ column (other than “advertising” which most people do first) the system makes suggestions (“branding”, “one time fee”) that it gets from similar models that have worked.