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”.
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: