Context
This past November, I attended Startup Weekend San Francisco, which brought together developers, designers and business folk to create a prototype from scratch over the course of a weekend.
We came up with Help Hookup, a Facebook application for connecting people in need of volunteers to those that want to volunteer. We ended the weekend with a bare-bones beta version of the application, but we're working toward implementing a richer interface soon.
I designed this prototype for the application's future interface, which can be viewed through the "Launch Prototype" link (at top). As research has shown that users prefer third-party applications that maintain the Facebook environment, I mimicked Facebook's look and feel while pushing the Help Hookup brand through design choices in the terminology, icons and user interaction.
Process: Navigation
In creating the navigation, I looked at popular Facebook applications to see if a standard had developed. I chose this layout, used in some of the well-known apps, such as iLike, for its simplicity. I based the navigation sections on Facebook's original Events application since Help Hookup's core functionality (connecting volunteer need to volunteers) is largely events-driven and users are already accustomed to this navigation setup.
Process: User Badge and Skills
I designed the user badge for multiple contexts: the Facebook app, the user's Facebook profile, and any of the user's personal sites (such as a blog). The badge includes a thumbnail of the user's Facebook profile picture, the number of volunteer events that the user plans to attend, the user's tally of "medals" (completed events), and the extent of "heroes" in the user's network (contacts in the application). To tie the design to Facebook and Help Hookup, I created icons consistent with those of Facebook but integrated Help Hookup's signature orange.
The user's skills are prominently listed because they are a means of connecting volunteer seekers to targeted volunteers (those having a necessary skill when it is required). Skills are searchable and listed as links so that users can easily find heroes with specific skills.
Process: Events
To create a symbolic visual cue, events are represented by the same icon throughout the application (seen previously in the user badge). They are displayed in a manner much like Facebook's events, maintaining consistency in design, but the information details are modified for the purpose of Help Hookup, such as including details for "need" and "skills." The button to sign up as a volunteer is worded "Hook Me Up!" to keep in spirit with the brand and build the application's playful personality.
Process: Most Decorated
Like events, the "most decorated" is denoted by the consistent "medals" icon (also in the user badge). Most decorated heroes are those having the "highest rank," or the most medals, from having volunteered the most. The column first shows the decorated heroes within the user's network, as they are relevent to the user on a personal level. The most decorated heroes around the world are in the box just below. By displaying the top volunteers worldwide, the application rouses feelings of competition and motivation, inspiring users to volunteer and constantly strive for new goals.