About the project
Simple but innovative, user friendly, result driven and fully customizable Facebook apps for small businesses and agencies. Socialpuzzle provides a unique way to personalize your Facebook contests and their visual style without any coding or technical knowledge. With real time analytics it helps you measure the progress of your every Facebook campaign in a simple and effective way.
Part 1
Branding
We wanted to express Socialpuzzle’s personality through branding, so we took a look at its character —a playful, friendly and easy to use tool.
Lettering logotype
We chose a lettering style logo because it conveys the personal touch and playfulness this tool provides.
Handlettering logotype is done by Evgen Tutov.
Brand colors
Fun, inviting and feel-good colors communicate the spirit of Socialpuzzle.
Typography
The primary use is display use. That’s why we focused on legibility while deciding on a typeface.
Low contrast, geometric, highly legible sans serif typeface with big x-height for perfect legibility.
Part 2
App builder
Socialpuzzle provides a unique way to build and personalize your Facebook contests and their visual style without any coding or technical knowledge.
Prototype approach
While designing a layout we had to consider the fixed dimension (810px) of the Facebook tab. They were the starting point of building a fluid layout.
The rest of the content is displayed depending on the user’s screen size.
Application builder
With the Editor, the user can manipulate all the app’s features, such as fonts and colors.
Endless possibilities
All these features allow users to build and style apps in any way they choose. Freeeeeedom!
Responsive preview
Facebook tabs are usually not visible on mobile displays. We adjusted our apps and made them responsive on mobile devices.
Ui elements
UI elements are organized according to the order and importance of actions users need to take when building their app. Our intent is to always guide our users. No question marks here.
Image uploader
Except consistency, we find it is necessary to give feedback to actions the user makes within the interface.
Consistency matters
Besides focusing on the primary user actions, it was important to maintain UI elements consistency to keep the users feel at ease.
Iconography
Every app has its own custom icon. We wanted to make them fresh, vibrant and strongly identifiable with each app’s purpose.
“Super admin” icon is created only for our internal use.
Progress flow iterations
Iterating really helps us filtrate all the unnecessary stuff that might burden the user and strip it down to what the user really needs.
It is always freakin hard to find a perfect solution, so you have to iterate like a motherfreaker.
Campaign statitstics
UI interface icons are unambiguous, straightforward and distinctive as the actions they represent.
User oriented actions
Usability testing helped us differentiate the importance of each UI element and organize them hierarchically.
Part 3
Website
Presentational website created to showcase all the features and possibilities the Socialpuzzle tool provides.
Responsive preview
UI interface icons are unambiguous, straightforward and distinctive as the actions they represent.
Every app you’ll ever need
We build Facebook applications so you don’t have to. Create contests, reach fans, track performance simply and effectively.
Try Socialpuzzle