Facebook App Design

InForFree

InForFree is a Facebook app that allows users to get into nightclubs for free or at concession.

http://apps.facebook.com/inforfree

http://www.livingsocial.com - This has *no relation* to our app, but it demonstrates the way a user uploadable image is set as the background with the primary content on top of it.

Please see the Balsamiq mockups attached that demonstrate UI layout.

** Only 1 page is required to make it past qualifying round **

This app has a very simple function: Allow users to sign up for the "guestlist" or "cheaplist" for a nightclub. The primary goal is for the user to complete the signup form.

--
Overall Layout
--

Bear in mind that this is a Facebook Application and thus sits in an iframe inside of the standard Facebook layout.

Standard canvas width is 760px.

These elements will appear on all pages.

Background:
User-uploadable. All other elements sit "on top" of this background and so should stand out from it.

A sample background is required, please use something based on the logo/name of our test client: http://www.midnight.ie/

Header:
Also will be uploaded by the user. A sample header can be seen on our current app, although we'd like something of higher design quality.

Info bar:
This sits below header, and shows the events that the user has signed up for

Main content:
Should be clearly defined as being 'on top' of the background.

--
Select Club (Landing Page)
--

This page displays a list of clubs to the user. They are displayed as club logos (the 'Dandelion' logo is shown in the mockup but they will all be different. It is not required to design these logos, they will be uploaded by the user).

A dropdown is placed below each logo which allows the user to select the date they want to attend. Selecting a date will bring them to the 'Event Page'.

The goal of this page is to present a list of nightclubs and dates that the user can select in order to move onto the next stage (viewing the actual event).

Despite being our primary landing page, we're not entirely convinced that the UI layout we have designed is the best, so we are open to modifications to this if you have a better idea. Otherwise, what's presented in the mockup will do.

--
Event Page
--

This page shows the "flyer" (cover) image for the event and presents buttons for the user to sign up for either guestlist or cheaplist. When they select one of these buttons, there is a popup signup form to be completed.

The flyer image will be uploaded by the user and a placeholder can be used, design is not required.

Please provide a "greyed out" version of the 'Guestlist' button (to indicate it is not available)

The signup popup as detailed in the seperate mockup is included in this page.

Demographics are mixed gender 18-25.

Design should be functional and goal oriented: Sign up for the events.