Category Archives: Portfolio

Color palette for charts

When we redesigned the Reports section at Recruiterbox, one of the things we wanted to do was to make them look “nice”, especially the charts. Until now, we’ve been mostly using the default colors provided by Google’s charting library, which looks so BAD! Ok, “bad” is subjective, it at least doesn’t go well with our color palette.

But how do you come up with so many colors that look nice on charts, while being consistent with your color palette?

FUNDA

When I started researching, the first thing I learned was that there are three different types of charts and there are corresponding ways of choosing color palettes:

  • Sequential
  • Diverging
  • Qualitative/Categorical

Sequential and diverging palettes are used to represent values that vary continuously, from low to high or high to low. E.g. population density (sequential), altitude (diverging). However, these are mostly relevant when the values are represented on a map, and cannot be conveyed by something like the size of a bar in a bar chart.

Categorical palettes are the ones that are used to separate items into distinct groups. This is the kind of data we primarily represent in our reports. As such groups have no inherent order, categorical palettes typically contain colors of different hues.

So, these are the two criteria I derived for designing a categorical palette:

  1. The colors should be distinct enough from each other
  2. The color should feel like they belong to the same family (some of them should not stand out among others)

ITERATIONS

Alright, moving from the funda part, the next challenge was to come up with enough number of colors required for charts that satisfy the above criteria. I’m happy that I came across this article from a company called Viget, about how they solved exactly the same problem.

Following the same process, we came up with our new palette after multiple iterations between me and Sneha (our visual designer). And it was fun to watch people going crazy looking at the iterations.

color-palettes-raghu-comment-slack

Selection_731

For people who are curious about the iterations, here you go:
https://www.dropbox.com/sh/zmz7zy1781zfbe1/AABwJL0wUmHQOKtNzBMsoiega?dl=0

END RESULT

So after all these tweakings, this is the new color palette we have come up with. I’m super happy about the result. We’re yet to put it out on charts with real data and see how it works though.

color-palette-all

Redesign website without affecting SEO

At Recruiterbox, one of the things we wanted to do for a long time was to redesign the front website. The site was done in 2012, but within a year or so we realized the design didn’t give the feel of a new-age company (*cough* flat UI *cough*). However, we were busy building new features for the app, and couldn’t get enough time to work on the redesign.

Finally, last year, Girish made an attempt to do the redesign from scratch. All of us were happy with the new design. The work was almost complete, and was ready to be launched in a few days. However, one thing we were very well aware from the beginning was that SEO would take a hit from the revamp. (We had been scoring good on SEO. recruiterbox.com appears in the first page of results for most of the targeted keywords, especially in the US, which is our primary market). But, towards the completion, we realized that the risk would be too big – SEO has been the biggest channel for sign ups consistently.

So we parked the idea for a while, thinking of revisiting it later. And that revisiting didn’t happen until last month. By then we were sure we didn’t want to disrupt the SEO abruptly. So we came up with a plan to go about it one step at a time, keeping a close eye on analytics for every step we take. This post explains the process step-by-step,

First of all, this is what we wanted to achieve with the redesign:

  • Good typography
  • Responsive design
  • Flat UI
  • Brighter colors

Step 1: Fix typography

This must be pretty straight forward, at least we thought so. We were clear about the choice of font. Proxima Nova is what we have been using for the app, and we wanted to keep it consistent. Undoubtedly, it’s one of the most elegant fonts.

So we just had to get the font from Typekit, include it in the base template and change the font-family in CSS. Simple! But once the changes were deployed, we were shocked to see the Google Pagespeed score drop drastically. One would expect font services like Typekit to serve web fonts as optimally as possible. But it doesn’t seem to come anywhere close to being optimal.

We found a hack to work around this, but we put it in the task list, as we didn’t want to get stuck in rabbit holes slowing down the redesign.

Step 2: Upgrade to Bootstrap 3

We were still using Bootstrap v2.x, so our first step was to upgrade to 3.0, which is responsive by its nature. Thankfully Bootstrap has a nice guide for the upgrade. We hadn’t tweaked the older version too much, so this was simpler than we expected. And this suddenly made almost everything adapt nicely to mobile, except for few adjustments.

Another thing came for free with Bootstrap 3 – flat UI.

Step 3: Change color palette

Many people had told us that the website looked little dull, which was true. The solution clearly lies in the colors. We wanted to make the front site look little more vibrant, with more saturated and contrasting colors.

So we went page after page and changed the styles, also making sure most pages have a “hero unit”.

Results

recruiterbox-old-homepage

Recruiterbox homepage before the redesign

Recruiterbox homepage screenshot

The new homepage

As planned, we were monitoring Google Analytics for any noticeable changes in traffic. Other than the usual drop during the holiday season in US, there didn’t seem to be any negative change. In fact, conversion rate started increasing slowly. One interesting thing was that the mobile traffic increased gradually but there was no significant sign up rate in mobile. On the other hand, the sign up rate in desktop had increased considerably. Probably people go back to their desktop to signup after checking out the website in mobile? This was the only likely explanation we could come up with. Also it made sense, Recruiterbox being a B2B product.

Now, after a month since the redesign has been out, with few other UX optimizations (will write about it soon), the signup rate has increased by a whopping 70%!

This post on recruiterbox tech blog:
http://inside.recruiterbox.com/improving-recruiterboxcom-for-humans-without/