Matt Reed
Switchcam promo shot
Responsibilities: Product Design, Project Management, Branding

Tweet Pics

Facebook Camera for Twitter (personal project)
Responsibilities: Product Design, Project Management, Branding

The Gist

TweetPics is an iPhone app that I concepted and designed in 2012. It is the Facebook Camera for Twitter. All tweets containing images are filtered and brought into the TweetPics timeline. You can post pics, favorite, retweet, view fullscreen, and search for pictures all over the world.

The Problem

The Twitter community posts thousands of pictures a day. If you're like me, you post images all the time. Pics in beautiful places, of amazing friends, or delicious food. But there's no way on Twitter.com to see all the images I've posted, because they're fragmented across Instagram, Twitpic, Yfrog, and Twitter's own image service. If you like a picture I post, it's great if you favorite it to come back later or show some appreciation, but I thought your Tweeted pics needed a nice home. So with the help of my good friend and iOS dev extraordinaire, Andrew Carter, I came up with Tweet Pics.

Guerilla Research

Before deciding to throw hours and hours of my free time into this massive expedition, I did a little homework. I asked around to gauge interest. I did some twitter searches to see if other users were iterested in this type of app.

I found that not only did Andrew and I have an interest in this type of app, but so did the Twitterverse and everyone I questioned about it.

The Process

My initial idea for the app was a bit lofty. I thought of aggregating all images posted across all of your social networks, and even drew out some ideas. After some thought however, it seemed to bring a lot of complexity that could confuse the user, and was overcomplicating the need. Thankfully, I was able to see this from just a few sketches.

Inital sketches of Tweetpics

So I went back to the drawing board and came up with an app that only operated within the Twitter ecosystem and would benefit the community (c'mon, I know you love those retweets).

A quick and dirty sketch or wireframe is often enough to get the discussion going on IA. You’ll notice that I ended up moving Search (middle phone) to the tab nav bar at the bottom

With a more focused vision in mind, and the basic features agreed on by my developer, I was able to start visuallizing the ideal picture-based Twitter client.

A quick and dirty sketch or wireframe is often enough to get the discussion going on IA. You’ll notice that I ended up moving Search (middle phone) to the tab nav bar at the bottom
Onboarding screenshot 1
Onboarding screenshot 2
Onboarding screenshot 3
Onboarding screenshot 4
Onboarding screenshot 5 - Sign in

Onboarding

When you first open the app, you're greeted with the onboarding screens. I designed the onboarding process to introduce a user to the app’s features (in case they didn’t read the description), and also to convince them to hand over their Twitter login credentials. Their account info is sensitive, so establishing trust early was key.

Given that this is a two-man side project, I also wanted to constrain my design to something easily implemented.

Timeline

The timeline is essential to any Twitter client, along with some tweet display constraints such as showing the user, time, message, and of course we needed the image. I wanted to show some form of popularity for each image, so naturally you'd expect the Favorite count to be a great indicator. Unfortunately this is not an option with the current Twitter API (I'm still a bit bitter). So I was forced to settle for retweet count. I hope one day Twitter comes around and allows favorite counts in their API, and I'll make a fix.

Search

My first time watching a user search with the beta version of the app was horrifying. I immediately realized the complexity of searching within Twitter. Users need to find people, places, saved searches, trending topics — the list could go on for days. Strangely, Twitter’s own app handles this by separating search into multiple fields separated by tabbed nav. I wanted to keep search in a central location, so I kept hunting for a solution until I came across Mark Jardine’s implementation in Tweetbot. It’s a clever way to help the user find what they want without having to add lots of symbols or waste time editing.

Overall my approach towards designing Tweet Pics has been to make it delightfully simple - which meant parting with neat ideas like those above that would complicate the user experience, help the users get what they want - whether that's downloading an image or finding a friend, and benefit the existing Twitter ecosystem - get people retweeting, favoriting, and sharing. Oh, and make it look good. That too.

Results

We only just launched the app in December, but initial reactions have been very encouraging. I'd be honored if you'd give it a spin and let me know what you think can be improved!