BrowserStack

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

Role

Product Designer

Time

July 2015 — January 2016

Problem

Browserstack had been working on the same, inconsistent design language since it's launch and it was all over the place. There were inconsitencies with brand colors and typography resulting in a sense of vagueness for the users to realise our different product offerings. A bloated codebase was also the side-effec of this problem.

Browserstack had been working on the same, inconsistent design language since it's launch and it was all over the place. There were inconsitencies with brand colors and typography resulting in a sense of vagueness for the users to realise our different product offerings. A bloated codebase was also the side-effec of this problem.

Browserstack had been working on the same, inconsistent design language since it's launch and it was all over the place. There were inconsitencies with brand colors and typography resulting in a sense of vagueness for the users to realise our different product offerings. A bloated codebase was also the side-effec of this problem.

Browserstack had been working on the same, inconsistent design language since it's launch and it was all over the place. There were inconsitencies with brand colors and typography resulting in a sense of vagueness for the users to realise our different product offerings. A bloated codebase was also the side-effec of this problem.

Initial Information Architecture

We used the Atomic design approach to organize and name our design components. Using atomic design to organize components and splitting the pages into 3 different levels based on how we navigate to each one of them, we established the information architecture early on.

We used the Atomic design approach to organize and name our design components. Using atomic design to organize components and splitting the pages into 3 different levels based on how we navigate to each one of them, we established the information architecture early on.

We used the Atomic design approach to organize and name our design components. Using atomic design to organize components and splitting the pages into 3 different levels based on how we navigate to each one of them, we established the information architecture early on.

We used the Atomic design approach to organize and name our design components. Using atomic design to organize components and splitting the pages into 3 different levels based on how we navigate to each one of them, we established the information architecture early on.

BROWSERSTACK-IA

Early screens for the BrowserStack new Information Architecture, doing this made our lives quite easy later on in the redesign since we had mapped out all pages that shared similar design levels.

Level-1-Browserstack

Template — Level 1

Level-2-Browserstack

Template — Level 2

Level-3-Browserstack

Template — Level 3

The color palette

We explored different variations of the color palette and decided to play it safe with a blue as a primary color which was complemented by list of functional and typograhic colors. 

We explored different variations of the color palette and decided to play it safe with a blue as a primary color which was complemented by list of functional and typograhic colors. 

We explored different variations of the color palette and decided to play it safe with a blue as a primary color which was complemented by list of functional and typograhic colors. 

We explored different variations of the color palette and decided to play it safe with a blue as a primary color which was complemented by list of functional and typograhic colors. 

browserstac-colors

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.

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.

browserstack-type

The Result

The Result

The Result

The Result

live-landing@2x

Level 1 (Live Landing)

FAQs

Documentation)

pricing (1)

Level 2 (Pricing)

Level 2 (Pricing)

features

Level 1 (Live Features)

Learnings 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.

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.

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.

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.