42

Solutions

Web Apps. Mobile Apps. Awesome!

Our Work

As a demonstration of our prowess with iOS 6, we assembled a demonstration photo voting app, complete with social networking integration just to show what we could do.

Punk or Metal?!?

Punk or Metal Launch Screen

We’ve long been believers in the mobile app space, having put together several of them for the Android platform, but had not yet done any work we could show the public on an iOS app. To have something that we could demonstrate to clients, we assembled our first proprietary iOS app, Punk or Metal?!? to do just that.

The Idea

Punk or Metal has been a bar game that the partners at 42 have played for years. It was a simple conversation starter for when things might fall silent. It was as simple as pointing at a brick wall and asking, “Punk… or metal?” referring to the music genres. One then had to pick (they couldn’t say both) and then justify it using cultural examples of why it would be metal.

we wanted to put together an almost fully fledged social network based around photos optimized for the mobile experience

Our idea was to construct a photo sharing app into which users could upload photos from their own phones and ask the community to once and for all determine whether the content in their photo was “punk” or “metal”. Additionally, we wanted users to be able to comment on individual photos, justifying their reasons why, for people who had uploaded the photo to receive a notification that a comment had been left, and for those who had already commented to be notified when others also commented.

In short, we wanted to put together an almost fully fledged social network based around photos optimized for the mobile experience.

The Challenge

Though the wireframes for the app were relatively simple, the app itself would require a fairly complex backend and page flow scheme to navigate from one photo to the next seamlessly transitioning between new photos to judge, notifications, their uploaded photos, and comments. Lastly, handling the potentially massive load of serving user images had to be considered so that server interactions were not slowed by static data.

It would require a sophisticated knowledge of how to properly construct a load resistant backend to make the server capable of even the most basic usage. But it would also require a fine grained appreciation of user experience design to make the usability clear to almost anyone.

The Process

First, 42 utilized a custom backed in written PHP to handle the entire server architecture. This server handled all photo uploads, downloads, and comments within the app. Additionally, jobs were set up to batch upload all new images to our Amazon S3 service to handle the serving of static data to the app and change the URL within the system and notify the system that the image was then ready for serving.

Once these were done, a notification queue was written to dispatch events to the notification process that would alert iOS to the fact that an event worthy of the user’s attention had taken place and bring them back into the user experience.

once the user had been informed of what they could do, the hint screens were never seen again so as not to become an annoyance

Once that was complete, the data model for the app was created to supply the data to app itself and a caching scheme created so that users would always have new photos to rate even over slow internet connections. Then, each screen was painstakingly designed to represent the look & feel of the app we had decided: an homage to a guitar amp. These were then wired together based upon the different possible workflow states.

Different hint screens were also constructed, to provide users with an in-app tutorial to help guide them through the first time they did a different task. The first time a user went to vote on a photo, they were given a brief overlay explaining exactly what punk or metal were supposed to mean. The first time they voted, an animation played instructing them how to swipe to get the next image. The first time one of their own photos appeared from their photo gallery to vote on, a message appeared explaining that it would only be shown to other users if they themselves first voted on it. But once the user had been informed of all these things, they were never seen again so as not to become an annoyance.

Lastly, Facebook was integrated to provide a ready store of user photos to vote on. Upon logging in using their Facebook account, a user’s public photos would be requested and uploaded to the Punk or Metal servers where they would be queued until the user decided to share them with everyone else. This allowed for a seamless introduction of new photos into the network while providing users a fine tuned control over what was shared with others, an important consideration given the renewed interest in internet privacy.

The Result

Because of a successful pre-launch push utilizing the app’s Facebook page and community that had built around it, Punk or Metal gained over 2,000 users within the first three months. It also had a respectable retention rate given the type of app it was and the lack of marketing that was put into it. All in all, we were pleased with the general reception and received good reviews from an Apple UI specialist at the 2013 iOS 7 Tech Talks in NYC for the use of the guitar amp metaphor to carry the concept.

But, perhaps more importantly, it has demonstrated to clients just what 42 Solutions is capable of, especially when what we’re doing is just something on the side.

42 Tags: , , , , , ,
Content for class "bottomYellow" Goes Here
Content for class "bottomBlue" Goes Here

42 Solutions

Working with 42 Solutions, you’ll find that it’s not the technology that’s important, it’s the idea. Regardless of whether your company is based on proprietary software or open source, we will find the right tools to get the job done.

Invite us to your office and we’ll send a pair of consultants armed with laptops and bright ideas, ready to solve your problem and offer solutions. We pride ourselves in getting to know how you do business and integrating into your process.