Wireframes: Top Pix

Top Pix was a photo contest mobile app that I architected a few years ago (which was developed for iOS and Android). The app 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).

After creating and getting approval for the flowchart, I started working on the wireframes for the app. I used Balsamiq ( http://balsamiq.com/ ) to create the wireframes below. These were used by both the client (for approvals) as well as the graphic artist (for creating the comps, two of which I included at the bottom of this post).

toppix-ia-1

This is the splash screen (the default image) that appears when the app is initially loading. I document it as it’s own view, to make sure that everyone is aware what it can and can’t do — i.e. it can’t animate — it’s just a static screen.
The home screen shows all of the pictures that have been submitted, ordered depending on the button that is pressed in the bar at the bottom of the screen (this functionality was also covered in detail in the flowchart post).

Latest pix – reorders the list of pictures by date submitted
Top pix – reorders the list of pictures by total votes
Favorites – reorders the list of pictures showing your favorites first
* there should be a highlight around icons that are favorited


toppix-ia-2

The About screen contained information about the company and promotion (On the Spot Development).
The Photo View (or photo detail) was accessed by tapping a photo thumbnail from the Home screen. There were buttons to go back (to the home screen), go to the Photo details (the question mark icon), mark the photo as a personal favorite, share the photo via Facebook or email, or flag the photo as inappropriate.

Tapping a picture toggles the navigation on/off
Swiping left/right goes to the previous or next photo in the sequence (ordered the same way as the thumbnails on the prior screen.)


toppix-ia-3

The Photo Details screen showed textual information that had been submitted with that particular photo (including details about the submitter), the total times that image had been favorited, and a back button to go back to the Photo Detail screen.
Sharing a photo popped up an action sheet with buttons to share via Facebook or Email. (You can tell the age of this wireframe, because it was created when Twitter was in process of switching to OAuth, which made Twitter integration problematic.)


toppix-ia-4

For the Camera screen, a single tap (tap on the screen) functionality was implemented to capture a photo. Instructions appeared over the camera feed, which then faded after 2 seconds.
Upon taking a photo, options appeared over the preview of the captured photo allowing the user to retake the photo or submit it to the contest. (The photo was also saved to their camera roll for later editing.)


toppix-ia-5

When a photo was submitted to the contest, a form would appear asking for text information (this would populate the Photo Details screen). The photo title and a description were both needed to submit a photo.
After a photo had been submitted, it was still available as a thumbnail when selecting “My Pix”. Tapping it would allow the user to edit the text for the photo or share the photo via Facebook or Email.


toppix-ia-6

The Edit Photo screen (mentioned above) allowed the user to change the text for their photo.
The My Pix view was changed to be different from the regular thumbnail view (i.e. collection style view) because users would typically have less photos that they submitted. It was changed to be a tableview, giving them a quick view of the number of votes that each image had — to make it easier for them to know which ones needed to be promoted via social media.


toppix-ia-7

Once these wireframes were complete, they were handed off to Troy Harrison of Valiant Media to create the designs:

toppix-comps

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>