JLS Jukebox Facebook app

7 days to build, limited budget, scalable architecture and one of the biggest boy bands in the world? Sure! Let’s go, JLS!

This one was a fun build, Facebook threw up a few API surprises and ‘Send Dialogue’ plagued this project all the way through.

We used Soundcloud to power the jukebox interface, via the playlist API. Users have the option to login with Facebook to create their own playlists Jukebox, or just continue to listen to the album as it is.

We put sharing at the heart of this, users can post their jukebox with up to 3 friends, and add a message to send with it. There’s an option to post it to their wall too.

We added a splash of identity by having the user’s Facebook profile picture as the artwork on their customised Jukebox.

This was a massive front end challenge too. For a young audience we wanted to keep the interface clean, all above the fold and bold, with the user journey seamless. We used overlay sliders for a lot of the UX. I think it paid off

Here’s some images from pre production.

 

My rubbish first sketch of the Jukebox (ha ha), working out how to make a interface make sense and not clunky…

Sexy buttons… Super sexy buttons… I really can’t stress how important buttons are to me.

Cute icon to go along with the app

And another awesome one which didn’t make it (WORLD EXCLUSIVE)

And there we go. One of my favourite apps so far. Check it out here. Was stressful but it came out super slick, kudos to my ninjas who made it happen.

Chronos/The Wanted, another Fb project

Wrapping up another ‘chronos’ project for The Wanted. Not sure what to do with this app project yet, they’re so easy to do and build and work really well; just takes time to put some steam behind it to make it in to a sucessful product.

The layouts conditioned so existing fans see share options with Facebook and Twitter, and non-fans see a prominent ‘Like’ button to like the page.

I like how this one turned out though! I’m beginning to love the dark ‘Like’ buttons.

Suggestions welcome. I know i’m rubbish at page folds…

The Wanted ‘Postagram’

This app was cool to do. We used the Instagram API to pull in The Wanted’s recent photos, then through Facebook let users pick one, write a message with it and send it to friends, sort of like a summer postcard.

Haven’t launched it at the time of writing, so i’ll include the link when it’s live. Trying to work out if we can use ‘Postagram’ legally with it, but you can see some of the word in progress.

Did the UX on this one and app production. Love Instagram!

Update: This is live now! Go have a play

 

Lipsy ‘Wall Of Fame’

Pretty simple photo upload application for Lipsy London (Clothing). Users can upload their photo to be entered on store’s ‘Wall Of Fame’. The photo also goes to a photo album on their Facebook profile.

They can share their entry on their wall, or Tweet it. The CMS allows some pretty basic filtering per store and per session.

I did production and UX on it, and the lovely designers at Lipsy did the design its self. Check it out

Chronos

May 2011 I started putting together a new web app variant dubbed Chronos, based on the idea of rewarding Facebook page fans with content when a variable is met. This was a much simpler build than some previous frameworks i’ve worked on, and based purely on PHP and running calculations via data sourced from Open Graph.

We were initially going to just build this to reward fans of a page when it gets to a certain number of ‘Likes’. Then we realised the potential can go further and Facebook’s Graph API objects lent the app more potential.

We now have 3 core versions developed:

  • Like‘: The standard intended use of content revealing when a page gets to a certain number of ‘Likes’.
  • Checkin‘ Revealing content (a discount code for examaple) when a Place gets a certain number of checkins.
  • Counter‘ Really simple countdown timer to reveal chronological events at set times. (reduces dev requirement)

The concept is really simple, and was inspired by Battlefield 3′s Facebook page which rewarded fans with exclusive new game trailers when the page got to 1m ‘Likes’. The target was ambitious in the time scale, but the idea was simple and great. A lot of Facebook developers are trying to fly fancy builds all over the platform, but you really don’t need to. We developed this app so we can quickly (thus cheaply) serve clients great solutions, or offer it as a source licensed model to others.

Features:

The whole app is driven from 1 config file with 7 variables, which in turn programmes over 20 template objects. The Graph API also allows any objects to be pulled from the standard graph.facebook.com strings.

In general, the standard application involves:

  • A ‘Like’ button, which when clicks automatically hides. This only shows for non-fans of the page. Alternative content can be set for existing fans to incentivise sharing the page more
  • A % driven meter which displays progress in real time. This is all just CSS so can be styled however
  • Share, Tweet and Invite buttons to incentivise people to share the page and post to their wall. The information here is all determined by the config too, giving progress % data in the updates.
  • The Checkin version has a Google Map image which is automatically pinned and set via the location returns from the Graph API – no need to develop this, it generates its self as soon as you set the Place ID.

That’s pretty much it! In terms of what’s revealed when the targets reached, it can really be anything – Video, downloads, streams, discount codes, competition forms – the better the reward the more galvanised people are to collectively achieve it.

We’re just about to break Chronos’ virginity on a couple of campaigns in Beta, so we’ll see how this goes. I’m expecting it to change the world, but then it was never meant to. We developed this so it can be quickly and cost effectively deployed and just ‘work’.

Feel free to share any feedback! We have demo’s live but we’re keeping this in private testing for now.

Follow the Lucid Dev Tumblr for updated project examples.

Chimera

Chimera was a social app project I started developing early 2011. The objective was to build an app framework which could be deployed in a short amount of time, be cheap to adapt, and have the flexibility to serve multiple instances.

Essentially the application allows a social login function where users sign in with Facebook, Twitter or Foursquare, and can experience content alongside commenting and inline tweeting. We built location in too, incorporating Facebook Checkins and Foursquare; to give the ability for clients to reward or serve content based on various parameters

The app it’s self runs on Zend, is robust and compatible. It can be set up via 1 configuration file, and be adapted through Smart PHP in various templates. All in all it can take as little as 20 minuets to get it going, and can be framed in a Facebook tab, standalone on a site, or developed for mobile to run in apps or mobile browser.

We started with intending the application to serve a richer form of redemption of music downloads or album streaming, and the first version came in the form of a video experience for Hurts. Other variations prove more powerful though, some ideas for implementation:

  • Creating a chat environment for live streaming
  • Creating a location based treasure hunt (you can add multiple checkin conditions)
  • Giving a special offer or content to users who have checked in to a location
  • Creating an album listening party

Future version updates:

  • Building the Twitter functionality on to @anywhere API
  • Giving the option to condition entry on user ID to merge campaigns with promotions

Check the demo out here, we’re doing a few more versions to display in the next couple of months before starting work on v2.

fyi. The name Chimera came from the Greek mythological creature, credit goes to Nick Collins for helping out with the decision. The theory behind it is from the creature having many heads and 1 body, and the application have many variables of usage all based on 1 core set of programming.