menu

SOCIFY.io

SOCIFY.io

Design / Development

Improve site conversions by adding social elements
to Ecommerce sites.

TRY IT FOR FREE

About Project

SOCIFY.io is an easy to install site plugin that provides social proof for your products or web page.

COPY/PASTE
CODE

as easy as seting up Google Analytics

FAST
IMPLEMENTATION

less than 10 mins

COMPATIBLE WITH
ALL PLATFORMS

it's added to the template files only

GOALS AND CHALLENGE

One of the big goals for SOCIFY is to make it easy to setup. Normally, this kind of setup requires developer time, but our goal was more then that. We wanted to make it easy for normal marketing/business person to be able to set it up with no coding experience. However, if that wasn’t complicated enough, in the case that it is the developer seting it up, we had to make sure developers have enough freedom to make full custom solutions.


Another challenge was scalability. Since SOCIFY is added to every page of an ecommerce site, it could be very easily added to a large ecommerce site. This means that it could go from 0 to 100’s of requests per second very very quickly.


Lastly, ecommerce sites need to be load quickly in order to maximize conversions. The last thing they need is a plugin that slows down the site’s speed. We had to make special care of this and often take the long way in coding something in order to be sure it will not affect the site performance.

WIDGETS

In order to provide the social proof that the product is wanted, SOCIFY supports the following widgets:

REALTIME POP-UP NOTIFICATIONS

Display instant notifications about events related to the product user is viewing.

Select which notifications are showed to which users: show all notifications to everyone, just show purchases happening 20 miles around the user, ...

INTERACT WITH SOCIAL NETWORKS

Allow users to communicate with other users with interest in the same product.

FEED WITH LATEST UPDATES

Widget that shows the list of latest updates that are happening throughout the site as they happen in real time.

It can be embeded at any place on your web page.

Look&Feel in all our widgets are fully customizable.

INTEGRATION WITH FACEBOOK FRIENDS

Show targeted notifications for users that logged in to your site with Facebook.

FEED WITH LATEST UPDATES

Widget that shows the list of latest updates that are happening throughout the site as they happen in real time.

It can be embeded at any place on your web page.

Look&Feel in all our widgets are fully customizable.

WHAT WE DID

After all of the requirements have been laid out, we set out to work. The work was split into the following parts.

USER EXPERIENCE

Very often, when users look at an interesting product/site they’ve never seen before, the first thing I wonder if “is anyone buying this?”, “is it for real?”. This is where SOCIFY comes in.

SOCIFY provides social proof that the product is popular. There is no better social proofing than seeing that other people are also purchasing the product, especially if those people are my neighbours or even better, my Facebook friends.

The 2nd problem is where to display these informations. Popup notifications will just pop-up on top of the site in a corner, so that’s not a problem, but what about the Feeds and Statistics that is acts as part of the web site. Normally, a developer would just edit the HTML and create the elements where the elements are to be inserted, but we didn’t have that luxury. We needed to complete the full setup by a business person.

What we did is created a way for all of this to be done with click&point method. Instead of using variables in JavaScript to let SOCIFY the name of the product, user just needs to click on the product title and SOCIFY will learn where is that title located, so that it can read it in future. The same goes for product price and even an image. User just needs to click on the image to tell SOCIFY where is it located.

But what about inserting widget in the page ? How do we solve that issue ? Well, we used the same principle. User just needs to point to the element on the page that is above or below the place where the SOCIFY widget needs to be inserted. SOCIFY will than use JavaScript to insert the widget into proper place.

Now that all of the widgets are functioning, user just needs to make sure the widgets fit in from the design perspective. We have create multiple templates to choose from with easy customization of size and colors.

Through all of this process, we haven’t lost sight of developers. They still have the ability to pass all of the data to SOCIFY through JavaScript, to manually insert HTML elements where Feeds & Stats will be inserted and to completely change HTML/CSS of the widget to just change the design or the whole behaviour.

COLOR SWATCHES

#282B2D

#78AE62

#EEEEEE

TYPOGRAPHY

BACKEND SERVERS

We developed the backend on cloud infrastructure with clusters in mind. This means that all of the elements in the system can be replicated and quickly scaled.

As for the software, instead of going the route of PHP, we decided to go with Python, Twisted and Redis. This has allowed us build an always-on software that can keep lots of data in memory for super fast access, unlike PHP which has to pull data from the DB each time.

This is all hosted on Amazon AWS with scripts set for auto scaling. This means the system will create new servers when the load increases and shut them down when no longer necessary to save costs. Amazon load balancers are used to increase the redundancy.

CLIENT CODE

This is the JavaScript code that is inserted on the site. First requirement for this is that it can be used with Google Tag Manager and similar. This is required because lots of ecommerce sites already use that tool and because it can be used to insert SOCIFY code to all of the pages on the site.

The other requirement was browser compatibility. Even though our UI could be designed using the latest and greatest technologies of modern browsers, we can’t put modern technologies on someone else’s web site and potentially making site issues. This means we had to use plain old Javascript that work in IE6. No JQuery, even no CSS animations. If animation was something that absolutely needs to be displayed (like fadein/fadeout), then those animations were written with pure JavaScript.

Communication with servers is done using efficient websockets. However, if browser doesn’t support it, we have built fallbacks using XHR and even JSONP for super old browsers.

RESULTS

The project was build from ground up. Starting with an idea, to a finished project. We have used prototypes and beta tests to help verify the idea and come up with further requirements.

Now that the project is functional and live, we can only thank our team of UX expert, UI designers, web and backend developers, Project Managers and Quality Assurance team.