Degordian loader
Facebook applicationdigital advertising

Socialpuzzle

Socialpuzzle

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.

human size
dwarf size
mosquito size

Handlettering logotype is done by Evgen Tutov.

Brand colors

Fun, inviting and feel-good colors communicate the spirit of Socialpuzzle.

Branded icon style

Flat icons are not exactly breaking news, but we always try to put our own spin on things and incorporate our own unique style.

Typography

The primary use is display use. That’s why we focused on legibility while deciding on a typeface.

Museo sans regular

Low contrast, geometric, highly legible sans serif typeface with big x-height for perfect legibility.

Museo sans regular
Museo sans bold
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.

Primary actions
Secondary actions
Tertiary actions

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.

Simple tool icons

UI interface icons are unambiguous, straightforward and distinctive as the actions they represent.

“Super admin” icon is created only for our internal use.

Ui iterations

To achieve the best usability result, we had to iterate the UI elements as well as their color, positioning and style.

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.

Original Image
Modified Image

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
Go to top
best websites of the world