Flowchart: Top Pix


A few years ago, I architected and developed a series of photo contest apps. The main app was called “Top Pix”, and it let users take photos (or select from their Camera Roll) and submit them to a monthly contest. The users with the highest rated photos would then be able to win prizes (an iPad or iTunes gift cards).

Because of the success of the first app (Top Pix), three other apps were built: Top Dog (focusing on pictures of dogs), Top Dish (pictures of food), and Top News (local and current event photography). There were also “lite” versions of each app that had integrated banner ads.

(The app promotion period is now over, and I received permission from my client to write some posts describing how the app was designed.)


I used Balsamiq (http://balsamiq.com) to create the wireframes as well as the flowcharts. My client was a big fan of cocktail napkin sketches, so this was perfect as a design tool.

The main flowchart showed the default views that would be created.

Splash screen – the default screen that is displayed on app startup (specifically called out because the graphic designer used these documents as a guide to what he needed to create).

Home – the main screen with the navigation toolbar to access the other features of the app. It also defaulted to the “Latest Pix” view described below.

About – this was information about the company and the promotions — mainly used so people would understand that this was a legitimate marketing promotion tool.

Picture views:
In iOS terms, right now these would be called CollectionViews. However, back in 2009, these were custom scroll views of thumbnails, sorted by four different criteria.

Latest Pix: this is the thumbnail of photos ordered with the most recent photos first. (If “top pix” was the default, new photos would likely not be seen or voted on, and this seemed to give the best chance for people new to the app to get votes — with an added advantage that the home screen was very dynamic with new entries constantly being submitted.)

Top Pix: this was a view of the thumbnails ordered with the top rated photos at the top.

Favorite Pix: this was a view of the thumbnails of only the photos that you (as the user) voted for.

My Pix: finally, this view showed all thumbnails of photos that you submitted to the contest, along with functionality to use the camera or submit a photo from your Camera Roll.


When a thumbnail of a photo is tapped, the “Photo View” view appears. This is a full-screen version of the photo, with buttons for favoriting (i.e. voting), sharing (via Facebook, Twitter, and email), or flagging it as inappropriate.

When it came to flagging an image, we decided to let our (very active) user base manage flagging inappropriate images. We would then get an alert and decide whether to un-flag the image (which sometimes happened when users in the top of the running tried to kick out their competitors). Once we “un-flagged” an image, the flagging would still be enabled, but only increment the number of flag requests on the server (so we could see how many times people tried to kill it).


My Pix had a special process flow, because we needed to make sure users would agree to our terms before submitting. We didn’t want to hit them with it multiple times, so I made sure the server would keep track of their acceptance and only ask them once. However, if the terms ever changed, it would ask every successive user to re-accept the terms before submitting new images.

For my next post, I’ll go into detail about the wireframes themselves…

One thought on “Flowchart: Top Pix

  1. Pingback: Wireframes: Top Pix | mobile app design

Leave a Reply

Your email address will not be published. Required fields are marked *