Travis Vocino

Sales Tools, Inc. was looking for a stylish jQuery interface and sales homepage for their Free2Chat application — a call-to-action app that lets users connect to site owners.

The Homepage

The overall style is simple and clean but with ample color.

I used Julia Roy for the customer service representative in my mockups. I’m sure she would be cool with it.

I knew I wanted to show potential customers the widget on the homepage without being intrusive. The Free2Chat widget gets displayed directly to the left of the prominent call to action. This widget actually works and and allows potential customers to interact with it from the perspective of how their users would when it gets placed on their own site.

Not to mention, since really the whole purpose of Free2Chat is to allow you to connect to your customers, why not use it ourselves?

User Conversion

There’s also a second call to action button (in the same style for uniformity) in the footer of the homepage. “Are you ready… now?”

After clicking the call to action button, you get moved over to the registration form. Simple, structured forms are key. Generally if you’re trying to get high free conversions you want to keep the number of fields to a minimum but don’t be afraid to get what you need from the user as long as you have it structured cleanly.

Form design is something a lot of UI and UX developers hate. I understand the reasoning but this particular project went well and I think we got a good result for the registration form here.

It’s the little things that make a boring registration page interesting. The password strength indicator uses a color palette that meshes well with the overall color scheme. Don’t settle for default jQuery styles.

Below our registration page, we reassure the user that everything will work out and that if there are any issues they’ll be able to easily get the support they need. This is much more important if we were collecting credit card information at this stage, for obvious reasons. It’s important to keep in mind though, as a general rule.

Also don’t be afraid to tell your potential sign up that their trial will expire and they’ll need to pay. It may seem counter-intuitive but you’re basically qualifying the lead ahead of the time, rather than supporting a user that will probably never pay if they aren’t truly interested in evaluating your software.

Remember, Cost of Service includes free and paid users.

The Dashboard

I wanted to design a system where users could customize their widget as much as possible while still maintaining the integrity of the embedded code on their sites. To do this, I set up some simple variables for the CSS styles and allowed them to choose those colors.

Some forethought is necessary when doing this. You don’t want someone getting frustrated because the don’t understand what field corresponds to which area of the widget. On fact, it’s better to have so few choices that it becomes self-explanatory, as I hope is the case here.

If you have a very savvy user base, feel free to allow them all the freedom in customization in the world. I happen to love when I can choose to embed a widget completely unstyled and hook up my own CSS. That was not the case here, though.

Giving users several default examples to start but allowing them to customize those defaults let’s them increase complexity as they learn.

I went ahead and created some default themes they could easily plug in and gave them sappy names like Earth and Ocean just to make it interesting. This also allows someone to come in fresh and immediately see what this customization deal is all about simply by clicking on the pre-loaded theme buttons. Then when they feel comfortable they can start using the color picker or even hex codes to plop in their own colors.