Making Of: Sharypic for iPhone


I’m excited to announce that the Sharypic iPhone app (free) is now available on the App Store!

You can learn more about it in this GigaOm article, but to give you a quick idea, the app lets you browse event photos and contribute your own pictures, both for private and public events.

This means you can use it as an easy way to gather all your friend’s photos from last night’s party, or ask it to crawl Twitter for the #olympics2012 hashtag and build a photo gallery for the games.

Solving the Chicken & Egg Problem

This dual functionality really is the app’s biggest strength: most photo sharing apps (and social networks in general) suffer from the chicken-and-egg problem: they’re only useful once your friends have joined, but your friends will only join if the app is useful.

Providing a way to browse public event lets Sharypic bypass this problem, since users are not presented with a blank screen anymore. Instead, they see the public event feed and think “Hey, this is pretty cool! Maybe I could use this for my next party/wedding/funeral” (ok, maybe not that last one).

Seeding an app with public content is not always possible, but if you can it can be a great way to improve a user’s first impression and avoid the dreaded blank slate.

So how did we get there? Let me run you through the design process (you can also see some more shots over at Dribbble).

Home Screen #1: The Film Strips

Showing the multiple event categories

My philosophy from the start was that the user needed to be hooked in the first 5 seconds.

Mobile users’ attention spans are extremely short, so I knew that the home screen would be extremely important.

The first iteration reflects this, as I tried to showcase all the features of the app in one screen: you would browse event categories vertically, then swipe horizontally to scroll through a category’s events.

But the Sharypic guys pointed out combining horizontal and vertical scrolling in the same screen might be a little complex for the user. And also, the film-strip like layout made it seem like a row’s photos were part of the same event, instead of each representing a different event.

Home Screen #2: The Tile Cards

Each event has its own card

The second iteration was much simpler and straightforward, but at the cost of hiding some of the app’s functionality away in a menu.

I was initially against this, as I wasn’t sure if users would ever find the menu. But eventually, I decided it was better to beautifully showcase 25% of the app’s features than cram all 100% of them in a single confusing screen.

Visually, I used a tile concept inspired in big part by Windows Phone. You’ll notice the site uses the same idea as well.

The end result was almost identical to the second iteration, except I removed those black bars to simplify things a bit.

The final iteration

Not all my ideas ended up being used, though. For example, here’s a concept for some help text that we didn’t implement for various reason (lack of time being the main one):

Help text can make onboarding easier

The Event Screen

Next up was the event gallery screen. This screen lets people browse an event’s photos, but also had to provide a way to contribute to them.

You can't miss that purple button

The gallery’s design process was pretty straightforward: in such cases, the choice is pretty much between a grid of photos on a white background, or a grid of photos on a black background. Anything more than that (textures, borders, shadows, or *shudder* coverflow) will probably be overkill and make things worse.

The bottom action bar was more of a challenge. I wanted to design something that would stand out, seem fun and inviting, and give some personality to the app.

It’s possible I overdid it, as the end result might be a little too thick and clunky. But sometimes aesthetics need to be sacrificed to other goals, and in this case the main priority is that users find that big purple button and tap it.

Adding Photos

Tapping that button brings up what is probably my favorite screen in the app: the add photo dialog.

The photo roll pops right up

It’s my favorite because it does something not many other photo apps do: show you your photo roll right there instead of making you jump through hoops.

Of course it also gives you the option to take a new photo, but we knew that people love taking pictures from other apps (Instagram, Camera+, etc.) so the photo roll was just as important.

The Menu

Let’s finish with the menu.

Now before you can accuse me of copying the Facebook app, let me say that yes, absolutely, I did copy the Facebook app.

Sometimes copying is good. The Facebook menu (or maybe we should call it the Path menu?) is such a great pattern that it was bound to become a standard.

So I don’t mind copying it, and I don’t mind giving credit where it’s due.

Plus, Facebook’s menu is blue, and mine is purple. So you see, they’re actually completely different!

Wrapping Up

Although launching an iPhone app on the App Store is definitely a big milestone, it’s only the start, not the end. The hard work starts now, and it will be very interesting to see how people use the app. And if you give it a try, I would love to get your impressions in the comments!


5 Responses to Making Of: Sharypic for iPhone

  1. Pingback: Making Of: Sharypic for iPhone | | iPhone And iPad News

  2. Pingback: Every Part of the Buffallo |

  3. Pingback: Promoting Yourself as a Designer | Folyo Blog

  4. Pingback: A Collection of Design Case Studies |

  5. Pingback: Michael Tsai - Blog - Findings 1.0 and PARStore

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>