User Experience, Case Study

Browserstack Rebranding & Redesign

The Problem

Browserstack was working on the same design language since it's launch and it was all over the place. As a small example, the number of colors used on the website were over 100 and there was no consistency in typefaces used. All in all, and all products looked different from each other. We had to fix that.

The Fix

We used the very famous Atomic Design approach to tackle this gigantic task. We called every small detail of the page an atom, which combine to form molecules, then organism and then the templates. Now these templates were a bunch of reusable components we used through out the landing pages. Parag, our intern, blogged a much more detailed post about this split.

We also split the entire experience into 3 levels, based on the hierarchy of that page compared to previous page. Every level had a similar design system. Here are the three templates we came up for the 3 levels.

The Color Palette

We played around with a lot of colors and finally narrowed it down to the following palette, promised to adhere to it and oh boy, we did.

The Typography Scale

We wanted a very polished and upbeat sense of type while focusing heavily on the basics. We played with different sans serif combinations and font sizes based on the modular scale. We finally decided to use Source Sans Pro for the headings and Myriad Pro for the content.

Digging deeper into type, we also set a 21px baseline grid which was respected throughout our visual design in the later scales. Also, the progression in font sizes involved mathematics and a lot of tweaking with different heading sizes.

The Result

After an year long stint with BrowserStack redesign, we finally deployed the all new Browserstack redesign and this is how it looks now.

Browserstack Home Page (Level 1)

The New FAQs (Level 3)

New Pricing Page (Level 2)

Fully Responsive

Every page we deployed for the Browserstack redesign was fully responsive for mobiles, tablets, desktops and huge ass screens. Here is how the new Automate looks on and iPhone and an iPad.

The Response

Since Browserstack is a very heavily used product by the developer community, the redesign instantly picked up on twitter and we mostly got some good response from our users. 

Learnings

As a part of the five member design team handling an entire redesign, focusing on the right problems was key. We soft launched the redesign for the landing pages before doing it for all the internal account pages.

We heavily focused on design process (atomic design for us) that made our and the developer's lives much simpler in the later stage because both the teams were reusing components (or habitats).

Team

We were 5 people design team and all of us played a super important role in the redesign. We are basically Lokesh Khemani, Sagar Patil, Aaron DurhamArun Pattnaik and our awesome intern Parag Nandi.