BrowserStack

Redesiging the world's most used cross-browser testing tool.

Problem

Browserstack was working on the same design language since it's launch and it was all over the place. As an example, the number of colors used on the website were over 100 and there was no consistency in typefaces used. This become a problem for users to realise the different products were under the same umbrella. A bloated codebase was also the part of the problem.

Initial Information Architecture

We used the 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 throughout the landing pages.

Browserstack was working on the same design language since it's launch and it was all over the place. As an example, the number of colors used on the website were over 100 and there was no consistency in typefaces used. This become a problem for users to realise the different products were under the same umbrella. A bloated codebase was also the part of the problem.

Early wireframes for the 3 levels

As you can see from the above IA, we started doing the first version of the wireframes of the first, second and third level pages. We tried keeping the molecules (sections) consistent in order to ease out the design and the development process.

The color palette

As you can see from the above IA, we started doing the first version of the wireframes of the first, second and third level pages. We tried keeping the molecules (sections) consistent in order to ease out the design and the development process.

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.

Level 1 (Live Landing)

Level 3 (Documentation)

Level 1 (Live Features)

Learning and Team

As a part of the five-member design team handling an entire redesign, focusing on the right problems and a well thought out process was key. Following a very rigid style guide and a component first approach made ours and developer's lives much simpler in the later stage because both the teams were reusing components (or habitats).

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