drop – How We Built a Photo Sharing App

We recently shipped an app, for our clients at Monkey Island Inc., that was so much fun we can’t help but share our story. The app is called drop, and is a location-based photo sharing app for iOS. In this post, we’ll walk you through our app building process, some of drop’s coolest features, and speak to the technical challenges we encountered during the development process.

You can get drop here for free!

WelcomeScreen

drop was so much fun to build!

The team at Monkey Island Inc. set out to tackle the photo-sharing app space by asking, “What if the photos you share could only be seen by users immediately nearby?” With this core concept and mockups they approached us to build their product. Before we wrote a line of code, we sat down with them to establish a set of user scenarios they’d like drop to address. Questions like, “Where would someone use drop?” and “What problem does it solve?” helped us all get an idea of what screens and features drop could have. From there, we put together a series of mockup flow screens showing all the potential screens and pathways users would take.

A huge part of our app creation process revolves around building an interactive prototype. Static mockups and flow-charts do a good job at showing user pathways through an app, but they don’t do a good job of determining if individual screens make sense in tandem. There’s just something special about touching and tapping through an interactive prototype. The drop prototype helped all of us quickly iterate and test ideas for button placement and features.

FlintoPrototypeNewDrop
NewDropCamera

Before and After – Building an interactive prototype helped all of us establish user flows, button placement and features.

Since drop is a high-performance app with photos, users and all sorts of complex data, we knew we needed a powerful back-end database. After a little searching, it became clear that Parse was the best choice. For drop, Parse was a huge cost saver compared with setting up a traditional back-end because it is 100% free for less than 1,000,000 API hits per month. Additionally, Parse provides great documentation and tutorials, cutting down on the amount of code we had to write. For this version of drop, Parse helped us handle everything from logins and logouts to password recovery and photo storage. With the screen and database architecture in place, we began building features.

ParseDatabase

Parse provided us a powerful, scalable, cost saving back-end.

At it’s core, drop allows users to share photos on a map, and see other user photos when within 500 feet. We wanted to give users strong visual clues for what was unlocked or locked. To do this, we made unlocked drops purple, locked drops yellow/green and showed a search radius overlay.

InsideOutside

Photos shared in drop can be seen when you’re within 500 feet.

In addition to viewing drops on the map, users can see nearby drops in a horizontal feed. This was, without a doubt, the most difficult feature of drop to develop. If you take a second to look at social networks like Instagram, Facebook, LinkedIn and Twitter, you’ll notice all have vertical feeds. Apple provides developers a lot of great tools for pulling text, photos and video from the web and displaying them in a vertical scroll feed. To produce the horizontal feed, we had to write a quite a bit of custom code. After a lot of hard work, here’s the result – a smooth scrolling horizontal feed that a) displays dynamic content and b) always lands at the exact center of a photo.

HorizontalFeedA horizontal photo-feed? Yup.

We spent a significant amount of energy focusing on how a user creates a drop. We ensured that the drop button was front and center on both the map and the feed, so creating a drop is almost always one button press away. After snapping a photo, the user receives an animated message that confirms the drop was a success and encourages users to share.

NewDropFeed

Telling the user that their drop was successfully created.

With photo-sharing apps, user expectations are high when it comes to app ease of use and functionality. To gain any sort of traction, the guys at Monkey Island Inc. knew that drop needed social features that users come to expect in modern apps – favoriting and sharing on other networks.

DropDetailView
SocialShare

Adding those finishing touches that everyone comes to expect in a photo-sharing app.

Now that drop is on the App Store, we’re already working on feature adds and updates. In the meantime, take the app for a spin and let us know what you think!

One thought on “drop – How We Built a Photo Sharing App

  1. Aman Reply

    Hey Kurt, this was an awesome article! I love that you actually went through the mockups and important questions/steps that were answered/taken. I’d love to hear more about your experiences. Shoot me an email sometime!

    -Aman

Post your thoughts